vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
vue3+ts+elementui-plus二次封裝彈框
一、彈框組件BaseDialog
<template> <div class='main'> <el-dialog v-model="visible" :title="title" :width="dialogWidth" :before-close="handleClose"> <!-- 內(nèi)容插槽 --> <slot></slot> <template #footer> <span class="dialog-footer"> <el-button v-if="showCancelButton" @click="handleClose">取消</el-button> <el-button v-if="showConfirmButton" type="primary" @click="handleConfirm"> 確認(rèn) </el-button> </span> </template> </el-dialog> </div> </template> <script lang='ts' setup> import { ElMessageBox } from 'element-plus' import { ref, reactive, getCurrentInstance, onMounted, defineExpose, defineEmits } from 'vue' /** * 傳入的props變量 */ const props = defineProps({ title: { type: String, default: '提示', }, dialogWidth: { type: String, default: '40%', }, showCancelButton: { type: Boolean, default: true, }, showConfirmButton: { type: Boolean, default: true, }, }) /** * 發(fā)射給父組件的方法 * 用于子組件給父組件傳值或調(diào)用父組件方法 */ const emits = defineEmits(['submit', 'close']) const visible = ref(false) // 關(guān)閉彈框 const handleClose = () => { emits('close') } // 打開彈框 const handleOpen = () => { visible.value = true } // 確認(rèn)事件 const handleConfirm = () => { emits('submit') } /** * 暴露給父組件的方法 * 用于父組件調(diào)用子組件方法或獲取子組件屬性值 */ defineExpose({ handleOpen, handleClose, visible }) onMounted(() => { }) </script> <style scoped lang='scss'> </style>
二、在index.vue中使用
<el-button @click="showDialog">點(diǎn)擊出現(xiàn)彈框</el-button> <BaseDialog ref="baseDialog" @submit="handleSubmit" @close="handleClose"> <div> <el-input placeholder="Please input" /> </div> </BaseDialog>
<script lang='ts' setup> import BaseDialog from '@/components/BaseDialog/index.vue' import { ref, reactive, getCurrentInstance, onMounted } from 'vue' onMounted(() => { }) // 獲取子組件的ref let baseDialog = ref() // 點(diǎn)擊出現(xiàn)彈框 const showDialog = () => { // 調(diào)用子組件方法,打開彈框 baseDialog.value.handleOpen() } // 彈框確認(rèn)事件 const handleSubmit = () => { console.log('我是父組件中的確認(rèn)事件') } // 彈框取消事件 const handleClose = () => { baseDialog.value.visible = false } </script>
三、效果
創(chuàng)建vue3+ts+element-plus項(xiàng)目
一、創(chuàng)建vue3項(xiàng)目
1.新建vue3TsElement文件夾
該文件夾中打開命令行窗口,運(yùn)行創(chuàng)建vue3項(xiàng)目的命令
npm init vue@latest
2.打開創(chuàng)建好的vue3_TS_element文件夾
關(guān)掉之前的命令行窗口,在該文件夾中再次打開命令行窗口下載依賴文件
npm install
3.說明
注意創(chuàng)建項(xiàng)目命令行窗口與安裝依賴命令行窗口之間的切換
二、安裝element-plus組件庫
安裝命令
npm install element-plus --save
完整引入
在main.ts引入,就可以使用了
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)
按需引入
(1)首先要安裝element-plus
npm install element-plus --save
(2)然后你需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件
npm install -D unplugin-vue-components unplugin-auto-import
(3)然后把下列代碼插入到你的 Vite 或 Webpack 的配置文件中
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' //按需引入element import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ AutoImport({//按需引入element resolvers: [ElementPlusResolver()], }), Components({//按需引入element resolvers: [ElementPlusResolver()], }), vue(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })
到此這篇關(guān)于vue3+ts+elementui-plus二次封裝彈框的文章就介紹到這了,更多相關(guān)vue3 ts elementui-plus彈框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
分享12個Vue開發(fā)中的性能優(yōu)化小技巧(實(shí)用!)
一般來說,你不需要太關(guān)心vue的運(yùn)行時性能,它在運(yùn)行時非???但付出的代價是初始化時相對較慢,下面這篇文章主要給大家分享介紹了十二個Vue開發(fā)中的性能優(yōu)化小技巧,需要的朋友可以參考下2022-02-02vue實(shí)現(xiàn)背景圖片鋪滿整個屏幕(適配所有機(jī)型)
在網(wǎng)頁設(shè)計中,背景全屏是一種常見的視覺效果,通過正確的CSS樣式設(shè)置,可以實(shí)現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過滾動條查看剩余內(nèi)容,這種設(shè)計可以提升用戶的瀏覽體驗(yàn),使網(wǎng)頁看起來更加整潔和專業(yè)2024-10-10解決Vue使用bus總線時,第一次路由跳轉(zhuǎn)時數(shù)據(jù)沒成功傳遞問題
這篇文章主要介紹了解決Vue使用bus總線時,第一次路由跳轉(zhuǎn)時數(shù)據(jù)沒成功傳遞問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入
這篇文章主要給大家介紹了關(guān)于vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入的相關(guān)資料,element-plus正是element-ui針對于vue3開發(fā)的一個UI組件庫,?它的使用方式和很多其他的組件庫是一樣的,需要的朋友可以參考下2023-07-07