vue动作栏用vant怎么实现

1. 安装vant组件库

npm i vant -S

2. 引入所需组件

import { ActionSheet } from 'vant';

3. 注册组件

Vue.use(ActionSheet);

4. 在模板中使用

<van-action-sheet
  v-model="show"
  :actions="actions"
  :cancel-text="cancelText"
  @cancel="onCancel"
  @select="onSelect"
/>

其中，v-model绑定显示/隐藏状态；actions属性为选项数组；cancel-text为取消按钮文本；@cancel和@select分别为取消和选择事件的回调函数。

完整代码示例：

<template>
  <div>
    <van-button type="primary" @click="show = true">显示动作栏</van-button>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      :cancel-text="cancelText"
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>

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

export default {
  components: {
    [ActionSheet.name]: ActionSheet,
  },

  data() {
    return {
      show: false,
      actions: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三', subname: '描述信息' },
      ],
      cancelText: '取消',
    };
  },

  methods: {
    onCancel() {
      this.show = false;
    },
    onSelect(item) {
      console.log(item);
    },
  },
};
</script>