先在main.js全局 引入UI库
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
<template>
   这个是引入的插件
         <van-popup v-model="show" position="bottom">
               <van-picker
               :columns="columns"
               show-toolbar
               title="标题"
               @cancel="onCancel"
              @confirm="onConfirm"/>
       </van-popup>
      <li @click="showMt">
            <P>{{ jyTitle }}</P>//{{ jyTitle }}是插入到p标签
           <img src="/static/images/lifebot_06.gif" alt>
      </li>
</template>
<script>
import { Picker, Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      columns: ["BSPC/QA", "BSPC/QB", "BSPC/QC", "BSPC/QD", "BSPC/QE"],
      jyTitle:'',
    };
  },
  created(){
      this.jyTitle=this.columns[0]
  },
  methods: {
    showMt() {
      this.show = !this.show;
    },
    goreferral() {
      this.$router.push("/referral");
    },
    onCancel(){
        this.show=false;
        
    },
    onConfirm(picker, value, index){
        this.show=false;
        this.jyTitle = picker;
    }
  }
};

Logo

前往低代码交流专区

更多推荐