目次vue3实现alert自界说的plugins
技能情况： vue3实现一个alert的plugins 代码目次如下：
1. plugins/Message/index.vue[code]<template> <div class="default-message"> <div class="default-message-content"> <div class="default-message-title">{{title}}</div> <div class="default-message-value" v-html="content"></div> <div class="default-message-btns"> <div class="default-message-cancle default-message-btn" v-if="cancleText" :style="setCancleColor()" @click.prevent.stop="handleCancel"> {{cancleText}} </div> <div class="default-message-submit default-message-btn" :style="setOkColor()" @click.prevent.stop="handleOk"> {{okText}} </div> </div> </div> </div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ name: "Message", props: { // 标题 title: { type: String, default: "提示", }, // 内容 content: { type: String, default: "", required: true, }, // 确定按钮文字 okText: { type: String, default: "确定", }, // 确定按钮文字颜色 okTextColor: { type: String, default: "#26a2ff", }, // 取消按钮文字 cancleText: { type: String, default: "", }, // 取消按钮文字颜色 cancleTextColor: { type: String, default: "#999", }, // 乐成回调 success: { type: Function, }, // 失败回调 fail: { type: Function, }, }, setup(props) { // ok的颜色 const setOkColor = () => { return `color: ${props.okTextColor}`; }; // 取消的颜色 const setCancleColor = () => { return `color: ${props.cancleTextColor}`; }; // 移除当前组件 function removeModal() { const modelDom = document.body.querySelector( `.__default__container__message__` ); if (modelDom) { document.body.removeChild(modelDom); } } const handleCancel = () => { removeModal(); props.fail && props.fail(); }; const handleOk = () => { removeModal(); props.success && props.success(); }; return { setOkColor, setCancleColor, handleOk, handleCancel, }; }, }); </script> <style scoped lang="scss"> .default-message { position: fixed; right: 0; top: 0; bottom: 0; left: 0; z-index: 1000; background: rgba($color: #000000, $alpha: 0.3); .default-message-title { padding-top: 15px; text-align: center; font-size: 18px; font-weight: 700; color: #333; } .default-message-content { width: 85%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background-color: #fff; border-radius: 6px; transition: all 0.2s ease-in; color: #999; font-size: 18px; } .default-message-value { padding: 10px 20px 15px; min-height: 36px; position: relative; color: #999; text-align: center; line-height: 36px; } .default-message-btns { // border-top: 1px solid #ddd; display: flex; height: 46px; position: relative; &:after { position: absolute; content: ""; display: inline-block; left: 0; right: 0; top: 0; height: 1px; transform: scaleY(0.5); background: #ddd; } .default-message-btn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 0 3px; } .default-message-cancle { position: relative; &:after { position: absolute; content: ""; display: inline-block; top: 0; right: 0; bottom: 0; width: 1px; transform: scaleX(0.5); background: #ddd; } } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } } </style> [/code]2. plugins/Message/index.js[code]import { createVNode, render } from "vue"; import MessageConstructor from "./index.vue"; const $message = function(options) { // 创建div const container = document.createElement("div"); container.className = `__default__container__message__`; //创建虚拟节点 const vm = createVNode(MessageConstructor, options); //渲染虚拟节点 render(vm, container); document.body.appendChild(container); }; export default { //组件注册 install(app) { app.config.globalProperties.$message = $message; } };[/code]3. main.js[code]import { createApp } from "vue"; import router from "./router"; import store from "./store"; import App from "./App.vue"; import Message from "./assets/plugins/Message"; const app = createApp(App); app.use(Message); app.use(store); app.use(router); app.mount("#app", { username: "123 });[/code]4. 利用方法[code]import { getCurrentInstance } from "vue"; setup(props) { const { ctx } = getCurrentInstance(); ctx.$message({ content: "您确定要退出吗？", cancleText: "取消", success: (res) => { console.log(res); }, fail: (err) => { console.log(err); }, }); }[/code]5. 升级改造由于当前 ctx.$message 仅仅只在setup内里利用， 如果盼望在unit.js或者其他js文件中利用? 下面开始我的表演
文档阐明：
总结以上为个人履历，盼望能给大家一个参考，也盼望大家多多支持脚本之家。 来源：https://www.jb51.net/javascript/326665fwt.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 08:47 , Processed in 0.030376 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
