add radio demo

2017-11-07 11:58:47 +08:00 · 2017-11-07 11:58:47 +08:00 · 13d0ae378e
parent f2ea0ccc0f
commit 13d0ae378e
13 changed files with 341 additions and 61 deletions
--- a/components/checkbox/Checkbox.vue
+++ b/components/checkbox/Checkbox.vue
@ -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)
    },
  },
--- a/components/checkbox/Group.vue
+++ b/components/checkbox/Group.vue
@ -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 () {
--- a/components/radio/Group.vue
+++ b/components/radio/Group.vue
@ -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: {
--- a/components/radio/Radio.vue
+++ b/components/radio/Radio.vue
@ -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>
--- a/components/radio/demo/basic.vue
+++ b/components/radio/demo/basic.vue
@ -0,0 +1,13 @@
+<template>
+  <div>
+    <Radio>Radio</Radio>
+  </div>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  components: {
+    Radio,
+  },
+}
+</script>
--- a/components/radio/demo/disabled.vue
+++ b/components/radio/demo/disabled.vue
@ -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>
--- a/components/radio/demo/index.vue
+++ b/components/radio/demo/index.vue
@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>Disabled</h1>
+    <Disabled />
+    <Layout />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import Disabled from './disabled'
+export default {
+  components: {
+    Basic,
+    Disabled,
+  },
+}
+</script>
--- a/components/radio/demo/radioButton.vue
+++ b/components/radio/demo/radioButton.vue
@ -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>
--- a/components/radio/demo/radioGroup-more.vue
+++ b/components/radio/demo/radioGroup-more.vue
@ -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>
--- a/components/radio/demo/radioGroup-options.vue
+++ b/components/radio/demo/radioGroup-options.vue
@ -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>
--- a/components/radio/demo/radioGroup-with-name.vue
+++ b/components/radio/demo/radioGroup-with-name.vue
@ -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>
--- a/components/radio/demo/radioGroup.vue
+++ b/components/radio/demo/radioGroup.vue
@ -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>
--- a/components/radio/demo/size.vue
+++ b/components/radio/demo/size.vue
@ -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>