alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] rename packages dir to src (#3659)

Browse Source
This commit is contained in:
neverland
2019-06-27 11:25:57 +08:00
committed by GitHub
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/radio/demo/index.vue
+144
View File
@@ -0,0 +1,144 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-radio-group
v-model="radio1"
class="demo-radio-group"
>
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="$t('disabled')">
<van-radio-group
v-model="radio2"
class="demo-radio-group"
disabled
>
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="$t('customColor')">
<van-radio-group
v-model="radio3"
class="demo-radio-group"
>
<van-radio
name="1"
checked-color="#07c160"
>
{{ $t('radio') }} 1
</van-radio>
<van-radio
name="2"
checked-color="#07c160"
>
{{ $t('radio') }} 2
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="$t('customIcon')">
<van-radio-group
v-model="radio4"
class="demo-radio-group"
>
<van-radio name="1">
{{ $t('radio') }} 1
<template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive">
</template>
</van-radio>
<van-radio name="2">
{{ $t('radio') }} 2
<template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive">
</template>
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="$t('withCell')">
<van-radio-group v-model="radio5">
<van-cell-group>
<van-cell
clickable
:title="$t('radio') + 1"
@click="radio5 = '1'"
>
<van-radio
name="1"
slot="right-icon"
/>
</van-cell>
<van-cell
clickable
:title="$t('radio') + 2"
@click="radio5 = '2'"
>
<van-radio
name="2"
slot="right-icon"
/>
</van-cell>
</van-cell-group>
</van-radio-group>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
radio: '单选框',
text1: '未选中禁用',
text2: '选中且禁用',
customIcon: '自定义图标',
customColor: '自定义颜色',
withCell: '与 Cell 组件一起使用'
},
'en-US': {
radio: 'Radio',
text1: 'Disabled',
text2: 'Disabled and checked',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
withCell: 'Inside a Cell'
}
},
data() {
return {
radio1: '1',
radio2: '2',
radio3: '1',
radio4: '1',
radio5: '1',
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
};
}
};
</script>
<style lang="less">
.demo-radio {
&-group {
padding: 0 17px;
.van-radio:not(:last-child) {
margin-bottom: 10px;
}
}
img {
height: 20px;
}
}
</style>
src/radio/en-US.md
+143
View File
@@ -0,0 +1,143 @@
# Radio
### Install
``` javascript
import { RadioGroup, Radio } from 'vant';
Vue.use(RadioGroup);
Vue.use(Radio);
```
## Usage
### Basic Usage
Use `v-model` to bind the name of checked radio
```html
<van-radio-group v-model="radio">
<van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio>
</van-radio-group>
```
```javascript
export default {
data() {
return {
radio: '1'
}
}
};
```
### Disabled
```html
<van-radio-group v-model="radio" disabled>
<van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio>
</van-radio-group>
```
### Custom Color
```html
<van-radio-group v-model="radio">
<van-radio name="1" checked-color="#07c160">Radio 1</van-radio>
<van-radio name="2" checked-color="#07c160">Radio 2</van-radio>
</van-radio-group>
```
### Custom Icon
Use icon slot to custom icon
```html
<van-radio-group v-model="radio">
<van-radio name="1">
Radio 1
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
</van-radio>
<van-radio name="2">
Radio 2
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
</van-radio>
</van-radio-group>
```
```js
export default {
data() {
radio: '1',
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
}
```
### Inside a Cell
```html
<van-radio-group v-model="radio">
<van-cell-group>
<van-cell title="Radio 1" clickable @click="radio = '1'">
<van-radio slot="right-icon" name="1" />
</van-cell>
<van-cell title="Radio 2" clickable @click="radio = '2'">
<van-radio slot="right-icon" name="2" />
</van-cell>
</van-cell-group>
</van-radio-group>
```
## API
### Radio Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| name | Radio name | `any` | - |
| shape | Can be set to `square` | `String` | `round` |
| disabled | Whether to disable radio | `Boolean` | `false` |
| icon-size | Icon size | `String | Number` | `20px` |
| label-disabled | Whether to disable label click | `Boolean` | `false` |
| label-position | Can be set to `left` | `String` | `right` |
| checked-color | Checked color | `String` | `#1989fa` | - |
### RadioGroup Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model | Name of checked radio | `any` | - |
| disabled | Diable all radios | `Boolean` | `false` |
### Radio Events
| Event | Description | Parameters |
|------|------|------|
| click | Triggered when click radio | event: Event |
### RadioGroup Events
| Event | Description | Parameters |
|------|------|------|
| change | Triggered when value changed | current value |
### Radio Slots
| Name | Description | slot-scope |
|------|------|------|
| default | Custom label | - |
| icon | Custom icon | checked: whether to be checked |
src/radio/index.js
+42
View File
@@ -0,0 +1,42 @@
import { createNamespace } from '../utils';
import { CheckboxMixin } from '../mixins/checkbox';
const [createComponent, bem] = createNamespace('radio');
export default createComponent({
mixins: [CheckboxMixin({
bem,
role: 'radio',
parent: 'vanRadio'
})],
computed: {
currentValue: {
get() {
return this.parent ? this.parent.value : this.value;
},
set(val) {
(this.parent || this).$emit('input', val);
}
},
checked() {
return this.currentValue === this.name;
}
},
methods: {
onClickIcon() {
if (!this.isDisabled) {
this.currentValue = this.name;
}
},
onClickLabel() {
if (!this.isDisabled && !this.labelDisabled) {
this.currentValue = this.name;
}
}
}
});
src/radio/index.less
+69
View File
@@ -0,0 +1,69 @@
@import '../style/var';
.van-radio {
display: flex;
align-items: center;
overflow: hidden;
user-select: none;
&__icon {
flex: none;
height: 1em;
font-size: @radio-size;
line-height: 1em;
.van-icon {
display: block;
box-sizing: border-box;
width: 1.25em;
height: 1.25em;
color: transparent;
font-size: .8em;
line-height: inherit;
text-align: center;
border: 1px solid @radio-border-color;
transition: @radio-transition-duration;
}
&--round {
.van-icon {
border-radius: 100%;
}
}
&--checked {
.van-icon {
color: @white;
background-color: @radio-checked-icon-color;
border-color: @radio-checked-icon-color;
}
}
&--disabled {
.van-icon {
background-color: @radio-disabled-background-color;
border-color: @radio-disabled-icon-color;
}
}
&--disabled&--checked {
.van-icon {
color: @radio-disabled-icon-color;
}
}
}
&__label {
margin-left: @radio-label-margin;
color: @radio-label-color;
line-height: @radio-size;
&--left {
margin: 0 @radio-label-margin 0 0;
}
&--disabled {
color: @radio-disabled-label-color;
}
}
}
src/radio/test/__snapshots__/demo.spec.js.snap
+80
View File
@@ -0,0 +1,80 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 1</span>
</div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 2</span>
</div>
</div>
</div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
</div>
<div role="radio" tabindex="-1" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
</div>
</div>
</div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<!----></i></div><span class="van-radio__label">
单选框 1
</span>
</div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">
单选框 2
</span>
</div>
</div>
</div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-radio__label">
单选框 1
</span>
</div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><img src="https://img.yzcdn.cn/vant/user-inactive.png"></div><span class="van-radio__label">
单选框 2
</span>
</div>
</div>
</div>
<div>
<div role="radiogroup" class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单选框1</span></div>
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单选框2</span></div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
src/radio/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);
src/radio/test/index.spec.js
+45
View File
@@ -0,0 +1,45 @@
import Radio from '..';
import RadioGroup from '../../radio-group';
import { mount } from '../../../test/utils';
test('radio-group change', () => {
const wrapper = mount({
template: `
<radio-group v-model="result" @change="$emit('change', $event)">
<radio
v-for="item in list"
:key="item"
:name="item"
:disabled="item === 'd'"
>
label
</radio>
</radio-group>
`,
components: {
Radio,
RadioGroup
},
data() {
return {
result: 'a',
list: ['a', 'b', 'c', 'd']
};
}
});
const icons = wrapper.findAll('.van-radio__icon');
const labels = wrapper.findAll('.van-radio__label');
icons.at(2).trigger('click');
expect(wrapper.vm.result).toEqual('c');
expect(wrapper.emitted('change')[0][0]).toEqual('c');
labels.at(1).trigger('click');
expect(wrapper.vm.result).toEqual('b');
expect(wrapper.emitted('change')[1][0]).toEqual('b');
icons.at(3).trigger('click');
labels.at(3).trigger('click');
expect(wrapper.vm.result).toEqual('b');
});
src/radio/zh-CN.md
+149
View File
@@ -0,0 +1,149 @@
# Radio 单选框
### 引入
``` javascript
import { RadioGroup, Radio } from 'vant';
Vue.use(RadioGroup);
Vue.use(Radio);
```
## 代码演示
### 基础用法
通过`v-model`绑定值当前选中项的 name
```html
<van-radio-group v-model="radio">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
```
```javascript
export default {
data() {
return {
radio: '1'
}
}
};
```
### 禁用状态
通过`disabled`属性禁止选项切换，在`van-radio`上设置`disabled`可以禁用单个选项
```html
<van-radio-group v-model="radio" disabled>
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
```
### 自定义颜色
通过`checked-color`属性设置选中状态的图标颜色
```html
<van-radio-group v-model="radio">
<van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
<van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
</van-radio-group>
```
### 自定义图标
通过`icon`插槽自定义图标，并通过`slot-scope`判断是否为选中状态
```html
<van-radio-group v-model="radio">
<van-radio name="1">
单选框 1
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
</van-radio>
<van-radio name="2">
单选框 2
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
</van-radio>
</van-radio-group>
```
```js
export default {
data() {
radio: '1'
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
}
```
### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。
```html
<van-radio-group v-model="radio">
<van-cell-group>
<van-cell title="单选框 1" clickable @click="radio = '1'">
<van-radio slot="right-icon" name="1" />
</van-cell>
<van-cell title="单选框 2" clickable @click="radio = '2'">
<van-radio slot="right-icon" name="2" />
</van-cell>
</van-cell-group>
</van-radio-group>
```
## API
### Radio Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 标识符 | 任意类型 | - | - |
| shape | 形状，可选值为 `square` | `String` | `round` | 1.6.0 |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
| icon-size | 图标大小，默认单位为`px` | `String | Number` | `20px` | 2.0.0 |
| label-disabled | 是否禁用文本内容点击 | `Boolean` | `false` | 1.1.13 |
| label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.13 |
| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.5 |
### RadioGroup Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| v-model | 当前选中项的标识符 | 任意类型 | - | - |
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
### Radio Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| click | 点击单选框时触发 | event: Event |
### RadioGroup Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 当绑定值变化时触发的事件 | 当前选中项的 name |
### Radio Slots
| 名称 | 说明 | slot-scope |
|------|------|------|
| default | 自定义文本 | - |
| icon | 自定义图标 | checked: 是否为选中状态 |