詳解如何用VUE寫一個(gè)多用模態(tài)框組件模版
對(duì)于新手們來說,如何寫一個(gè)可以多用的組件,還是有點(diǎn)難度的,組件如何重用,如何傳值這些在實(shí)際使用中,是多少會(huì)存在一些障礙的,所以今天特意寫一個(gè)最常用的模態(tài)框組件提供給大家,希望能幫助到您!
懶癌患者直接復(fù)制粘貼即可
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" alt=""> <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>
如圖
模態(tài)框-2.gif
可能并不是特別完美,如果您發(fā)現(xiàn)有缺點(diǎn),還請(qǐng)不吝賜教!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue父子模版?zhèn)髦导敖M件傳值的三種方法
- 詳解vue父子模版嵌套案例
- 詳解用vue2.x版本+adminLTE開源框架搭建后臺(tái)應(yīng)用模版
- vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
- VSCode寫vue項(xiàng)目一鍵生成.vue模版,修改定義其他模板的方法
- 詳解vue 模版組件的三種用法
- vue19 組建 Vue.extend component、組件模版、動(dòng)態(tài)組件 的實(shí)例代碼
- Vue 中可以定義組件模版的幾種方式
- 解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號(hào))沖突問題
- Vue2?模版指令元素綁定事件執(zhí)行順序解析
- vue模版編譯詳情
- vue的指令和插值問題匯總
- vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
相關(guān)文章
Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺(tái)php)
這篇文章主要介紹了Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺(tái)php),前端采用vue框架,后臺(tái)php,具體解決方法,大家參考下本文2018-03-03vue和iview結(jié)合動(dòng)態(tài)生成表單實(shí)例
這篇文章主要介紹了vue和iview結(jié)合動(dòng)態(tài)生成表單實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue中使用crypto-js AES對(duì)稱加密算法實(shí)現(xiàn)加密解密
?在數(shù)字加密算法中,通過可劃分為對(duì)稱加密和非對(duì)稱加密,本文主要介紹了Vue中使用crypto-js AES對(duì)稱加密算法實(shí)現(xiàn)加密解密,文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09vue使用echarts圖表自適應(yīng)的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟
國際化是指項(xiàng)目能夠根據(jù)不同國家的語言進(jìn)行轉(zhuǎn)換,便于不同國家的用戶使用,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04vue-cli創(chuàng)建項(xiàng)目及項(xiàng)目結(jié)構(gòu)解析
上一篇我們安裝了vue-cli,接下來我們就使用該腳手架進(jìn)行創(chuàng)建項(xiàng)目,這篇文章主要介紹了vue-cli創(chuàng)建項(xiàng)目以及項(xiàng)目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10