写一个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 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
jquery form 加载数据示例
Apr 21 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
微信小程序实现图片上传
May 23 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
利用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
轻松修复Discuz!数据库
2008/05/03 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
js null undefined 空区别说明
2010/06/13 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
浅谈node的事件机制
2017/10/09 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
python关闭windows进程的方法
2015/04/18 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python在地图上画比例的实例详解
2020/11/13 Python
银行批评与自我批评
2014/02/10 职场文书
党员自我评价范文2015
2015/03/03 职场文书
少先队工作总结2015
2015/05/13 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL