drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Radio

Browse source 
support Radio
This commit is contained in:
梁灏 2017-03-01 17:01:22 +08:00
parent fc7ef07216
commit 06322514c6
13 changed files with 77 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGE.md Normal file
View file

@ -0,0 +1,6 @@
### Input
使用 v-model
### RadioGroup
使用 v-model
### Radio
value 改为了 label，使用 v-model，废弃 checked

2
README.md
View file

@ -21,7 +21,7 @@
- [x] Button
- [x] Icon
- [x] Input
- [ ] Radio
- [x] Radio
- [ ] Checkbox
- [ ] Switch
- [ ] Table

1
src/components/affix/affix.vue
View file

@ -39,6 +39,7 @@
}
export default {
name: 'Affix',
props: {
offsetTop: {
type: Number,

1
src/components/button/button-group.vue
View file

@ -9,6 +9,7 @@
const prefixCls = 'ivu-btn-group';
export default {
name: 'buttonGroup',
props: {
size: {
validator (value) {

1
src/components/button/button.vue
View file

@ -12,6 +12,7 @@
const prefixCls = 'ivu-btn';
export default {
name: 'Button',
components: { Icon },
props: {
type: {

1
src/components/icon/icon.vue
View file

@ -5,6 +5,7 @@
const prefixCls = 'ivu-icon';
export default {
name: 'Icon',
props: {
type: String,
size: [Number, String],

1
src/components/input/input.vue
View file

@ -48,6 +48,7 @@
const prefixCls = 'ivu-input';
export default {
name: 'Input',
props: {
type: {
validator (value) {

29
src/components/radio/radio-group.vue
View file

@ -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();
}
}
};

47
src/components/radio/radio.vue
View file

@ -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();
}
}
};

6
src/index.js
View file

@ -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,

1
test/app.vue
View file

@ -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>

4
test/main.js
View file

@ -32,6 +32,10 @@ const router = new VueRouter({
{
path: '/input',
component: require('./routers/input.vue')
},
{
path: '/radio',
component: require('./routers/radio.vue')
}
]
});

191
test/routers/radio.vue
View file

@ -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>