style(Picker): update action button color (#6214)

* style(Picker): update action button color

* test: update snapshot
This commit is contained in:
neverland
2020-05-05 09:34:28 +08:00
committed by GitHub
parent 7effb7cf6c
commit 5b0dff9dae
14 changed files with 157 additions and 212 deletions
+23 -38
View File
@@ -17,48 +17,22 @@ Vue.use(Picker);
### 基础用法
Picker 组件通过`columns`属性配置选项数据,`columns`是一个包含字符串或对象的数组
#### 选项配置
```html
<van-picker :columns="columns" @change="onChange" />
```
Picker 组件通过`columns`属性配置选项数据,`columns`是一个包含字符串或对象的数组。
```js
import { Toast } from 'vant';
#### 顶部栏
export default {
data() {
return {
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
};
},
methods: {
onChange(picker, value, index) {
Toast(`当前值:${value}, 当前索引:${index}`);
},
},
};
```
### 默认选中项
单列选择时,可以通过`default-index`属性设置初始选中项的索引
```html
<van-picker :columns="columns" :default-index="2" />
```
### 展示顶部栏
设置`show-toolbar`属性后会展示顶部操作栏,点击确认按钮触发`confirm`事件,点击取消按钮触发`cancel`事件
设置`show-toolbar`属性后会展示顶部操作栏,顶部栏包含标题、确认按钮和取消按钮,点击确认按钮触发`confirm`事件,点击取消按钮触发`cancel`事件
```html
<van-picker
show-toolbar
title="标题"
show-toolbar
:columns="columns"
@cancel="onCancel"
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
/>
```
@@ -75,6 +49,9 @@ export default {
onConfirm(value, index) {
Toast(`当前值:${value}, 当前索引:${index}`);
},
onChange(picker, value, index) {
Toast(`当前值:${value}, 当前索引:${index}`);
},
onCancel() {
Toast('取消');
},
@@ -82,9 +59,17 @@ export default {
};
```
### 默认选中项
单列选择时,可以通过`default-index`属性设置初始选中项的索引
```html
<van-picker show-toolbar title="标题" :columns="columns" :default-index="2" />
```
### 多列选择
通过`columns`属性可以配置多列选择
`columns`属性可以通过对象数组的形式配置多列选择,对象中可以配置选项数据、初始选中项等,详细格式见[下方表格](#/zh-CN/picker#column-shu-ju-jie-gou)。
```html
<van-picker show-toolbar title="标题" :columns="columns" />
@@ -163,7 +148,7 @@ export default {
选项可以为对象结构,通过设置 disabled 来禁用该选项
```html
<van-picker :columns="columns" />
<van-picker show-toolbar :columns="columns" />
```
```js
@@ -185,7 +170,7 @@ export default {
通过 Picker 上的实例方法可以更灵活地控制选择器,比如使用`setColumnValues`方法实现多列联动
```html
<van-picker :columns="columns" @change="onChange" />
<van-picker show-toolbar :columns="columns" @change="onChange" />
```
```js
@@ -213,7 +198,7 @@ export default {
若选择器数据是异步获取的,可以通过 `loading` 属性显示加载提示
```html
<van-picker :columns="columns" :loading="loading" />
<van-picker show-toolbar :columns="columns" :loading="loading" />
```
```js
@@ -246,7 +231,7 @@ export default {
placeholder="选择城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-popup v-model="showPicker" round position="bottom">
<van-picker
show-toolbar
:columns="columns"