style(Picker): update action button color (#6214)
* style(Picker): update action button color * test: update snapshot
This commit is contained in:
+23
-38
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user