左右滑动弹出弹框

使用vue-touch步骤

npm install vue-touch@next --save

//在vue项目中的main.js文件中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

   <v-touch v-on:swiperight="onSwipeRight">
            <!--        ++++++++++++-->
            <!-- 展示弹出层< -->
            <van-popup v-model="showNavigation" position="left"
                       :style="{ height:'100%', width:'60%'}">
                <!-- 单选框组件 -->
                <Navigation></Navigation>
            </van-popup>
            <!--        +++++++++++++++++-->
            <navheader :title="title" :isLocalIcon="isLocalIcon" :leftName="leftName" :rightName="rightName"
                       @onHeaderLeft="getHeaderLeft" @onHeaderRight="getHeaderRight"></navheader>

            <!-- 外层的tab页 -->
            <van-tabs v-model="active" @click="chooseTag" swipeable color="#14C893" title-active-color="#14C893"
                      class="home-tabs">
                <van-tab v-for="(item, index) in dataList" :key="index" :title="item.TITLE"
                         :info="infoNum(item.TOTAL_NUMS)">
                    <!-- 下拉刷新页 -->
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list style="margin-bottom: 120px;" v-model="loading" :finished="finished"
                                  finished-text="没有更多了"
                                  @load="onLoad">
                            <div v-if="item.DATA.length>0">
                                <div class="home-tab" v-for="(ite, ind) in item.DATA" :key="ind" @click="goPage(ite)">
                                <span class="status-name">
                                    <span class="status-flag">{{ currentStatus(ite.ORDER_STATUS) }}</span>
                                    <span class="bold-word">{{ ite.USR_NAME }}</span>
                                </span>
                                    <span>{{ userType(ite.USER_TYPE) }} |
                                    {{ wireType(ite.DETAIL.METERS.WIRE_TYPE) }}</span>
                                    <span>户号： {{ ite.USR_NO }}</span>
                                    <span>用电地址： {{ ite.ELEC_DESC }}</span>
                                </div>
                            </div>

                            <!-- <div v-else style="width: 100%;height: 40vw;display: flex;justify-content: center;align-items: center;border: 1px red solid;">
                                <i class="iconfont icon-meiyoushuju" style="font-size: 100px;color: #777777;border: 1px red solid;"></i>
                            </div> -->

                        </van-list>
                    </van-pull-refresh>

                </van-tab>
            </van-tabs>

            <van-popup v-model="showRightCheckBox" position="right" :close-on-click-overlay="canclose"
                       :style="{ height: '100%', width: '70%' }">
                <pick-status @chooseStatus="getChildData"></pick-status>
            </van-popup>

            <!-- 待上传工单悬浮球 -->
            <float-ball></float-ball>

            <div class="demo-btn" style="display: flex;flex-wrap: wrap;">
                <button @click="dropDBZ">删除主数据库</button>
                <button @click="dropDBZS">删除主数据库</button>
            </div>
        </v-touch>

methods中

   onSwipeRight() {
            this.showNavigation = true
            console.log('right')
        },