短视频商城系统，系统提示框、确认框、点击空白关闭弹出框

短视频商城系统，系统提示框、确认框、点击空白关闭弹出框

1.提示框的使用：

 

<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>
……
//提示框
this.$refs.myDialog.show(content, {
        type: 'alert',
        confirmText: 'OK',
        cancelText: '取消',
        titleText: '',
        data: null
      })

​

2.确认框：

 

    this.$refs.myDialog.show('要兑换这个商品么？', {
            type: 'confirm',
            confirmText: '立即兑换',
            cancelText: '不用了',
            titleText: '',
            data: {shop: shop, operate: 'exchange'}
          })

 

3.点击空白处关闭弹出框代码：

 

<template>
    <transition name="confirm-fade">
        <div v-if="isShowConfirm" class="my-confirm-notice1" @touchmove.prevent @click.stop="clickFun('clickCancel')">
            <div class="confirm-content-wrap1" :style="{'width': osType=='ios'?'78%':'297px'}" @click.stop>
                ………………
            </div>
        </div>
    </transition>
</template>
<script type="text/ecmascript-6">
    export default {
        name: "NoticeDialog",
        data () {
            return {
                isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
                titleText: '天天收能量，福利享不停', // 提示框标题
                content: 'Say Something ...', // 提示框的内容
                outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior
            }
        },
        methods: {
            ……
            hidden () {
                this.isShowConfirm = false
                this.titleText = '操作提示'
                this.outerData = null
            },
            clickFun () {
                this.hidden()
            },
            ……
        }
    }
</script>

 

以上就是 短视频商城系统，系统提示框、确认框、点击空白关闭弹出框，更多内容欢迎关注之后的文章