vue vant中picker组件的使用

针对“vue vant中picker组件的使用”的完整攻略，我将分为以下几个部分进行讲解：

1. picker组件的基本使用
2. picker组件的高级使用
3. 两条示例说明

1. picker组件的基本使用

在vue vant中使用picker组件首先需要通过npm安装vant组件库：

npm install vant -S

然后在需要使用picker组件的页面中导入vant库：

import { Picker } from 'vant';

接着在页面中使用Picker标签即可渲染出picker组件：

<template>
  <div>
    <van-picker
      :columns="columns"
      v-model="value"
      :title="title"
      @change="onChange"
    />
  </div>
</template>

其中，:columns为picker的数据源，v-model为picker的值绑定，:title为picker的标题，@change为picker的值改变监听事件。

在Vue实例中定义picker的数据源columns和当前选中的值value：

data() {
    return {
      columns: ['南京', '北京', '上海'],
      value: ''
    };
  }

最后在methods中定义监听picker值改变的onChange方法：

onChange(pickerValue) {
      console.log(pickerValue);
    }

2. picker组件的高级使用

在picker组件的高级使用中，我们可以自定义picker的选项样式、列数、文本显示等。

自定义选项样式

我们可以通过v-slot来自定义picker的选项样式：

<van-picker
  :columns="columns"
>
  <template v-slot:option="item">
    <div class="my-option">{{ item.text }}</div>
  </template>
</van-picker>

<style scoped>
.my-option {
  color: red;
}
</style>

自定义列数

我们可以通过设置columns的长度来定义picker的列数：

columns: [
    ['南京', '北京', '上海'],
    ['江苏', '北京', '上海'],
    ['栖霞区', '东城区', '浦东新区'],
  ],

此时页面中将出现三列picker。

自定义文本显示

我们可以通过设置format-column-values来自定义每一列的文本：

<van-picker
  :columns="columns"
  :format-column-values="formatColumnValues"
>
</van-picker>

data() {
    return {
      columns: [
        {
          values: ['南京', '北京', '上海'],
          defaultIndex: 0
        },
        {
          values: ['江苏', '北京', '上海'],
          defaultIndex: 0
        },
        {
          values: ['栖霞区', '东城区', '浦东新区'],
          defaultIndex: 0
        }
      ]
    };
  },
  methods: {
    formatColumnValues(column) {
      return `${column.text} - 自定义文本显示`;
    }
  }

3. 两条示例说明

示例一

下面是一个简单的示例，演示了如何使用picker组件选择省份和城市：

<template>
  <div>
    <van-picker
      :columns="columns"
      v-model="value"
      :title="title"
      @change="onChange"
    />
  </div>
</template>

<script>
import { Picker } from 'vant';

export default {
  components: {
    [Picker.name]: Picker
  },
  data() {
    return {
      columns: [
        {
          text: '江苏省',
          value: 'jiangsu',
          children: [
            {
              text: '南京市',
              value: 'nanjing'
            },
            {
              text: '常州市',
              value: 'changzhou'
            }
          ]
        },
        {
          text: '山东省',
          value: 'shandong',
          children: [
            {
              text: '济南市',
              value: 'jinan'
            },
            {
              text: '青岛市',
              value: 'qingdao'
            }
          ]
        }
      ],
      value: '',
      title: '请选择城市'
    };
  },
  methods: {
    onChange(pickerValue) {
      console.log(pickerValue);
    }
  }
};
</script>

示例二

下面是一个高级示例，演示了如何通过修改select后的数据进行修改显示，而不是直接通过picker修改选项：

<template>
  <div>
    <van-picker
      :columns="columns"
      :column-count="3"
      :title="title"
      :format-column-values="formatColumnValues"
      @confirm="onConfirm"
      :show-toolbar="false"
      ref="picker"
    />
    <div>
      <button @click="openPicker">打开Picker</button>
    </div>
    <div>
      选中的城市：<span>{{city}}</span>
    </div>
  </div>
</template>

<script>
import { Picker } from 'vant';

export default {
  components: {
    [Picker.name]: Picker
  },
  data() {
    return {
      columns: [
        {
          values: ['南京', '北京', '上海'],
          defaultIndex: 0
        },
        {
          values: ['江苏', '北京', '上海'],
          defaultIndex: 0
        },
        {
          values: ['栖霞区', '东城区', '浦东新区'],
          defaultIndex: 0
        }
      ],
      title: '请选择城市',
      city: ''
    };
  },
  methods: {
    formatColumnValues(column) {
      return `${column.text} - 自定义文本显示`;
    },
    openPicker() {
      this.$refs.picker.show();
    },
    onConfirm(pickerValue) {
      const [city, province, district] = pickerValue.map(pickedItem =>
        pickedItem.text.slice(0, pickedItem.text.indexOf(' -'))
      );
      this.city = `${province}-${city}-${district}`;
    }
  }
};
</script>

这两个示例演示了picker组件的基本使用和高级用法，开发者可以根据自己的需求进行使用和修改。