vue移动端下拉框插件的使用教程

最新推荐文章于 2025-03-19 17:58:06 发布

梁萌

最新推荐文章于 2025-03-19 17:58:06 发布

阅读量9k

点赞数

分类专栏： vue 文章标签： vue下拉框移动端下拉框下拉框插件选择插件

本文链接：https://blog.youkuaiyun.com/liangmengbk/article/details/93968669

版权

vue 专栏收录该内容

46 篇文章

订阅专栏

使用场景:选择乘客证件类型

点击证件类型时弹出下拉框进行选择操作.

功能实现:

第一步:将外部js和css文件放在项目文件夹中

文件下载地址: https://download.youkuaiyun.com/download/liangmengbk/11262453

第二步:在route文件夹中的index.js中引用文件:

import picker from "../../static/js/custom-picker"

第三步:在App.vue中引用css文件

@import "../static/css/custom-picker.css";

第四步:页面中调用js方法:

HTML:

<input id="picker-input" class="showText" type="text" placeholder="请选择证件类型" v-model="PassData.CardType" v-on:click="GetCardTypeSelect()" readonly>

vue实例:在methods中创建一个function

GetCardTypeSelect() {
      var _this = this;
      var dataShippingSpace = [
        "身份证",
        "护照",
        "港澳通行证",
        "台胞证",
        "海员证",
        "旅行证"
      ];
      var pickerDiv = document.getElementById("picker-input");
      var vCardType = ""; //选择的证件类型
      var pickerView = new PickerView({
        bindElem: pickerDiv, // 绑定的元素
        data: dataShippingSpace, // 说明：该参数必须符合json格式 且最里层是个数组，如上面的data变量所展示的[3,4]。
        title: "证件类型", // 顶部标题文本 默认为“标题”
        leftText: "取消", // 头部左侧按钮文本 默认为‘取消’
        rightText: "确定", // 头部右侧按钮文本 默认为“确定”
        rightFn: function(selectArr) {
          // 点击头部右侧按钮的回调函数，参数为一个数组，数组对应滚轮中每项对应的值
          if (selectArr[0] == "身份证") {
            vCardType = "1";
          } else if (selectArr[0] == "护照") {
            vCardType = "2";
          } else if (selectArr[0] == "港澳通行证") {
            vCardType = "3";
          } else if (selectArr[0] == "台胞证") {
            vCardType = "4";
          } else if (selectArr[0] == "海员证") {
            vCardType = "5";
          } else if (selectArr[0] == "旅行证") {
            vCardType = "6";
          }
        }
      });
    }

代码部分到此为止,代码需要根据业务场景稍作更改.