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

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

1.提示框的使用：

 

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

​

2.确认框：

 

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

 

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

 

1

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

 

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