Merge branch 'master' of https://github.com/vueComponent/ant-design
commit
94fe1545c4
|
@ -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)
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<Radio>Radio</Radio>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Radio,
|
||||
},
|
||||
}
|
||||
</script>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue