wanlei
7 years ago
parent
e712274bd1
commit
8b48d381ce
@ -1,87 +0,0 @@
|
|||||||
<template>
|
|
||||||
<span>
|
|
||||||
<span class={`${prefixCls}-inner`}>
|
|
||||||
<component></component>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Radio',
|
|
||||||
props: {
|
|
||||||
prefixCls: {
|
|
||||||
default: 'ant-radio',
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
defaultChecked: Boolean,
|
|
||||||
checked: { type: Boolean, default: undefined },
|
|
||||||
disabled: Boolean,
|
|
||||||
isGroup: Boolean,
|
|
||||||
value: [String, Number, Boolean],
|
|
||||||
name: String,
|
|
||||||
onGroupChange: Function,
|
|
||||||
},
|
|
||||||
model: {
|
|
||||||
prop: 'checked',
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
const { checked, defaultChecked } = this
|
|
||||||
return {
|
|
||||||
stateChecked: checked === undefined ? defaultChecked : checked,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
hasDefaultSlot () {
|
|
||||||
return !!this.$slots.default
|
|
||||||
},
|
|
||||||
classes () {
|
|
||||||
const { prefixCls, disabled, stateChecked } = this
|
|
||||||
return {
|
|
||||||
[`${prefixCls}-wrapper`]: true,
|
|
||||||
[`${prefixCls}-wrapper-checked`]: stateChecked,
|
|
||||||
[`${prefixCls}-wrapper-disabled`]: disabled,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
checkboxClass () {
|
|
||||||
const { prefixCls, disabled, stateChecked } = this
|
|
||||||
return {
|
|
||||||
[`${prefixCls}`]: true,
|
|
||||||
[`${prefixCls}-checked`]: stateChecked,
|
|
||||||
[`${prefixCls}-disabled`]: disabled,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleChange (event) {
|
|
||||||
const targetChecked = event.target.checked
|
|
||||||
const { name, value, checked } = this
|
|
||||||
if (checked === undefined) {
|
|
||||||
this.stateChecked = targetChecked
|
|
||||||
}
|
|
||||||
this.$emit('input', targetChecked)
|
|
||||||
const target = {
|
|
||||||
name,
|
|
||||||
value,
|
|
||||||
checked: targetChecked,
|
|
||||||
}
|
|
||||||
this.$emit('change', {
|
|
||||||
target,
|
|
||||||
stopPropagation () {
|
|
||||||
event.stopPropagation()
|
|
||||||
},
|
|
||||||
preventDefault () {
|
|
||||||
event.preventDefault()
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (this.isGroup) {
|
|
||||||
this.onGroupChange({ target })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
checked (val) {
|
|
||||||
this.stateChecked = val
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
import Switch from './Switch.vue'
|
|
||||||
export default Switch
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
import '../../style/index.less'
|
|
||||||
import './index.less'
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
@import "../../style/themes/default";
|
|
||||||
@import "../../style/mixins/index";
|
|
||||||
|
|
||||||
@switch-prefix-cls: ~"@{ant-prefix}-switch";
|
|
||||||
@switch-duration: .36s;
|
|
||||||
|
|
||||||
.@{switch-prefix-cls} {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 22px;
|
|
||||||
min-width: 44px;
|
|
||||||
line-height: 20px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background-color: @disabled-color;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all @switch-duration;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&-inner {
|
|
||||||
color: #fff;
|
|
||||||
font-size: @font-size-base;
|
|
||||||
margin-left: 24px;
|
|
||||||
margin-right: 6px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
position: absolute;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
left: 1px;
|
|
||||||
top: 1px;
|
|
||||||
|
|
||||||
border-radius: 18px;
|
|
||||||
background-color: @component-background;
|
|
||||||
content: " ";
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all @switch-duration @ease-in-out-circ;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active:after {
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:hover {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-small {
|
|
||||||
height: 14px;
|
|
||||||
min-width: 28px;
|
|
||||||
line-height: 12px;
|
|
||||||
|
|
||||||
.@{switch-prefix-cls}-inner {
|
|
||||||
margin-left: 18px;
|
|
||||||
margin-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
top: 0;
|
|
||||||
left: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active:after {
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-small&-checked {
|
|
||||||
&:after {
|
|
||||||
left: 100%;
|
|
||||||
margin-left: -12.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{switch-prefix-cls}-inner {
|
|
||||||
margin-left: 3px;
|
|
||||||
margin-right: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-small:active&-checked:after {
|
|
||||||
margin-left: -16.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-checked {
|
|
||||||
background-color: @primary-color;
|
|
||||||
|
|
||||||
.@{switch-prefix-cls}-inner {
|
|
||||||
margin-left: 6px;
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
left: 100%;
|
|
||||||
margin-left: -19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active:after {
|
|
||||||
margin-left: -25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
background: #f4f4f4;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
background: #ccc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{switch-prefix-cls}-inner {
|
|
||||||
color: @disabled-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue