短視訊商城系統，系統提示框、確認框、點選空白關閉彈出框

短視訊商城系統，系統提示框、確認框、點選空白關閉彈出框

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>

以上就是 短視訊商城系統，系統提示框、確認框、點選空白關閉彈出框，更多內容歡迎關注之後的文章