VUE2——事件驱动弹窗

MobService 发布于2019-08-01 17:50 / 3006人阅读

摘要：前几天想了解如何写弹窗组件，参考了知乎上的回答有以下两种可取的写法状态管理如果弹窗组件放在根组件，使用来管理组件的和。

前几天想了解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

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
    });
},

混合云专线服务事件驱动事件驱动模型事件驱动型 python事件驱动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51405.html

VUE2——事件驱动弹窗

摘要：前几天想了解如何写弹窗组件，参考了知乎上的回答有以下两种可取的写法状态管理如果弹窗组件放在根组件，使用来管理组件的和。前几天想了解vue如何写弹窗组件，参考了知乎上的回答：https://www.zhihu.com/questio...有以下两种可取的写法：1.状态管理如果弹窗组件放在根组件，使用vuex来管理组件的show和hide。放在组件内，通过增加v-show或v-if来控...

voyagelab 2019-08-21 17:10 评论0 收藏0
vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0
Vue2.0 仿滴滴出行项目

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。效果预览 showImg(h...

ShevaKuilin 2019-08-21 11:44 评论0 收藏0
封装框架的实践

摘要：最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于和封装的框架，集成数据存储字体图标库拓展语言网络请求等模块，为了让业务开发更专注于数据驱动。最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于vue和elementUI封装的框架，集成数据存储localforage、字体图标库font-awesome、css拓展语言scss、网络请求axios等模块，为了让业...

Dogee 2019-08-23 13:57 评论0 收藏0