小編給大家分享一下怎么用VUE寫一個(gè)多用模態(tài)框組件模版,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)建站公司2013年成立,公司自成立以來始終致力于為企業(yè)提供官網(wǎng)建設(shè)、移動(dòng)互聯(lián)網(wǎng)業(yè)務(wù)開發(fā)(小程序開發(fā)、手機(jī)網(wǎng)站建設(shè)、app開發(fā)定制等),并且包含互聯(lián)網(wǎng)基礎(chǔ)服務(wù)(域名、主機(jī)服務(wù)、企業(yè)郵箱、網(wǎng)絡(luò)營銷等)應(yīng)用服務(wù);以先進(jìn)完善的建站體系及不斷開拓創(chuàng)新的精神理念,幫助企業(yè)客戶實(shí)現(xiàn)互聯(lián)網(wǎng)業(yè)務(wù),嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊譽(yù)。
Modal.vue組件
<template> <!-- 過渡動(dòng)畫 --> <transition name="modal-fade"> <!-- 關(guān)閉模態(tài)框事件 和 控制模態(tài)框是否顯示 --> <div class="modal-backdrop" @click="$emit('closeModal')" v-show="show"> <div class="modal"> <img class="img" :src="imgadress" > <div class="modal-body" id="modalDescription"> <li></li> <!-- 狀態(tài)提示文字的插槽 --> <slot name="status">{{statusText}}</slot> <li></li> </div> <!-- 模態(tài)框內(nèi)容文字 可有可無 --> <div class="modal-content" v-if="contentText"> {{contentText}} <span v-if="IDList" v-for="item in IDList" :key="item.id">{{item.payMoney}} <i>{{item.yuan}}</i> </span> </div> <ul> <!-- 模態(tài)框按鈕 可選單個(gè)確定按鈕 和 兩個(gè)確定、取消按鈕 --> <!-- 單個(gè)確定按鈕 --> <li v-if="alert" :class="buttonBackground" @click.stop="$emit('button')">確定</li> <!-- 確定和取消按鈕 --> <li v-else class="confirm"> <div>取消</div> <div :class="buttonBackground" @click.stop="$emit('confirm')">{{sure}}</div> </li> </ul> </div> </div> </transition> </template> <script> export default { name:'modal', // 通過 props 傳值 props: { imgadress:String, title:String, //標(biāo)題文字 show:{ //顯示取消 type:Boolean, default:false }, statusText:String, //狀態(tài)文字 contentText:String, //描述文字 IDList:Array, //ID 列表 payMoney:Number, yuan:String, buttonBackground:String, //按鈕背景色 alert:String, //判斷一個(gè)還是兩個(gè)按鈕 sure:String, //第二個(gè)按鈕的提示文字 }, data(){ return{ closemodal:"close", // isModalVisible:false, // 確定和取消按鈕的兩種顏色 red:'redBackground', blue:'blueBackground' } }, methods:{ // 關(guān)閉模態(tài)框事件 close(){ this.$emit('close') }, } } </script> <style lang="scss" scoped> .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.3); display: flex; justify-content: center; align-items: center; z-index: 12; .modal { background-color: #fff; box-shadow: 2px 2px 20px 1px; overflow-x:auto; display: flex; flex-direction: column; width: 11.8rem; position: relative; border-radius: 0.2rem; .img{ width: 3.6rem; height: 3.6rem; margin: 0.8rem 4.1rem; } .modal-header{ padding: 0.6rem 4.1rem; width: 3.6rem; height: 3.6rem; box-sizing: border-box; .img{ width: 100%; height: 100%; } div{ width: 100%; height: 100%; background: #000; } } .modal-body{ width: 100%; height: 0.48rem; padding: 0rem 1.6rem; margin-bottom: 0.8rem; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; li{ width: 2rem; height: 0.04rem; background: #eeeee5; } } .modal-content{ width: 100%; // height: 0.6rem; margin-bottom: 0.8rem; text-align: center; color: #34304B; span{ color: #32B8B9; i{ color: #4F4F4F; } } } ul{ li{ width: 100%; height: 1.52rem; line-height: 1.52rem; text-align: center; color: #fff; font-size: 0.56rem; letter-spacing: 0.4rem; } .confirm{ display: flex; div:nth-child(1){ flex: 1; background: #DEDEDE; color: #BCBBBF; } div:nth-child(2){ flex: 1; color: #fff; } } } .blueBackground{ background: #21A6DF; } .redBackground{ background: #FF4046; } } } /* 動(dòng)畫 */ .modal-fade-enter,.modal-fade-leave-active{ opacity: 0; } .modal-fade-enter-active, .modal-fade-leave-active{ transition: opacity 0.5s ease; } </style>
新建一個(gè)index.js文件,在其中全局引入組件,全局引入之后,就不用在每個(gè)調(diào)用的組件里面單獨(dú)引入了,可以直接使用
import Modalfrom "./Modal.vue"; const components = { install: function (Vue) { Vue.component('Modal', Modal); } } //導(dǎo)出組件 export default components;
Index.vue中調(diào)用
<template> <div class="index"> <!-- 提交成功模態(tài)框 --> <Modal ref="Modal" :imgadress="imgadress" v-show="isModalVisible" statusText="提交成功" @closeModal="closeModal" contentText="Index.vue" :IDList="IDList" :buttonBackground="red" sure="確定" @confirm="confirm" > <!-- :payMoney="payMoney" yuan="元" --> </Modal> <button @click="showModel">支付成功模態(tài)框</button> </div> </template> <script> export default { name: 'Index', data(){ return{ // 模態(tài)框 imgadress:require('./../../assets/img/success.png'), isModalVisible:false, show: false, showToast: false, thisIndex:0, green:'green', blue:'', red:'', IDList:[ {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, ], payMoney:99, } }, methods:{ // 提示模態(tài)框 showModel(){ this.isModalVisible = true; this.blue = this.$refs.Model.blue this.red = this.$refs.Model.red }, closeModal(){ this.isModalVisible = false }, confirm(){ console.log(11111111111); }, } } </script>
效果如圖
模態(tài)框-1.gif
如果只需要一個(gè)確定按鈕,只需要在調(diào)用的時(shí)候,這么寫就好了
<template> <div class="index"> <!-- 提交成功模態(tài)框 --> <Modal ref="Modal" :imgadress="imgadress" v-show="isModalVisible" statusText="提交成功" @closeModal="closeModal" contentText="Index.vue" :IDList="IDList" :buttonBackground="blue" @button="closeModal" sure="確定" alert="1" > </Modal> <button @click="showModel">支付成功模態(tài)框</button> </div> </template>
如圖
以上是“怎么用VUE寫一個(gè)多用模態(tài)框組件模版”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:怎么用VUE寫一個(gè)多用模態(tài)框組件模版
文章分享:http://bm7419.com/article38/goicsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、網(wǎng)站導(dǎo)航、微信小程序、全網(wǎng)營銷推廣、營銷型網(wǎng)站建設(shè)、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)