詳解Vue全局組件的掛載之實現(xiàn)彈窗組件

更新時間：2022年11月08日 15:50:59 作者：w的小wife

這篇文章主要為大家詳細介紹了如何通過Vue全局組件的掛載來實現(xiàn)彈窗組件，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的可以了解一下

vue組件掛載類型

vue中組件的掛載分為兩種類型：

vue.extend()

render函數(shù)

組件掛載代碼示例

1.vue.extend()方法

此處實現(xiàn)一個彈窗組件，包含確定取消按鈕

msgBox.vue文件：（此處樣式可自行修改）

<template>
  <div v-if="showMsgBox" class="mag-box">
      <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
        <div class="mask-div">
          <div class="msg-tip">
            <div class="msg-title">
              <p>提示</p>
            </div>
            <div class="msg-content">
              {{ msgTip }}
            </div>
            <div class="msg-btn-group flex-end">
              <div v-show="msgType === 1" class="msg-btn cancle-btn" @click="cancleMsg">
                <p>取消</p>
              </div>
              <div v-show="msgType < 2" class="msg-btn confirm-btn" @click="confirmMsg">
                <p>確定</p>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>

</template>

<script>
export default {
  name: 'MsgBox',
  data() {
    return {
      msgTip: '',
      showMsgBox: false,
      msgType: '', // 0 只顯示確定  1 確定 取消  2 都不顯示  3整個組件不顯示
      success: '',
      cancle: ''
    }
  },
  methods: {
    open({ msgTip, msgType = 1, success, cancle }) {
      this.showMsgBox = true
      this.msgType = msgType
      this.msgTip = msgTip
      this.success = success
      this.cancle = cancle
    },
    confirmMsg() {
      this.showMsgBox = false
      this.success()
      // 組件關(guān)閉后銷毀該組件
      this.remove()
    },
    cancleMsg() {
      this.showMsgBox = false
      this.cancle()
      this.remove()
    }
  }
}
</script>
<style scoped lang="less">
    .mask-div {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 5000;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(32,42,59,0.5);
    }
    .msg-tip {
        width:378px;
        height:145px;
        box-shadow:0 3px 6px rgba(0,0,0,0.16);
        background: #ffffff;
        border-radius:4px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 9999;
    }
    .msg-title {
        width: 100%;
        height:36px;
        background-color:#1f95ee;
        border-radius:4px 4px 0 0;
        p {
            color: #ffffff;
            font-size: 16px;
            line-height: 36px;
            text-align: center;
        }
    }
    .msg-content {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
    }
    .msg-btn-group {
        position: absolute;
        bottom: 20px;
        right: 20px;
        .msg-btn {
            padding: 6px 10px;
            cursor: pointer;
            border-radius: 4px;
            p {
                font-size: 12px;
                border-radius: 4px;
            }
        }
        .cancle-btn {
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
        }
        .confirm-btn {
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            margin-left: 10px;
        }
    }
</style>

msgBox.js文件：

// 導入msgBox的vue文件
import msgBox from './msgBox'

const msgBox = {
  install: function(Vue) {
    // 組件注冊
    const Msg = Vue.extend(msgBox)
    const msg = new Msg()

    // 掛載
    // 此處展示了兩個盒子，是因為vue.extend方法掛載會覆蓋原有的dom元素，銷毀后便無法再次掛載
    document.body.innerHTML += '<div id="msg"><div id="msg"></div></div>'
    msg.$mount('#msg')
    // 全局注冊
    Vue.prototype.$msgBoxInfo = function(options) {
    // 打開彈窗觸發(fā)的方法
      msg.open(options)
      // 彈窗關(guān)閉后銷毀組件
      msg.remove = function() {
        const msgDom = document.getElementById('msg')
        document.body.removeChild(msgDom)
        msg.$destroy()
      }
      return msg
    }
  }
}
export default msgBox

main.js文件內(nèi)引入使用：

// 此處根據(jù)實際路徑引入
import msgBoxfrom './msgBox'
Vue.use(msgBox)

調(diào)用方式：

this.$msgBoxInfo({
          msgTip: '這是新的msgbox',
          success: () => {
            alert('成功狀態(tài)的msgbox')
          },
          cancle:() => {
            alert('取消狀態(tài)的msgbox')
          }
        })

vue.extend()中的data是一個函數(shù)并且返回一個對象；且會覆蓋被掛載的dom元素；

同時也需要注意install方法能夠開發(fā)新的插件并且注冊全局組件。并且用install注冊的組件，在main.js文件內(nèi)引用的時候，需要使用Vue.use()進行全局聲明。

2.render函數(shù)掛載

notice.vue文件(此處彈窗比較粗糙，樣式自行修改)

<template>
  <div class="box">
    <h3>{{ title }}</h3>
    <div class="box-content">{{ message }}</div>
  </div>
</template>
<script>
export default {
  name: 'Notice',
  props: {
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      iShow: false
    }
  },
  methods: {
    show() {
      this.iShow = true
      setTimeout(this.hide, this.duration)
    },
    hide() {
      this.iShow = false
      this.remove()
    }
  }
}
</script>
<style scoped>
    .box {
        position: fixed;
        width: 300px;
        top: 100px;
        right: 0;
        text-align: center;
        pointer-events: none;
        background-color: #fff;
        border: grey 3px solid;
        box-sizing: border-box;
    }
    .box-content {
        width: 200px;
        margin: 10px auto;
        font-size: 14px;
        padding: 8px 16px;
        background: #fff;
        border-radius: 3px;
        margin-bottom: 8px;
    }
</style>

notice.js文件

import Vue from 'vue'
function notice(Component, props) {
  const vm = new Vue({
    render: h => h(Component, { props })
  }).$mount()
  document.body.appendChild(vm.$el)
  const comp = vm.$children[0]
  // 需要對掛載的組件進行刪除
  comp.remove = function() {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  return comp
}
export default notice

main.js文件引入：

import create from './notice'
Vue.prototype.$create = create

方法調(diào)用：

import Notice from '../Notice'
// 此處的notice組件需要引入
this.$create(Notice, {
            title: '自己封裝彈窗',
            message: '你好，這是自己寫的彈窗',
            duration: 1000
          }).show()

render函數(shù)作用：是vue通過js渲染dom結(jié)構(gòu)的函數(shù)createElement，可以簡寫為h；這個函數(shù)會生成一個虛擬dom節(jié)點，render函數(shù)得到這個dom節(jié)點函數(shù)之后，返回給mount函數(shù)，渲染為真實的dom節(jié)點，并掛載到根節(jié)點上。

以上就是詳解Vue全局組件的掛載之實現(xiàn)彈窗組件的詳細內(nèi)容，更多關(guān)于Vue組件掛載彈窗的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: