Skip to content

C
cube-ui

DiDi / cube-ui
12 个月 前同步成功

通知 34
Star 9078
Fork 1508
C
cube-ui

体验新版 GitCode，发现更多精彩内容 >>

提交 3f8a8070 编写于 作者: E Ethan 提交者： doly mood
浏览文件
操作

Radio support slot & unify checkbox and radio 

* <feat>(radio): custom radio label

* <fix>(radio): custom radio label test

* <update>(radio): custom radio label update

* <fix>(radio): custom radio label test

* <fix>(radio): custom radio label done

* <fix>(radio): custom radio label example done

* <fix>(radio): custom radio label example document done

* <update>(radio): optimize

* CR radio & checkbox

* radio units
上级 a492457d
隐藏空白更改
内联 并排
Showing with 478 addition and 251 deletion
document/components/docs/en-US/checkbox-group.md
浏览文件 @ 3f8a8070
......@@ -8,29 +8,6 @@
Default is vertical order style.
```html
<cube-checkbox-group v-model="checkList">
<cube-checkbox label="1">
Checkbox 1
</cube-checkbox>
<cube-checkbox label="2">
Checkbox 2
</cube-checkbox>
<cube-checkbox label="3" :disabled="true">
Disabled Checkbox
</cube-checkbox>
<cube-checkbox label="4" :disabled="true">
Disabled & Checked Checkbox
</cube-checkbox>
</cube-checkbox-group>
```
The value of `checkList` is an array, which represents the set of the values of `label` in selected checkboxs.
- Set options
Set options to generate checkboxes.
```html
<cube-checkbox-group v-model="checkList" :options="options" />
```
......@@ -40,21 +17,15 @@
return {
checkList: ['1', '4'],
options: [
'1',
'2',
{
label: 'Option1',
value: '1'
},
{
label: 'Option2',
value: '2'
},
{
label: 'Option3',
label: '3',
value: '3',
disabled: true
},
{
label: 'Option4',
label: '4',
value: '4',
disabled: true
}
......@@ -64,19 +35,29 @@
}
```
The value of `checkList` is an array, which represents the set of the values of `value` in selected checkboxs.
- Horizontal order
You can set `horizontal` to change the style to horizontal order.
```html
<cube-checkbox-group v-model="checkList" :horizontal="true">
<cube-checkbox label="1">1</cube-checkbox>
<cube-checkbox label="2">2</cube-checkbox>
<cube-checkbox label="3" :disabled="true">3</cube-checkbox>
<cube-checkbox label="4" :disabled="true">4</cube-checkbox>
<cube-checkbox-group v-model="checkList" :options="options" :horizontal="true" />
```
- Use slot
```html
<cube-checkbox-group v-model="checkList">
<cube-checkbox option="1"><i>Checkbox 1</i></cube-checkbox>
<cube-checkbox option="2"><i>Checkbox 2</i></cube-checkbox>
<cube-checkbox :option="{value: '3', disabled: true}"><i>Disabled Checkbox</i></cube-checkbox>
<cube-checkbox :option="{value: '4', disabled: true}"><i>Disabled & Checked Checkbox</i></cube-checkbox>
</cube-checkbox-group>
```
Use `cube-checkbox`, [cube-checkbox doc](#/en-US/docs/checkbox).
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
......
document/components/docs/en-US/checkbox.md
浏览文件 @ 3f8a8070
......@@ -14,16 +14,6 @@
If selected, the value of `checked` is `true`.
- Disabled state
```html
<cube-checkbox v-model="checked" :disabled="true">
Disabled Checkbox
</cube-checkbox>
```
Set `disabled` to `true` to turn into the disabled state.
- Position of the checkbox icon
```html
......@@ -37,17 +27,44 @@
- Change the value of model
```html
<cube-checkbox v-model="checked" label="labelValue">
Set label Checkbox
</cube-checkbox>
<cube-checkbox v-model="checked" :option="option" />
```
```js
export default {
data() {
return {
checked: false,
option: {
label: 'Option Checkbox',
value: 'optionValue',
disabled: false
}
}
}
}
```
If `label` is setted, and when the checkbox is selected, the value of `checked` is `'labelValue'`. When not selected, the value is `false`; Therefore, in circumstances of single checkbox, better not set `label`.
If `option` is setted, and when the checkbox is selected, the value of `checked` is `'optionValue'`. When not selected, the value is `false`; Therefore, in circumstances of single checkbox, better not set `option`.
- Disabled state
```html
<cube-checkbox v-model="checked" :option="{disabled: true}">
Disabled Checkbox
</cube-checkbox>
```
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| disabled | whether disabled | Boolean | true/false | false |
| option | option value | Boolean/String/Object | - | - |
| position | icon position | String | left/right | left |
| label | if selected, then map the value to v-model | Boolean/String | - | '' |
* `option` sub configuration
| Attribute | Description | Type |
| - | - | - |
| label | the text of label | String |
| value | the value of checkbox item | String/Number |
| disabled | whether the checkbox item is disabled | Boolean |
document/components/docs/en-US/radio.md
浏览文件 @ 3f8a8070
......@@ -7,7 +7,7 @@ Radio component. You could set the options and the position of the radio's icon.
- Basic usage
```html
<cube-radio v-model="selected" :options="options" />
<cube-radio-group v-model="selected" :options="options" />
```
```js
export default {
......@@ -25,7 +25,7 @@ Radio component. You could set the options and the position of the radio's icon.
- Configure the label, value, disabled state of options and the position of icon.
```html
<cube-radio v-model="selected2" :options="options2" position="right" />
<cube-radio-group v-model="selected2" :options="options2" position="right" />
```
```js
export default {
......@@ -59,7 +59,7 @@ Radio component. You could set the options and the position of the radio's icon.
- Horizontal order
```html
<cube-radio v-model="selected3" :options="options3" :horizontal="true" />
<cube-radio-group v-model="selected3" :options="options3" :horizontal="true" />
```
```js
export default {
......@@ -88,6 +88,48 @@ Radio component. You could set the options and the position of the radio's icon.
You can use `horizontal` to configure the style to horizontal layout.
- Use slot
```html
<cube-radio-group>
<cube-radio
v-for="(option, index) in options4"
:key="index"
:option="option"
v-model="selected4">
<img :src="option.src" />
</cube-radio>
</cube-radio-group>
```
```js
export default {
data() {
return {
selected4: '1',
options4: [
{
label: '1',
value: '1',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
},
{
label: '2',
value: '2',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
},
{
label: '3',
value: '3',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg',
disabled: true
}
]
}
}
}
```
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
......@@ -102,6 +144,21 @@ Radio component. You could set the options and the position of the radio's icon.
| - | - | - |
| label | the text of label | String |
| value | the value of radio item | String/Number |
| disabled | whether the item is disabled | Boolean |
| disabled | whether the radio item is disabled | Boolean |
Note: Each item of `options` can be an string, Which means both the `label` and `value` will be set as this string.
### cube-radio Props configuration
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
| option | option value | Object/String | - | - |
| position | icon position | String | left/right | left |
* `option` sub configuration
| Attribute | Description | Type |
| - | - | - |
| label | the text of label | String |
| value | the value of radio item | String/Number |
| disabled | whether the radio item is disabled | Boolean |
document/components/docs/zh-CN/checkbox-group.md
浏览文件 @ 3f8a8070
......@@ -7,28 +7,6 @@
- 垂直排列
默认就是垂直排列样式
```html
<cube-checkbox-group v-model="checkList">
<cube-checkbox label="1">
Checkbox 1
</cube-checkbox>
<cube-checkbox label="2">
Checkbox 2
</cube-checkbox>
<cube-checkbox label="3" :disabled="true">
Disabled Checkbox
</cube-checkbox>
<cube-checkbox label="4" :disabled="true">
Disabled & Checked Checkbox
</cube-checkbox>
</cube-checkbox-group>
```
`checkList` 的值是一个数组，代表的是选中的复选框 `label` 的值的集合。
- 设置 options
还可以通过 options 生成各个复选框
```html
<cube-checkbox-group v-model="checkList" :options="options" />
```
......@@ -38,21 +16,15 @@
return {
checkList: ['1', '4'],
options: [
'1',
'2',
{
label: 'Option1',
value: '1'
},
{
label: 'Option2',
value: '2'
},
{
label: 'Option3',
label: '3',
value: '3',
disabled: true
},
{
label: 'Option4',
label: '4',
value: '4',
disabled: true
}
......@@ -61,19 +33,29 @@
}
}
```
`checkList` 的值是一个数组，代表的是选中的复选框 `value` 的值的集合。
- 水平排列
可通过设置 `horizontal` 改变样式为水平排列
```html
<cube-checkbox-group v-model="checkList" :horizontal="true">
<cube-checkbox label="1">1</cube-checkbox>
<cube-checkbox label="2">2</cube-checkbox>
<cube-checkbox label="3" :disabled="true">3</cube-checkbox>
<cube-checkbox label="4" :disabled="true">4</cube-checkbox>
<cube-checkbox-group v-model="checkList" :options="options" :horizontal="true" />
```
- 自定义 label
```html
<cube-checkbox-group v-model="checkList">
<cube-checkbox option="1"><i>Checkbox 1</i></cube-checkbox>
<cube-checkbox option="2"><i>Checkbox 2</i></cube-checkbox>
<cube-checkbox :option="{value: '3', disabled: true}"><i>Disabled Checkbox</i></cube-checkbox>
<cube-checkbox :option="{value: '4', disabled: true}"><i>Disabled & Checked Checkbox</i></cube-checkbox>
</cube-checkbox-group>
```
可通过默认插槽插入 `cube-checkbox` 实现自定义每项的结构样子，关于 `cube-checkbox`，请参考其[文档](#/zh-CN/docs/checkbox)。
### Props 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
document/components/docs/zh-CN/checkbox.md
浏览文件 @ 3f8a8070
......@@ -13,15 +13,6 @@
```
如果选中了，则 `checked` 的值就为 `true`。
- 禁用状态
```html
<cube-checkbox v-model="checked" :disabled="true">
Disabled Checkbox
</cube-checkbox>
```
设置 `disabled` 为 `true` 即为禁用状态。
- 复选框图标位置
```html
......@@ -34,17 +25,44 @@
- 改变 model 的值
```html
<cube-checkbox v-model="checked" label="labelValue">
Set label Checkbox
</cube-checkbox>
<cube-checkbox v-model="checked" :option="option" />
```
```js
export default {
data() {
return {
checked: false,
option: {
label: 'Option Checkbox',
value: 'optionValue',
disabled: false
}
}
}
}
```
设置 `label`，当复选框选中的时候，`checked` 的值就是 `'labelValue'`，当未选中的时候，`checked` 的值就是 `false`；所以其实在单个复选框的场景下，最好不要设置 `label`。
设置 `option`，当复选框选中的时候，`checked` 的值就是 `'optionValue'`，当未选中的时候，`checked` 的值就是 `false`；所以其实在单个复选框的场景下，最好不要设置 `option`。
- 禁用状态
```html
<cube-checkbox v-model="checked" :option="{disabled: true}">
Disabled Checkbox
</cube-checkbox>
```
### Props 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
| disabled | 是否被禁用 | Boolean | true/false | false |
| option | 配置项 | Boolean/String/Object | - | - |
| position | 位置 | String | left/right | left |
| label | 如果选中的话，则是把该值映射到 v-model 上 | Boolean/String | - | '' |
* `option` 子配置项
| 参数 | 说明 | 类型 |
| - | - | - |
| label | 复选框显示文字 | String |
| value | 复选框的值 | String/Number |
| disabled | 复选框是否被禁用 | Boolean |
document/components/docs/zh-CN/radio.md
浏览文件 @ 3f8a8070
## Radio 单选框组
复选框组，可设置复选框组内容，样式等。
单选框组，可设置单选框组内容，样式等。
### 示例
- 基本用法
```html
<cube-radio v-model="selected" :options="options" />
<cube-radio-group v-model="selected" :options="options" />
```
```js
export default {
......@@ -25,7 +25,7 @@
- 设置 value，禁用状态，图标位置
```html
<cube-radio v-model="selected2" :options="options2" position="right" />
<cube-radio-group v-model="selected2" :options="options2" position="right" />
```
```js
export default {
......@@ -59,7 +59,7 @@
- 水平排列
```html
<cube-radio v-model="selected3" :options="options3" :horizontal="true" />
<cube-radio-group v-model="selected3" :options="options3" :horizontal="true" />
```
```js
export default {
......@@ -88,6 +88,48 @@
可通过设置 `horizontal` 为 `true` 改变样式为水平排列。
- 自定义 label
```html
<cube-radio-group>
<cube-radio
v-for="(option, index) in options4"
:key="index"
:option="option"
v-model="selected4">
<img :src="option.src" />
</cube-radio>
</cube-radio-group>
```
```js
export default {
data() {
return {
selected4: '1',
options4: [
{
label: '1',
value: '1',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
},
{
label: '2',
value: '2',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
},
{
label: '3',
value: '3',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg',
disabled: true
}
]
}
}
}
```
### Props 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......@@ -105,3 +147,18 @@
| disabled | 单选框是否被禁用 | Boolean |
注：如果 `options` 中的项为字符串也是可以的，此时默认 `label` 和 `value` 的值都为该字符串的值。
### cube-radio Props 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
| option | 选项配置 | Object/String | - | - |
| position | 图标位置 | String | left/right | left |
* `option` 子配置项
| 参数 | 说明 | 类型 |
| - | - | - |
| label | 单选框显示文字 | String |
| value | 单选框的值 | String/Number |
| disabled | 单选框是否被禁用 | Boolean |
example/pages/checkbox-group.vue
浏览文件 @ 3f8a8070
<template>
<cube-page type="checkbox-group-view" title="CheckboxGroup">
<template slot="content">
<cube-checkbox-group v-model="checkList">
<cube-checkbox label="1">Checkbox 1</cube-checkbox>
<cube-checkbox label="2">Checkbox 2</cube-checkbox>
<cube-checkbox label="3" :disabled="true">Disabled Checkbox</cube-checkbox>
<cube-checkbox label="4" :disabled="true">Disabled & Checked Checkbox</cube-checkbox>
</cube-checkbox-group>
<cube-checkbox-group v-model="checkList" :options="options" />
<p>checkList value : {{checkList}}</p>
<br>
<cube-checkbox-group v-model="checkList" :options="options">
</cube-checkbox-group>
<cube-checkbox-group v-model="checkList" :options="options" :horizontal="true" />
<br>
<cube-checkbox-group v-model="checkList" :horizontal="true">
<cube-checkbox label="1">1</cube-checkbox>
<cube-checkbox label="2">2</cube-checkbox>
<cube-checkbox label="3" :disabled="true">3</cube-checkbox>
<cube-checkbox label="4" :disabled="true">4</cube-checkbox>
<cube-checkbox-group v-model="checkList">
<cube-checkbox option="1"><i>Checkbox 1</i></cube-checkbox>
<cube-checkbox option="2"><i>Checkbox 2</i></cube-checkbox>
<cube-checkbox :option="{value: '3', disabled: true}"><i>Disabled Checkbox</i></cube-checkbox>
<cube-checkbox :option="{value: '4', disabled: true}"><i>Disabled & Checked Checkbox</i></cube-checkbox>
</cube-checkbox-group>
</template>
</cube-page>
......@@ -30,21 +24,15 @@
return {
checkList: ['1', '4'],
options: [
'1',
'2',
{
label: 'Option1',
value: '1'
},
{
label: 'Option2',
value: '2'
},
{
label: 'Option3',
label: '3',
value: '3',
disabled: true
},
{
label: 'Option4',
label: '4',
value: '4',
disabled: true
}
......
example/pages/checkbox.vue
浏览文件 @ 3f8a8070
......@@ -3,10 +3,13 @@
<template slot="content">
<cube-checkbox v-model="checked">Checkbox</cube-checkbox>
<p>checked value: {{checked}}</p>
<cube-checkbox v-model="checked" :disabled="true">Disabled Checkbox</cube-checkbox>
<cube-checkbox v-model="checked" position="right">Position Checkbox</cube-checkbox>
<cube-checkbox v-model="checked2" label="labelValue">Set label Checkbox</cube-checkbox>
<p>checked value (with label) : {{checked2}}</p>
<br><br>
<cube-checkbox v-model="checked2" :option="optionValue"></cube-checkbox>
<p>checked value (with option) : {{checked2}}</p>
<cube-checkbox v-model="checked2" :option="{disabled: true}">
Disabled Checkbox
</cube-checkbox>
</template>
</cube-page>
</template>
......@@ -18,7 +21,12 @@
data() {
return {
checked: true,
checked2: false
checked2: 'optionValue',
optionValue: {
label: 'Option Checkbox',
value: 'optionValue',
disabled: false
}
}
},
components: {
......
example/pages/radio.vue
浏览文件 @ 3f8a8070
<template>
<cube-page type="radio-view" title="Radio">
<template slot="content">
<cube-radio v-model="selected" :options="options" />
<cube-radio-group v-model="selected" :options="options" />
<p>selected value: {{selected}}</p>
<cube-radio v-model="selected2" :options="options2" position="right" />
<cube-radio-group v-model="selected2" :options="options2" position="right" />
<p>selected value: {{selected2}}</p>
<cube-radio v-model="selected3" :options="options3" :horizontal="true" />
<cube-radio-group v-model="selected3" :options="options3" :horizontal="true" />
<p>selected value: {{selected3}}</p>
<cube-radio-group>
<cube-radio
v-for="(option, index) in options4"
:key="index"
:option="option"
v-model="selected4">
<img :src="option.src" />
</cube-radio>
</cube-radio-group>
<p>selected img: {{selected4}}</p>
</template>
</cube-page>
</template>
......@@ -50,6 +60,25 @@
value: '3',
disabled: true
}
],
selected4: '1',
options4: [
{
label: '1',
value: '1',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
},
{
label: '2',
value: '2',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
},
{
label: '3',
value: '3',
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg',
disabled: true
}
]
}
},
......@@ -65,4 +94,6 @@
>
*
margin: 10px 0
img
width: 100px
</style>
src/components/checkbox-group/checkbox-group.vue
浏览文件 @ 3f8a8070
......@@ -4,8 +4,7 @@
<cube-checkbox
v-for="(option, index) in options"
:key="index"
:label="option.value || option"
:disabled="option.disabled">{{option.label || option}}</cube-checkbox>
:option="option" />
</slot>
</div>
</template>
......
src/components/checkbox/checkbox.vue
浏览文件 @ 3f8a8070
<template>
<div class="cube-checkbox" :class="_containerClass" :data-pos="position">
<label class="cube-checkbox-wrap" :class="_wrapClass">
<input class="cube-checkbox-input" type="checkbox" :disabled="disabled" v-model="checkValue">
<input class="cube-checkbox-input" type="checkbox" :disabled="computedOption.disabled" v-model="checkValue">
<span class="cube-checkbox-ui cubeic-round-border">
<i class="cubeic-right"></i>
</span>
<span class="cube-checkbox-label">
<slot>{{label}}</slot>
<slot>{{computedOption.label}}</slot>
</span>
</label>
</div>
......@@ -31,6 +31,14 @@
type: Boolean,
default: false
},
option: {
type: [Boolean, String, Object],
default () {
return {
_def_option: true
}
}
},
position: {
type: String,
default: 'left'
......@@ -46,20 +54,40 @@
}
},
computed: {
computedOption() {
let option = this.option
const label = this.label
const disabled = this.disabled
if (option._def_option === true) {
option = {
label,
value: label,
disabled
}
} else if (typeof option === 'string') {
option = {
label: option,
value: option,
disabled: false
}
}
return option
},
checkValue: {
get () {
if (this.isInGroup) {
return this.$parent.value.indexOf(this.label) > -1
return this.$parent.value.indexOf(this.computedOption.value) > -1
} else {
return Boolean(this.value)
}
},
set (newValue) {
const emitValue = this.label && newValue ? this.label : newValue
const value = this.computedOption.value
const emitValue = value && newValue ? value : newValue
const parentEmitEvent = newValue ? EVENT_CHECKED : EVENT_CANCLE_CHECKED
this.$emit(EVENT_INPUT, emitValue)
if (this.isInGroup) {
this.$parent.$emit(parentEmitEvent, this.label || newValue, this)
this.$parent.$emit(parentEmitEvent, value || newValue, this)
}
}
},
......@@ -72,7 +100,7 @@
const isInHorizontalGroup = this.isInHorizontalGroup
return {
'cube-checkbox_checked': this.checkValue,
'cube-checkbox_disabled': this.disabled,
'cube-checkbox_disabled': this.computedOption.disabled,
'border-bottom-1px': this.isInGroup && !isInHorizontalGroup
}
}
......
src/components/radio/radio-group.vue 0 → 100644
浏览文件 @ 3f8a8070
<template>
<div class="cube-radio-group" :class="_groupClass" :data-horz="horizontal">
<slot>
<cube-radio
v-for="(option, index) in options"
:key="index"
:option="option"
:position="position"
v-model="radioValue">
</cube-radio>
</slot>
</div>
</template>
<script type="text/ecmascript-6">
const COMPONENT_NAME = 'cube-radio-group'
const EVENT_INPUT = 'input'
export default {
name: COMPONENT_NAME,
props: {
value: String,
options: {
type: Array,
default() {
return []
}
},
position: {
type: String,
default: 'left'
},
horizontal: {
type: Boolean,
default: false
}
},
data() {
return {
radioValue: this.value
}
},
watch: {
value(newV) {
this.radioValue = newV
},
radioValue(newV) {
this.$emit(EVENT_INPUT, newV)
}
},
computed: {
_groupClass() {
if (!this.horizontal) {
return 'border-top-1px border-bottom-1px'
}
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@require "../../common/stylus/variable.styl"
@require "../../common/stylus/mixin.styl"
.cube-radio-group[data-horz="true"]
display: flex
padding-left: 0
border-1px($radio-group-horizontal-bdc, 2px)
border-radius: 2px
.cube-radio
flex-fix()
text-align: center
padding-left: 10px
padding-right: 10px
&:after
border-color: $radio-group-horizontal-bdc
&:last-child
border-none()
&:last-child
border-none()
&[data-pos="right"]
.cube-radio-ui
position: relative
margin-left: .42em
order: 1
.cube-radio-label
margin-right: 0
.cube-radio-wrap
justify-content: center
</style>
src/components/radio/radio.vue
浏览文件 @ 3f8a8070
<template>
<div class="cube-radio-group" :class="_groupClass" :data-horz="horizontal">
<div class="cube-radio" v-for="option in options" :class="_containerClass" :data-pos="position">
<label class="cube-radio-wrap" :class="_wrapClass(option)">
<input class="cube-radio-input" type="radio" :disabled="option.disabled" v-model="radioValue" :value="option.value || option">
<span class="cube-radio-ui cubeic-round-border">
<i></i>
</span>
<div class="cube-radio" :class="_containerClass" :data-pos="position">
<label class="cube-radio-wrap" :class="_wrapClass(option)">
<input class="cube-radio-input" type="radio" :disabled="option.disabled" v-model="radioValue" :value="option.value || option">
<span class="cube-radio-ui cubeic-round-border">
<i></i>
</span>
<slot>
<span class="cube-radio-label">{{option.label || option}}</span>
</label>
</div>
</slot>
</label>
</div>
</template>
<script type="text/ecmascript-6">
const COMPONENT_NAME = 'cube-radio'
const EVENT_INPUT = 'input'
<script type="text/ecmascript-6">
const COMPONENT_NAME = 'cube-radio'
const EVENT_INPUT = 'input'
export default {
name: COMPONENT_NAME,
props: {
value: String,
options: {
type: Array,
required: true
},
position: {
type: String,
default: 'left'
},
horizontal: {
type: Boolean,
default: false
}
},
data() {
return {
radioValue: this.value
}
export default {
name: COMPONENT_NAME,
props: {
value: String,
option: {
type: [String, Object],
required: true
},
computed: {
_containerClass() {
if (this.horizontal) {
return 'border-right-1px'
}
},
_groupClass() {
if (!this.horizontal) {
return 'border-top-1px border-bottom-1px'
}
}
position: {
type: String,
default: 'left'
}
},
data() {
return {
radioValue: this.value
}
},
watch: {
value(newV) {
this.radioValue = newV
},
watch: {
value(newV) {
this.radioValue = newV
},
radioValue(newV) {
this.$emit(EVENT_INPUT, newV)
radioValue(newV) {
this.$emit(EVENT_INPUT, newV)
}
},
computed: {
_containerClass() {
if (this.$parent.horizontal) {
return 'border-right-1px'
}
},
methods: {
_wrapClass(option) {
return {
'cube-radio_selected': this.radioValue === (option.value || option),
'cube-radio_disabled': option.disabled,
'border-bottom-1px': !this.horizontal
}
}
},
methods: {
_wrapClass(option) {
return {
'cube-radio_selected': this.radioValue === (option.value || option),
'cube-radio_disabled': option.disabled,
'border-bottom-1px': !this.$parent.horizontal
}
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@require "../../common/stylus/variable.styl"
@require "../../common/stylus/mixin.styl"
$ui-width = 1.42em
.cube-radio-group[data-horz="true"]
display: flex
padding-left: 0
border-1px($checkbox-group-horizontal-bdc, 2px)
border-radius: 2px
.cube-radio
flex-fix()
text-align: center
padding-left: 10px
padding-right: 10px
&:after
border-color: $checkbox-group-horizontal-bdc
&:last-child
border-none()
&:last-child
border-none()
&[data-pos="right"]
.cube-radio-ui
position: relative
margin-left: .42em
order: 1
.cube-radio-label
margin-right: 0
.cube-radio-wrap
justify-content: center
.cube-radio
position: relative
padding: 0 16px
......@@ -187,3 +152,4 @@
&::before
color: transparent
</style>
src/index.js
浏览文件 @ 3f8a8070
......@@ -10,7 +10,7 @@ import {
Toast,
ActionSheet,
CheckboxGroup,
Radio,
RadioGroup,
Slide,
IndexList,
Upload,
......@@ -32,7 +32,7 @@ function install(Vue) {
Tip,
Toast,
CheckboxGroup,
Radio,
RadioGroup,
Slide,
IndexList,
ActionSheet,
......
src/module.js
浏览文件 @ 3f8a8070
......@@ -2,7 +2,7 @@ import Style from './modules/style'
import Button from './modules/button'
import CheckboxGroup from './modules/checkbox-group'
import Radio from './modules/radio'
import RadioGroup from './modules/radio'
import Popup from './modules/popup'
import Dialog from './modules/dialog'
import Toast from './modules/toast'
......@@ -24,6 +24,7 @@ const Picker = TimePicker.Picker
const Checkbox = CheckboxGroup.Checkbox
const Loading = Toast.Loading
const SlideItem = Slide.Item
const Radio = RadioGroup.Radio
export {
Style,
......@@ -38,8 +39,9 @@ export {
Toast,
ActionSheet,
Checkbox,
Radio,
CheckboxGroup,
Radio,
RadioGroup,
Slide,
SlideItem,
Loading,
......
src/modules/radio/index.js
浏览文件 @ 3f8a8070
import RadioGroup from '../../components/radio/radio-group.vue'
import Radio from '../../components/radio/radio.vue'
Radio.install = function (Vue) {
RadioGroup.install = function (Vue) {
Vue.component(RadioGroup.name, RadioGroup)
Vue.component(Radio.name, Radio)
}
export default Radio
RadioGroup.Radio = Radio
export default RadioGroup
test/unit/specs/radio.spec.js
浏览文件 @ 3f8a8070
import Vue from 'vue2'
import Radio from '@/modules/radio'
import RadioGroup from '@/modules/radio'
import createVue from '../utils/create-vue'
describe('Radio.vue', () => {
describe('RadioGroup.vue', () => {
let vm
afterEach(() => {
if (vm) {
......@@ -11,12 +11,12 @@ describe('Radio.vue', () => {
}
})
it('use', () => {
Vue.use(Radio)
expect(Vue.component(Radio.name))
Vue.use(RadioGroup)
expect(Vue.component(RadioGroup.name))
.to.be.a('function')
})
it('should render correct contents', () => {
vm = createRadio()
vm = createRadioGroup()
const el = vm.$el
expect(el.className)
.to.equal('cube-radio-group my-radio border-top-1px border-bottom-1px')
......@@ -47,7 +47,7 @@ describe('Radio.vue', () => {
.to.equal('Option3')
})
it('should render correct contents - horizontal', () => {
vm = createRadio(true)
vm = createRadioGroup(true)
const el = vm.$el
expect(el.className)
.to.equal('cube-radio-group my-radio')
......@@ -65,7 +65,7 @@ describe('Radio.vue', () => {
.to.equal('cube-radio-wrap cube-radio_selected cube-radio_disabled')
})
it('should toggle v-model value', (done) => {
vm = createRadio()
vm = createRadioGroup()
expect(vm.$parent.selected)
.to.equal('3')
vm.$el.querySelector('.cube-radio-input').click()
......@@ -77,10 +77,10 @@ describe('Radio.vue', () => {
})
})
function createRadio (horizontal = false) {
function createRadioGroup (horizontal = false) {
const vm = createVue({
template: `
<cube-radio v-model="selected" :options="options" class="my-radio" position="right" :horizontal="${horizontal}"></cube-radio>
<cube-radio-group v-model="selected" :options="options" class="my-radio" position="right" :horizontal="${horizontal}"></cube-radio-group>
`,
data: {
selected: '3',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或