wanlei
7 years ago
4 changed files with 0 additions and 217 deletions
@ -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