美文网首页前端让前端飞Vue
写一个Vue Popup组件

写一个Vue Popup组件

作者: 88b61f4ab233 | 来源:发表于2019-04-15 15:40 被阅读32次

    组件长这样

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

    期望的调用方式一

    不需要等待用户二次确认

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

    最后

    为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

    当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

    但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

    最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。


    相关文章

      网友评论

        本文标题:写一个Vue Popup组件

        本文链接:https://www.haomeiwen.com/subject/jowuwqtx.html