写一个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 相关文章推荐
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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转成EXE文件
2006/10/09 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
canvas知识总结
2017/01/25 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
学习python (2)
2006/10/31 Python
py中的目录与文件判别代码
2008/07/16 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
《钱学森》听课反思
2014/03/01 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
暑期培训班策划方案
2014/08/26 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
活着观后感
2015/06/03 职场文书
公司转让协议书
2016/03/19 职场文书