写一个Vue Popup组件


Posted in Javascript onFebruary 25, 2019

组件长这样

主要有标题、内容、按钮个数、按钮颜色、按钮文案这些可配置项

写一个Vue Popup组件

写一个Vue Popup组件

期望的调用方式一

不需要等待用户二次确认

import Modal from 'common/components/modal'

handleModal() {
 Modal({
  title: '赚取收益?',
  content: '根据您的授权金额和计息天数计算得出(还未到账)。实际以到账金额为准。',
  confirmText: '我知道了'
 })
}

期望的调用方式二

需要等待用户二次确认

import Modal from 'common/components/modal'

async handleModal() {
 await Modal({
  title: '确定现在申请结束吗?',
  content: '申请后预计1-5个工作日可退出',
  cancelColor: '#ff7400',
  confirmColor: '#000',
  showCancel: true
 })
}

模板长这样

common/components/modal/modal.vue

这里用 transition 来包裹动画,填好配置参数就行了

handleConfirm() 二次确认事件我们不放这里实现,具体原因后面会讲
<template>
 <transition name="modal-pop">

  <div class="wrap"
     v-show="visible">

   <div class="modal">

    <h3>{{ title }}</h3>

    <p>{{ content }}</p>

    <div class="btns">
     <span v-if="showCancel"
        @click="visible = false"
        :style="`color: ${cancelColor}`">{{ cancelText }}</span>
     <span @click="handleConfirm()"
        :style="`color: ${confirmColor}`">{{ confirmText }}</span>
    </div>

   </div>

  </div>

 </transition>
</template>

<style lang="less">
@import './modal.less';
</style>

定义好 props 参数列表,visible 作为组件内部状态控制弹框打开关闭

export default {
 props: [
  'title',
  'content',
  'showCancel',
  'cancelColor',
  'cancelText',
  'confirmText',
  'confirmColor'
 ],

 data() {
  return {
   visible: false
  }
 }
}

组件包装

common/components/modal/index.js

先利用 vue 的 extend 拿到刚编写的模板

import Vue from 'vue'

const ModalConstructor = Vue.extend(require('./modal.vue'))

const Modal = (opts = {}) => {
 let _m = new ModalConstructor({ el: document.createElement('div') })
}

export default Modal

配置好默认参数,并将 visible 状态打开以显示弹框,最终插入页面

import Vue from 'vue'

const ModalConstructor = Vue.extend(require('./modal.vue'))

const Modal = (opts = {}) => {
 let _m = new ModalConstructor({ el: document.createElement('div') })

 _m.title = opts.title || '提示'
 _m.content = opts.content || ''
 _m.showCancel = opts.showCancel || false
 _m.cancelText = opts.cancelText || '取消'
 _m.cancelColor = opts.cancelColor || '#000'
 _m.confirmText = opts.confirmText || '确定'
 _m.confirmColor = opts.confirmColor || '#ff7400'
 _m.visible = true

 document.body.appendChild(_m.$el)
}

export default Modal

用户点击二次确认事件后,为了方便组件外部捕捉,这里使用 Promise 包装回调事件

这样 handleConfirm() 放在这里实现是不是就方便很多了
import Vue from 'vue'

const ModalConstructor = Vue.extend(require('./modal.vue'))

const Modal = (opts = {}) => {
 let _m = new ModalConstructor({ el: document.createElement('div') })

 _m.title = opts.title || '提示'
 _m.content = opts.content || ''
 _m.showCancel = opts.showCancel || false
 _m.cancelText = opts.cancelText || '取消'
 _m.cancelColor = opts.cancelColor || '#000'
 _m.confirmText = opts.confirmText || '确定'
 _m.confirmColor = opts.confirmColor || '#ff7400'
 _m.visible = true

 document.body.appendChild(_m.$el)

 return new Promise(resolve => {
  return (_m.handleConfirm = () => {
   _m.visible = false
   resolve()
  })
 })
}

export default Modal

最终长这样

import Modal from 'common/components/modal'

async handleModal() {
 await Modal({
  title: '确定现在申请结束吗?',
  content: '申请后预计1-5个工作日可退出',
  cancelColor: '#ff7400',
  confirmColor: '#000',
  showCancel: true
 })

 console.log('用户确认了!')
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
Vue 组件注册实例详解
Feb 23 #Javascript
Vue Prop属性功能与用法实例详解
Feb 23 #Javascript
Vue自定义属性实例分析
Feb 23 #Javascript
Vue动态组件与异步组件实例详解
Feb 23 #Javascript
You might like
php实现CSV文件导入和导出
2015/10/24 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
Ajax和javascript的区别
2013/07/20 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
简单的辞职信范文
2014/01/18 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
原告离婚代理词
2015/05/23 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
vscode中使用npm安装babel的方法
2021/08/02 Javascript
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang