diff --git a/CHANGE.md b/CHANGE.md
new file mode 100644
index 0000000..3e89c5f
--- /dev/null
+++ b/CHANGE.md
@@ -0,0 +1,6 @@
+### Input
+使用 v-model
+### RadioGroup
+使用 v-model
+### Radio
+value 改为了 label，使用 v-model，废弃 checked
diff --git a/README.md b/README.md
index ba1e3a2..81fe8fc 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@
- [x] Button
- [x] Icon
- [x] Input
-- [ ] Radio
+- [x] Radio
- [ ] Checkbox
- [ ] Switch
- [ ] Table
diff --git a/src/components/affix/affix.vue b/src/components/affix/affix.vue
index e315caf..0cb7a96 100644
--- a/src/components/affix/affix.vue
+++ b/src/components/affix/affix.vue
@@ -39,6 +39,7 @@
}
export default {
+ name: 'Affix',
props: {
offsetTop: {
type: Number,
diff --git a/src/components/button/button-group.vue b/src/components/button/button-group.vue
index de2f624..edd83fb 100644
--- a/src/components/button/button-group.vue
+++ b/src/components/button/button-group.vue
@@ -9,6 +9,7 @@
const prefixCls = 'ivu-btn-group';
export default {
+ name: 'buttonGroup',
props: {
size: {
validator (value) {
diff --git a/src/components/button/button.vue b/src/components/button/button.vue
index 8bb5b83..e3c4623 100644
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@@ -12,6 +12,7 @@
const prefixCls = 'ivu-btn';
export default {
+ name: 'Button',
components: { Icon },
props: {
type: {
diff --git a/src/components/icon/icon.vue b/src/components/icon/icon.vue
index 787df6c..d3371f8 100644
--- a/src/components/icon/icon.vue
+++ b/src/components/icon/icon.vue
@@ -5,6 +5,7 @@
const prefixCls = 'ivu-icon';
export default {
+ name: 'Icon',
props: {
type: String,
size: [Number, String],
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index ca18198..eb87d80 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -48,6 +48,7 @@
const prefixCls = 'ivu-input';
export default {
+ name: 'Input',
props: {
type: {
validator (value) {
diff --git a/src/components/radio/radio-group.vue b/src/components/radio/radio-group.vue
index 12bfc20..f66250c 100644
--- a/src/components/radio/radio-group.vue
+++ b/src/components/radio/radio-group.vue
@@ -11,7 +11,7 @@
export default {
name: 'radioGroup',
props: {
- model: {
+ value: {
type: [String, Number],
default: ''
},
@@ -30,6 +30,11 @@
default: false
}
},
+ data () {
+ return {
+ currentValue: this.value
+ }
+ },
computed: {
classes () {
return [
@@ -42,27 +47,29 @@
];
}
},
- compiled () {
- this.updateModel();
+ mounted () {
+ this.updateValue();
},
methods: {
- updateModel () {
- const model = this.model;
+ updateValue () {
+ const value = this.value;
this.$children.forEach((child) => {
- child.selected = model == child.value;
+ child.currentValue = value == child.label;
child.group = true;
});
},
change (data) {
- this.model = data.value;
- this.updateModel();
+ this.currentValue = data.value;
+ this.updateValue();
+ this.$emit('input', data.value);
this.$emit('on-change', data.value);
- this.$dispatch('on-form-change', data.value);
+ // todo 事件
+// this.$dispatch('on-form-change', data.value);
}
},
watch: {
- model () {
- this.updateModel();
+ value () {
+ this.updateValue();
}
}
};
diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index da48127..3c7e737 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -6,31 +6,32 @@
type="radio"
:class="inputClasses"
:disabled="disabled"
- :checked="selected"
+ :checked="currentValue"
@change="change">
- </span><slot>{{ value }}</slot>
+ </span><slot>{{ label }}</slot>
</label>
</template>
<script>
const prefixCls = 'ivu-radio';
export default {
+ name: 'Radio',
props: {
- checked: {
+ value: {
type: Boolean,
default: false
},
+ label: {
+ type: [String, Number]
+ },
disabled: {
type: Boolean,
default: false
- },
- value: {
- type: [String, Number]
}
},
data () {
return {
- selected: false,
+ currentValue: this.value,
group: false
};
},
@@ -40,7 +41,7 @@
`${prefixCls}-wrapper`,
{
[`${prefixCls}-group-item`]: this.group,
- [`${prefixCls}-wrapper-checked`]: this.selected,
+ [`${prefixCls}-wrapper-checked`]: this.currentValue,
[`${prefixCls}-wrapper-disabled`]: this.disabled
}
];
@@ -49,7 +50,7 @@
return [
`${prefixCls}`,
{
- [`${prefixCls}-checked`]: this.selected,
+ [`${prefixCls}-checked`]: this.currentValue,
[`${prefixCls}-disabled`]: this.disabled
}
];
@@ -61,10 +62,10 @@
return `${prefixCls}-input`;
}
},
- ready () {
+ mounted () {
if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
if (!this.group) {
- this.updateModel();
+ this.updateValue();
}
},
methods: {
@@ -73,25 +74,27 @@
return false;
}
- this.selected = event.target.checked;
- this.checked = this.selected;
+ const checked = event.target.checked;
+ this.currentValue = checked;
+ this.$emit('input', checked);
+ this.$emit('on-change', checked);
- if (this.group && this.checked) {
+ if (this.group && this.label) {
this.$parent.change({
- value: this.value,
- checked: this.checked
+ value: this.label,
+ checked: this.value
});
}
-
- if (!this.group) this.$dispatch('on-form-change', this.selected);
+ // todo 事件
+// if (!this.group) this.$dispatch('on-form-change', checked);
},
- updateModel () {
- this.selected = this.checked;
+ updateValue () {
+ this.currentValue = this.value;
}
},
watch: {
- checked () {
- this.updateModel();
+ value () {
+ this.updateValue();
}
}
};
diff --git a/src/index.js b/src/index.js
index c0ab29d..64c8d1e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,7 +27,7 @@ import Input from './components/input';
// import Page from './components/page';
// import Poptip from './components/poptip';
// import Progress from './components/progress';
-// import Radio from './components/radio';
+import Radio from './components/radio';
// import Rate from './components/rate';
// import Slider from './components/slider';
// import Spin from './components/spin';
@@ -89,8 +89,8 @@ const iview = {
// Panel: Collapse.Panel,
// Poptip,
// Progress,
- // Radio,
- // RadioGroup: Radio.Group,
+ Radio,
+ RadioGroup: Radio.Group,
// Rate,
Row,
// iSelect: Select,
diff --git a/test/app.vue b/test/app.vue
index 83b38a3..302a7ad 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -28,6 +28,7 @@ li + li {
<li><router-link to="/grid">Grid</router-link></li>
<li><router-link to="/button">Button</router-link></li>
<li><router-link to="/input">Input</router-link></li>
+ <li><router-link to="/radio">Radio</router-link></li>
</ul>
</nav>
<router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 2c89d5e..935e14e 100644
--- a/test/main.js
+++ b/test/main.js
@@ -32,6 +32,10 @@ const router = new VueRouter({
{
path: '/input',
component: require('./routers/input.vue')
+ },
+ {
+ path: '/radio',
+ component: require('./routers/radio.vue')
}
]
});
diff --git a/test/routers/radio.vue b/test/routers/radio.vue
index 9375a79..115b9b6 100644
--- a/test/routers/radio.vue
+++ b/test/routers/radio.vue
@@ -1,206 +1,43 @@
<template>
<div>
- <Radio-group :model.sync="phone" vertical>
- <Radio value="apple">
+ <Radio v-model="single" @on-change="c">Radio</Radio>
+ <Radio-group v-model="phone" type="button" @on-change="c">
+ <Radio label="apple">
<Icon type="social-apple"></Icon>
<span>Apple</span>
</Radio>
- <Radio value="android" disabled>
+ <Radio label="android">
<Icon type="social-android"></Icon>
<span>Android</span>
</Radio>
- <Radio value="windows">
+ <Radio label="windows">
<Icon type="social-windows"></Icon>
<span>Windows</span>
</Radio>
</Radio-group>
- <Radio-group :model.sync="animal">
- <Radio value="金斑蝶"></Radio>
- <Radio value="爪哇犀牛"></Radio>
- <Radio value="印度黑羚"></Radio>
+ <Radio-group v-model="animal">
+ <Radio label="金斑蝶"></Radio>
+ <Radio label="爪哇犀牛"></Radio>
+ <Radio label="印度黑羚"></Radio>
</Radio-group>
- <br><br>
- <i-button @click="activeKey = '2'">换</i-button>
+ {{ phone }}
+ <div @click="phone = 'apple'">apple</div>
+ <div @click="single = true"> single</div>{{ single }}
</div>
- <Radio :checked.sync="radio">Radio</Radio>
- <i-button @click="radio = !radio">change radio</i-button>
- <br>
- <br>
- <Radio-group :model.sync="phone" type="button" vertical>
- <Radio value="apple">
- <Icon type="social-apple"></Icon>
- <span>Apple</span>
- </Radio>
- <Radio value="android">
- <Icon type="social-android"></Icon>
- <span>Android</span>
- </Radio>
- <Radio value="windows">
- <Icon type="social-windows"></Icon>
- <span>Windows</span>
- </Radio>
- </Radio-group>
- <Radio-group :model.sync="animal" type="button">
- <Radio value="金斑蝶"></Radio>
- <Radio value="爪哇犀牛"></Radio>
- <Radio value="印度黑羚"></Radio>
- </Radio-group>
-
- <Radio-group :model.sync="animal" type="button">
- <Radio value="金斑蝶" disabled></Radio>
- <Radio value="爪哇犀牛" disabled></Radio>
- <Radio value="印度黑羚"></Radio>
- </Radio-group>
- <br><br>
- <Radio-group :model.sync="animal" type="button" size="large">
- <Radio value="金斑蝶"></Radio>
- <Radio value="爪哇犀牛"></Radio>
- <Radio value="印度黑羚"></Radio>
- </Radio-group>
- <Radio-group :model.sync="animal" type="button">
- <Radio value="金斑蝶"></Radio>
- <Radio value="爪哇犀牛"></Radio>
- <Radio value="印度黑羚"></Radio>
- </Radio-group>
- <Radio-group :model.sync="animal" type="button" size="small">
- <Radio value="金斑蝶"></Radio>
- <Radio value="爪哇犀牛"></Radio>
- <Radio value="印度黑羚"></Radio>
- </Radio-group>
- <br><br><br><br>
- <Checkbox :checked.sync="radio">Checkbox</Checkbox>
- <br><br>
- <Checkbox-group :model="social">
- <Checkbox value="twitter">
- <Icon type="social-twitter"></Icon>
- <span>Twitter</span>
- </Checkbox>
- <Checkbox value="facebook">
- <Icon type="social-facebook"></Icon>
- <span>Facebook</span>
- </Checkbox>
- <Checkbox value="github">
- <Icon type="social-github"></Icon>
- <span>Github</span>
- </Checkbox>
- <Checkbox value="snapchat">
- <Icon type="social-snapchat"></Icon>
- <span>Snapchat</span>
- </Checkbox>
- </Checkbox-group>
- <br><br>
- <Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
- <Checkbox-group :model="disabledGroup">
- <Checkbox value="香蕉" disabled></Checkbox>
- <Checkbox value="苹果" disabled></Checkbox>
- <Checkbox value="西瓜"></Checkbox>
- </Checkbox-group>
- <br><br>
- <Switch @on-change="change"></Switch>
- <br><br>
- <Switch>
- <span slot="open">开</span>
- <span slot="close">关</span>
- </Switch>
- <br><br>
- <Switch>
- <Icon type="android-done" slot="open"></Icon>
- <Icon type="android-close" slot="close"></Icon>
- </Switch>
- <Switch disabled></Switch>
- <Switch size="small"></Switch>
- <br><br>
- <Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
- <Input-number :value="2" size="small"></Input-number>
- <Input-number :value="2"></Input-number>
- <Input-number :value="2" size="large"></Input-number>
- <br><br>
- <Breadcrumb>
- <Breadcrumb-item href="/">Home</Breadcrumb-item>
- <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
- <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
- </Breadcrumb>
- <Breadcrumb>
- <Breadcrumb-item href="/">
- <Icon type="ios-home-outline"></Icon> Home
- </Breadcrumb-item>
- <Breadcrumb-item href="/components/breadcrumb">
- <Icon type="social-buffer-outline"></Icon> Components
- </Breadcrumb-item>
- <Breadcrumb-item>
- <Icon type="pound"></Icon> Breadcrumb
- </Breadcrumb-item>
- </Breadcrumb>
- <Breadcrumb separator=">">
- <Breadcrumb-item href="/">Home</Breadcrumb-item>
- <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
- <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
- </Breadcrumb>
- <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
- <Breadcrumb-item href="/">Home</Breadcrumb-item>
- <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
- <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
- </Breadcrumb>
- <br><br>
- <Checkbox :checked.sync="single"></Checkbox>
</template>
<script>
- import { Radio, Alert, Icon, Collapse, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
-
- const RadioGroup = Radio.Group;
- const Panel = Collapse.Panel;
- const CheckboxGroup = Checkbox.Group;
- const BreadcrumbItem = Breadcrumb.Item;
-
export default {
- components: {
- Radio,
- RadioGroup,
- Alert,
- Icon,
- Collapse,
- Panel,
- iButton,
- Checkbox,
- CheckboxGroup,
- Switch,
- InputNumber,
- Breadcrumb,
- BreadcrumbItem,
- LoadingBar
- },
- props: {
-
- },
data () {
return {
- single: false,
- radio: false,
- radioGroup: '段模',
- activeKey: [1,2],
phone: 'apple',
animal: '爪哇犀牛',
- social: ['facebook', 'github'],
- disabledSingle: true,
- disabledGroup: ['苹果']
+ single: false
}
},
- computed: {
-
- },
methods: {
- changeGroup (data) {
- console.log(data);
- },
- closed (data) {
+ c (data) {
console.log(data)
- },
- change (status) {
- console.log(status);
}
- },
- ready () {
- LoadingBar.start();
}
}
</script>
--
libgit2 0.21.4