vue引用vant组件库,一个页面同时绑定多个popup弹框

1、h5 

          <div class="item mt30">
              <div class="name">配送方式</div>
              <div class="right">
                  <strong>邮寄</strong>
                  <van-icon name="ellipsis" @click="showPopup"/>
              </div>
          </div>
          
          <div class="item mt30">
              <div class="name">发票</div>
              <div class="right">
                  <strong>电子普通发票/个人</strong>
                  <van-icon name="ellipsis" @click="showPopup2"/>
              </div>
          </div>



<!--配送方式_弹框-->
<van-popup
        v-model="showPS"
        closeable
        round
        position="bottom"
        :style="{ height: '70%' }">
        <div class="invoice_wrap">
            内容1
        </div>
</van-popup>

<!--发票_弹框-->
<van-popup
        v-model="showFP"
        closeable
        round
        position="bottom"
        :style="{ height: '70%' }">
        <div class="invoice_wrap">
            内容2
         </div>
</van-popup>

2、js:

    import Vue from 'vue';
    import {Popup} from 'vant';


    Vue.use(Popup);

methods: {
     //弹框 tangyk
    showPopup() {
        this.showPS = true;
    },
    showPopup2() {
        this.showFP = true;
    },

},
data() {
    return {
    //配送和发票弹框 tangyk
    showPS: false,
    showFP: false,
    };
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值