当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 写一个Vue Popup组件

写一个Vue Popup组件

2019年05月24日  | 移动技术网IT编程  | 我要评论

组件长这样

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

期望的调用方式一

不需要等待用户二次确认

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('用户确认了！')
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网