美文网首页优秀文章
vue.extend()实现全局动态组件

vue.extend()实现全局动态组件

作者: 咕嘟咕嘟li | 来源:发表于2021-01-07 21:54 被阅读0次

    新建文件夹 hlAlert
    在hlAlert文件夹下新建组件模板的HlAlert.vue文件
    在hlAlert文件夹下新建对应组件模板的index.js文件

    目录结构
    HlAlert.vue文件写好组件的正常逻辑(样式没有贴进来)
    <template>
      <div class="hl-pop-wrap">
        <div class="hl-pop-wrap-bg" @click="close(1)"></div>
        <div class="hl-pop-content">
          <div class="hl-alert-close" @click="close(1)" v-if="isCloseIcon">
            <i class="fa fa-times" aria-hidden="true"></i>
          </div>
          <div class="hl-pop-title" v-html="title" v-if="title"></div>
          <div class="hl-pop-detail">
            <div v-html="message" v-if="message" class="hl-pop-message"></div>
            <div v-html="subMessage" v-if="subMessage" class="hl-pop-submessage"></div>
          </div>
          <div class="hl-alert-btn-group">
            <button class="u-hl-base-btn u-alert-ensure" @click="ensure">{{ensureBtnText}}</button>
            <button class="u-hl-base-btn u-alert-close" @click="close(2)">取消</button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          message: '111'
        }
      },
      methods: {
        ensure () {
          this.ensureHanlder()
          this.$el.parentNode.removeChild(this.$el)
        },
        close (mode) {
          mode === 2 && this.cancelHandler()
          this.$el.parentNode.removeChild(this.$el)
        }
      }
    }
    </script>
    

    index.js文件代码如下:

    // index.js文件
    import Vue from 'vue'
    import HlAlert from './HlAlert'
    
    HlAlert.install = function (options, ensureHanlder, cancelHandler) {
      if (!ensureHanlder) {
        ensureHanlder = function () {}
      }
      if (!cancelHandler) {
        cancelHandler = function () {}
      }
      // 定义data 
      if (!options) {
        options = {}
      }
      options['message'] = options.message ? options.message : '' // 一级标题
      options['title'] = options.title ? options.title : '' // 弹窗顶部信息
      options['subMessage'] = options.subMessage ? options.subMessage : '' // 提示内容
      options['isCloseIcon'] = options.isCloseIcon || false // 弹窗顶部关闭按钮是否展示
      options['ensureBtnText'] = options.ensureBtnText ? options.ensureBtnText : '确认' // 自定义确认按钮文字
      const MyHlAlert = Vue.extend(HlAlert)
      // 创建一个vue的实例
      const currentComponent = new MyHlAlert({
        data: options,
        methods: {
          ensureHanlder, // 确认按钮回调
          cancelHandler // 取消按钮回调
        }
      }).$mount()
      document.querySelector('body').appendChild(currentComponent.$el)
    }
    
    export default HlAlert
    
    

    install 方法步骤如下
    ① 使用vue.extend扩展HlAlert.vue
    ② 创建一个vue的实例
    创建vue实例时可以传递参数,用来和父组件进行交互

    ③ 挂载到DOM节点上

    去main.js里注册好

    import HlAlert from './components/hlAlert'
    Vue.$HlAlert = Vue.prototype.$HlAlert = HlAlert.install
    

    组件的API如下:

    options组件属性 说明
    title 弹窗顶部的内容
    message 提示信息的一级标题,样式有加粗
    subMessage 提示信息的内容
    isCloseIcon 弹窗的关闭按钮是否展示。默认false
    ensureBtnText 自定义弹窗确认按钮。默认“确认”
    events 说明
    第二个参数 ensureHanlder 确认按钮回调
    第三个参数 cancelHandler 取消按钮回调

    使用的时候就可以用如下代码:

    this.$HlAlert({
      title: '信息提示',
      subMessage: '这是一个信息提示弹窗',
      ensureBtnText: '知道了',
      message: '你好',
      isCloseIcon: true
    },
    () => { console.log('确认按钮回调') ,
    () => { console.log('取消按钮回调')
    })
    

    点击页面上的弹窗按钮后就可以看到提示该组件了


    image.png

    相关文章

      网友评论

        本文标题:vue.extend()实现全局动态组件

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