pull/9/head
wangxueliang 2017-11-07 12:03:00 +08:00
commit 94fe1545c4
13 changed files with 364 additions and 61 deletions

View File

@ -32,13 +32,13 @@ export default {
prop: 'checked',
},
inject: {
context: { default: undefined },
checkboxGroupContext: { default: undefined },
},
data () {
const { context, checked, defaultChecked, value } = this
const { checkboxGroupContext, checked, defaultChecked, value } = this
let stateChecked
if (context && context.checkedStatus) {
stateChecked = context.checkedStatus.has(value)
if (checkboxGroupContext && checkboxGroupContext.checkedStatus) {
stateChecked = checkboxGroupContext.checkedStatus.has(value)
}
return {
stateChecked: stateChecked === undefined
@ -72,8 +72,8 @@ export default {
handleChange (event) {
const targetChecked = event.target.checked
this.$emit('input', targetChecked)
const { name, value, checked, context, stateChecked } = this
if ((checked === undefined && !context) || (context && context.value === undefined)) {
const { name, value, checked, checkboxGroupContext, stateChecked } = this
if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.value === undefined)) {
this.stateChecked = targetChecked
}
const target = {
@ -81,8 +81,8 @@ export default {
value,
checked: !stateChecked,
}
if (this.context) {
this.context.handleChange({ target })
if (this.checkboxGroupContext) {
this.checkboxGroupContext.handleChange({ target })
} else {
this.$emit('change', {
target,
@ -100,7 +100,7 @@ export default {
checked (val) {
this.stateChecked = val
},
'context.checkedStatus': function (checkedStatus) {
'checkboxGroupContext.checkedStatus': function (checkedStatus) {
this.stateChecked = checkedStatus.has(this.value)
},
},

View File

@ -1,8 +1,9 @@
<template>
<div :class="`${prefixCls}`">
<Checkbox v-for="item in checkOptions" :key="item.value" :checked="checkedStatus.has(item.value)"
:value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Checkbox>
<slot v-if="options.length === 0"></slot>
<Checkbox v-for="item in checkOptions" :key="item.value" :value="item.value" :disabled="item.disabled">
{{item.label}}
</Checkbox>
<slot v-if="checkOptions.length === 0"></slot>
</div>
</template>
<script>
@ -33,7 +34,7 @@ export default {
},
provide () {
return {
context: this,
checkboxGroupContext: this,
}
},
data () {

View File

@ -1,8 +1,8 @@
<template>
<div :class="`${prefixCls}`">
<Radio v-for="item in options" :key="item.value" :checked="item.value === stateValue"
:value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Radio>
<slot v-if="options.length === 0"></slot>
<div :class="classes">
<Radio v-for="item in radioOptions" :key="item.value"
:value="item.value" :disabled="item.disabled" :name="name">{{item.label}}</Radio>
<slot v-if="radioOptions.length === 0"></slot>
</div>
</template>
<script>
@ -32,6 +32,8 @@ export default {
default: () => [],
type: Array,
},
disabled: Boolean,
name: String,
},
data () {
const { value, defaultValue } = this
@ -42,17 +44,30 @@ export default {
model: {
prop: 'value',
},
computed: {
provide () {
return {
radioGroupContext: this,
}
},
created () {
this.setChildRadio(this.$slots.default)
computed: {
radioOptions () {
const { disabled } = this
return this.options.map(option => {
return typeof option === 'string'
? { label: option, value: option }
: { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
})
},
classes () {
const { prefixCls, size } = this
return {
[`${prefixCls}`]: true,
[`${prefixCls}-${size}`]: size,
}
},
},
methods: {
handleChange (event) {
if (this.disabled) {
return false
}
const target = event.target
const { value: targetValue } = target
if (this.value === undefined) {
@ -61,29 +76,10 @@ export default {
this.$emit('input', targetValue)
this.$emit('change', event)
},
setChildRadio (children = []) {
const { options, $slots, stateValue } = this
if (options.length === 0 && $slots.default) {
children.forEach(({ componentOptions = {}, children: newChildren }) => {
const { Ctor, propsData } = componentOptions
if (Ctor && Ctor.options.name === 'Radio') {
propsData.isGroup = true
propsData.onGroupChange = this.handleChange
propsData.checked = propsData.value === stateValue
} else {
this.setChildRadio(newChildren)
}
}, this)
}
},
},
beforeUpdate () {
this.setChildRadio(this.$slots.default)
},
watch: {
value (val) {
this.stateValue = val
this.setChildRadio(this.$slots.default)
},
},
components: {

View File

@ -26,15 +26,23 @@ export default {
isGroup: Boolean,
value: [String, Number, Boolean],
name: String,
onGroupChange: Function,
},
model: {
prop: 'checked',
},
inject: {
radioGroupContext: { default: undefined },
},
data () {
const { checked, defaultChecked } = this
const { radioGroupContext, checked, defaultChecked, value } = this
let stateChecked
if (radioGroupContext && radioGroupContext.stateValue) {
stateChecked = radioGroupContext.stateValue === value
}
return {
stateChecked: checked === undefined ? defaultChecked : checked,
stateChecked: stateChecked === undefined
? checked === undefined ? defaultChecked : checked
: stateChecked,
}
},
computed: {
@ -61,27 +69,28 @@ export default {
methods: {
handleChange (event) {
const targetChecked = event.target.checked
const { name, value, checked } = this
if (checked === undefined) {
this.$emit('input', targetChecked)
const { name, value, checked, radioGroupContext, stateChecked } = this
if ((checked === undefined && !radioGroupContext) || (radioGroupContext && radioGroupContext.value === undefined)) {
this.stateChecked = targetChecked
}
this.$emit('input', targetChecked)
const target = {
name,
value,
checked: targetChecked,
checked: !stateChecked,
}
this.$emit('change', {
target,
stopPropagation () {
event.stopPropagation()
},
preventDefault () {
event.preventDefault()
},
})
if (this.isGroup) {
this.onGroupChange({ target })
if (this.radioGroupContext) {
this.radioGroupContext.handleChange({ target })
} else {
this.$emit('change', {
target,
stopPropagation () {
event.stopPropagation()
},
preventDefault () {
event.preventDefault()
},
})
}
},
},
@ -89,6 +98,9 @@ export default {
checked (val) {
this.stateChecked = val
},
'radioGroupContext.stateValue': function (stateValue) {
this.stateChecked = stateValue === this.value
},
},
}
</script>

View File

@ -0,0 +1,13 @@
<template>
<div>
<Radio>Radio</Radio>
</div>
</template>
<script>
import { Radio } from 'antd'
export default {
components: {
Radio,
},
}
</script>

View File

@ -0,0 +1,31 @@
<template>
<div>
<Radio :defaultChecked="false" :disabled="disabled">Disabled</Radio>
<br />
<Radio defaultChecked :disabled="disabled">Disabled</Radio>
<div :style="{ marginTop: 20 }">
<AntButton type="primary" @click="toggleDisabled">
Toggle disabled
</AntButton>
</div>
</div>
</template>
<script>
import { Radio, Button } from 'antd'
export default {
data () {
return {
disabled: true,
}
},
methods: {
toggleDisabled () {
this.disabled = !this.disabled
},
},
components: {
Radio,
AntButton: Button,
},
}
</script>

View File

@ -0,0 +1,42 @@
<template>
<div>
<h1>Basic</h1>
<Basic />
<h1>Disabled</h1>
<Disabled />
<h1>RadioButton</h1>
<RadioButton />
<h1>RadioGroupMore</h1>
<RadioGroupMore />
<h1>RadioGroupOptions</h1>
<RadioGroupOptions />
<h1>RadioGroupWithName</h1>
<RadioGroupWithName />
<h1>RadioGroup</h1>
<RadioGroup />
<h1>Size</h1>
<Size />
</div>
</template>
<script>
import Basic from './basic'
import Disabled from './disabled'
import RadioButton from './radioButton'
import RadioGroupMore from './radioGroup-more'
import RadioGroupOptions from './radioGroup-options'
import RadioGroupWithName from './radioGroup-with-name'
import RadioGroup from './radioGroup'
import Size from './size'
export default {
components: {
Basic,
Disabled,
RadioButton,
RadioGroupMore,
RadioGroupOptions,
RadioGroupWithName,
RadioGroup,
Size,
},
}
</script>

View File

@ -0,0 +1,42 @@
<template>
<div>
<div>
<RadioGroup @change="onChange" defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: 16 }">
<RadioGroup @change="onChange" defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b" disabled>Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: 16 }">
<RadioGroup disabled @change="onChange" defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>
</template>
<script>
import { Radio } from 'antd'
export default {
methods: {
onChange (e) {
console.log(`checked = ${e.target.value}`)
},
},
components: {
RadioButton: Radio.Button,
RadioGroup: Radio.Group,
},
}
</script>

View File

@ -0,0 +1,35 @@
<template>
<RadioGroup @change="onChange" v-model="value">
<Radio :style="radioStyle" :value="1">Option A</Radio>
<Radio :style="radioStyle" :value="2">Option B</Radio>
<Radio :style="radioStyle" :value="3">Option C</Radio>
<Radio :style="radioStyle" :value="4">
More...
<Input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
</Radio>
</RadioGroup>
</template>
<script>
import { Radio } from 'antd'
export default {
data () {
return {
value: 1,
radioStyle: {
display: 'block',
height: '30px',
lineHeight: '30px',
},
}
},
methods: {
onChange (e) {
console.log('radio checked', e.target.value)
},
},
components: {
Radio,
RadioGroup: Radio.Group,
},
}
</script>

View File

@ -0,0 +1,50 @@
<template>
<div>
<RadioGroup :options="plainOptions" @change="onChange1" :defaultValue="value1" />
<br />
<RadioGroup :options="options" @change="onChange2" v-model="value2" />
<br />
<RadioGroup :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
</div>
</template>
<script>
import { Radio } from 'antd'
const plainOptions = ['Apple', 'Pear', 'Orange']
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
]
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
]
export default {
data () {
return {
plainOptions,
options,
optionsWithDisabled,
value1: 'Apple',
value2: 'Apple',
value3: 'Apple',
}
},
methods: {
onChange1 (e) {
console.log('radio1 checked', e.target.value)
},
onChange2 (e) {
console.log('radio2 checked', e.target.value)
},
onChange3 (e) {
console.log('radio3 checked', e.target.value)
},
},
components: {
Radio,
RadioGroup: Radio.Group,
},
}
</script>

View File

@ -0,0 +1,17 @@
<template>
<RadioGroup name="radioGroup" :defaultValue="1">
<Radio :value="1">A</Radio>
<Radio :value="2">B</Radio>
<Radio :value="3">C</Radio>
<Radio :value="4">D</Radio>
</RadioGroup>
</template>
<script>
import { Radio } from 'antd'
export default {
components: {
Radio,
RadioGroup: Radio.Group,
},
}
</script>

View File

@ -0,0 +1,27 @@
<template>
<RadioGroup @change="onChange" v-model="value">
<Radio :value="1">A</Radio>
<Radio :value="2">B</Radio>
<Radio :value="3">C</Radio>
<Radio :value="4">D</Radio>
</RadioGroup>
</template>
<script>
import { Radio } from 'antd'
export default {
data () {
return {
value: 1,
}
},
methods: {
onChange (e) {
console.log('radio checked', e.target.value)
},
},
components: {
Radio,
RadioGroup: Radio.Group,
},
}
</script>

View File

@ -0,0 +1,37 @@
<template>
<div>
<div>
<RadioGroup defaultValue="a" size="large">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: 16 }">
<RadioGroup defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: 16 }">
<RadioGroup defaultValue="a" size="small">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>
</template>
<script>
import { Radio } from 'antd'
export default {
components: {
RadioButton: Radio.Button,
RadioGroup: Radio.Group,
},
}
</script>