Vue手寫dialog組件模態(tài)框過程詳解
在vue項(xiàng)目下創(chuàng)建文件dialog
實(shí)現(xiàn)思路
1、dialog組件為模態(tài)框,因此應(yīng)該是固定定位到頁面上面的,并且需要留一定的插槽來讓使用者自定義顯示內(nèi)容
2、難點(diǎn)在于如何一句話打開dialog,也就是下面的index.js文件的內(nèi)容:導(dǎo)入我們已經(jīng)寫好的組件(可以先寫一個(gè)及其簡單的),模塊暴露出一個(gè)函數(shù)(DiaLog)用于生成dialog,這里主要利用到vue中的createApp函數(shù),createApp創(chuàng)建應(yīng)用,將應(yīng)用掛載到我們的新建div標(biāo)簽上,隨著用戶觸發(fā)點(diǎn)擊事件,將div標(biāo)簽銷毀即可
index.js文件
import dialog from './index.vue' import { createApp} from 'vue' export const DiaLog = (obj) => { const app = createApp(dialog, { ...obj, on_click: (flg) => { console.log(flg); div.remove() }, }) const div = document.createElement('div') app.mount(div) document.body.appendChild(div) }
使用
<template> <div class="app"> <button @click="DiaLog({_title:'我不想起標(biāo)題'})">起飛</button> </div> </template> <script setup> import { DiaLog } from './package/dialog/index.js' </script> <style scoped lang="scss"> .app { height: 1200px; } </style>
index.vue文件
<template> <div class="dialog"> <h1 v-if="props._title">{{ props._title }}</h1> <div> <slot></slot> </div> <div class="btn"> <button @click="emitFn(false)">取消</button> <button @click="emitFn(true)" class="success">確認(rèn)</button> </div> </div> <div class="background" v-if="props._background"></div> </template> <script setup> const props = defineProps({ _title: { type: String, default: '無標(biāo)題' }, _background: { type: Boolean, default: true } }) const emit = defineEmits([ '_click' ]) const emitFn = (boolean) => { emit('_click', boolean) } </script> <style scoped lang="scss"> .dialog { background-color: white; z-index: 999; position: fixed; width: 400px; min-height: 200px; left: 50%; top: 50%; border: 1px solid rgba(0, 0, 0, 0.5); transform: translateX(-50%) translateY(-50%); display: flex; flex-direction: column; justify-content: space-between; padding: 15px; h1 { font-size: 20px; font-weight: 400; padding: 0; margin: 0; } .btn { display: flex; justify-content: end; button { padding: 5px 15px; border-radius: 5px; border: 2px solid #E2E2E2; font-size: 14px; cursor: pointer; } .success { color: white; background-color: #36AD6A; margin-left: 20px; } } } .background { width: 100vw; height: 100vh; position: fixed; left: 0; // display: none; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 99; } </style>
到此這篇關(guān)于Vue手寫dialog組件模態(tài)框過程詳解的文章就介紹到這了,更多相關(guān)Vue dialog組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3造輪子之Typescript配置highlight過程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07如何在vuejs項(xiàng)目中使用md5加密密碼的實(shí)現(xiàn)
本文主要介紹了如何在vuejs項(xiàng)目中使用md5加密密碼的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue.js引用背景圖background無效的3種解決方案
這篇文章主要介紹了vue.js引用背景圖background無效的3種解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值
小編在做需求時(shí),遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過el-select來選取相應(yīng)的值,做到動(dòng)態(tài)選擇,下面這篇文章主要給大家介紹了關(guān)于如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值的相關(guān)資料,需要的朋友可以參考下2023-01-01vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式
這篇文章主要介紹了vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03