摘要:前几天想了解如何写弹窗组件,参考了知乎上的回答有以下两种可取的写法状态管理如果弹窗组件放在根组件,使用来管理组件的和。
前几天想了解vue如何写弹窗组件,参考了知乎上的回答:
https://www.zhihu.com/questio...
有以下两种可取的写法:
1.状态管理 如果弹窗组件放在根组件,使用vuex来管理组件的show和hide。放在组件内,通过增加v-show或v-if来控制,可结合slot,定义不同需求的弹窗
2.事件管理 注册一个全局事件来打开弹窗,传入需展示的文字和相关的逻辑控制,可结合promise,实现异步
觉得对用像confirme和propmt这类弹窗,还是事件驱动的好。最好就是能使用promise回调。
于是手痒就写了一个。下面是代码。
propmt.js
import Vue from "vue" import promptComponent from "./prompt.vue" // 引入弹窗的vue文件 const promptConstructor = Vue.extend(promptComponent); // 注册组件 let instance = new promptConstructor().$mount(""); // 获得组件的实例 document.body.appendChild(instance.$el); // 将组件的element插入到body中 const Alert = (text,okText)=>{ if(instance.show === true) { //防止多次触发 return; } // 为弹窗数据赋值 instance.show = true; instance.isAlert = true; instance.okText = okText||"确定"; instance.message = text; //返回一个promise对象,并为按钮添加事件监听 return new Promise(function(resolve,reject) { instance.$refs.okBtn.addEventListener("click",function() { instance.show = false; resolve(true); }) }) }; const Confirm = (text,okText,cancelText)=>{ if(instance.show === true) { return; } instance.show = true; instance.okText = okText||"确定"; instance.cancelText = cancelText||"取消"; instance.message = text; return new Promise(function(resolve,reject) { instance.$refs.cancelBtn.addEventListener("click",function() { instance.show = false; resolve(false); }); instance.$refs.okBtn.addEventListener("click",function() { instance.show = false; resolve(true); }) }) }; const Prompt = (text,okText,inputType, defaultValue)=>{ if(instance.show === true) { return; } instance.show = true; instance.isPrompt = true; instance.okText = okText||"确定"; instance.message = text; instance.inputType = inputType || "text"; instance.inputValue = defaultValue || ""; return new Promise(function(resolve,reject) { instance.$refs.okBtn.addEventListener("click",function() { instance.show = false; resolve(instance.inputValue); }) }) }; export {Alert,Confirm,Prompt}
prompt.vue
{{message}}
main.js
import {Alert,Prompt,Confirm} from "../lib/components/prompt/prompt.js" Vue.prototype.Alert = function(text,okText) { return Alert(text,okText) }; Vue.prototype.Confirm = function(text,okText,cancelText) { return Confirm(text,okText,cancelText) }; Vue.prototype.Prompt = function(text,okText,inputType, defaultValue) { return Prompt(text,okText,inputType, defaultValue) };
component.vue:
inputName() { this.Prompt("请输入名称","确认","text").then(res =>{ // do something use res }); },
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51405.html
摘要:前几天想了解如何写弹窗组件,参考了知乎上的回答有以下两种可取的写法状态管理如果弹窗组件放在根组件,使用来管理组件的和。 前几天想了解vue如何写弹窗组件,参考了知乎上的回答:https://www.zhihu.com/questio...有以下两种可取的写法:1.状态管理 如果弹窗组件放在根组件,使用vuex来管理组件的show和hide。放在组件内,通过增加v-show或v-if来控...
摘要:记录一些小技巧和踩过的坑由于本篇文章内容太多,导致编辑器有点卡,所以新开辟了一篇实践二,后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了,但是没有绑定到上面的话,不会调用钩子函数。 记录一些小技巧和踩过的坑 由于本篇文章内容太多,导致SF编辑器有点卡,所以新开辟了一篇 vue2实践(二),后续再这里更新。 1. props 带不带冒号的区别 ...
摘要:仿滴滴出行项目最近,各大社区出现很多小伙伴的项目,趁着这股热潮我也用撸了一个滴滴出行的项目。可是,后来在手机上发现,输入的时候居然调不出软键盘,写项目的时候没考虑到设备问题,简直是大大的失误。也就是说可以在组件内部进行请求,不需要提交。 Vue2.0 仿滴滴出行项目 最近,各大社区出现很多小伙伴的vue项目,趁着这股热潮我也用vue撸了一个滴滴出行的项目。 效果预览 showImg(h...
阅读 1552·2019-08-30 13:18
阅读 1539·2019-08-29 12:19
阅读 2064·2019-08-26 13:57
阅读 4096·2019-08-26 13:22
阅读 1149·2019-08-26 10:35
阅读 2961·2019-08-23 18:09
阅读 2463·2019-08-23 17:19
阅读 650·2019-08-23 17:18