vue 小知識總結 ------ 自定義公共彈窗
1 新建彈窗元件檔案 selfToast.vue
主體內容: <!-- template --> <template> <transition name="main-bg-fade"> <div class="toastMain" v-show="showToast"> <transition name="content-slide-fade"> <div class="contentMain" v-show="showToast"> <x-icon type="ios-close-empty" size="30" v-on:click="closeModel()" class="closeModel"></x-icon> <div class="title">{{toastModelOptions.title || "自定義提示"}}</div> <div class="message textCenter"> {{toastModelOptions.message || " "}} </div> <div class="btns"> <div class="buttonSubmit" @click="toastSubmit()"> {{toastModelOptions.btnSubmitText || "確定"}} </div> <div class="buttonSubmit" @click="toastCancel()"> {{toastModelOptions.btnCancelText || "取消"}} </div> </div> </div> </transition> </div> </transition> </template>
selfToast.vue script部分 <!-- script --> export default { props: ["toastModelOptions"], data() { return { showToast: false, // 是否顯示模態框 } }, methods: { closeModel: function () { this.showToast = false; }, showModel: function () { this.showToast = true; }, confirmSubmit: function () { this.showToast = false; if(typeof (this.toastModelOptions.btnSubmitFunction)==='function'){ this.toastModelOptions.btnSubmitFunction() } }, confirmCancel: function () { this.showToast = false; if(typeof (this.toastModelOptions.btnCancelFunction)==='function'){ this.toastModelOptions.btnCancelFunction() } }, } }
selfToast.vue css部分
<style scoped> .toastMain { border: 1px solid red; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2; } .contentMain { margin: 0 auto; text-align: center; margin-top: 65%; position: relative; width: 80%; background: #fff; } .closeModel { position: absolute; right: 0.3rem; fill: #fff; } .title { height: 0.8rem; line-height: 0.8rem; font-size: 0.36rem; background: #7da2da; color: #fff; } .textCenter { height: 1.6rem; line-height: 0.8rem; color: #595959; font-size: 0.38rem; } .btns { padding-bottom: 0.3rem; } .buttonSubmit,.buttonSubmit { height: 0.7rem; width: 1.5rem; background: #7da2da; border-radius: 8%; color: #fff; }
</style>
元件引入:
要使用元件的檔案引入公用彈窗元件 <!-- template --> <self-toast v-bind:toastModelOptions="toastOptions" ref="templateToastOptions"></self-toast> <!-- script --> import selfToast from './selfToast'; export default{ components: { selfToast }, <!-- methods --> toastOptions:{ title: "撥打電話",//提示 message: "13567875656",//"" btnCancelText: "取消",//取消 btnSubmitText: "呼叫",//確定 btnSubmitFunction: function () { alert("自定義確定電話呼叫") }, }
}