写一个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 相关文章推荐
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
Vue实现手机计算器
Aug 17 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
B2K与车机的中波PK
2021/03/02 无线电
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
vue-router 组件复用问题详解
2018/01/22 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
Python生成随机数的方法
2014/01/14 Python
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python多层装饰器用法实例分析
2018/02/09 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript