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