写一个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 $.ajax入门应用一
Nov 19 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
详解Vue项目中实现锚点定位
Apr 24 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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查询搜索引擎排名位置的代码
2010/01/05 PHP
浅谈PHP的反射机制
2016/12/15 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python 函数基础知识汇总
2018/03/09 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python列表切片常用操作实例解析
2019/12/16 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Reformation官网:美国女装品牌
2018/09/14 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
消防演习感想
2015/08/10 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android