Vue.js開發一個全域呼叫的MessageBox元件

前言

目前在開發個人部落格專案中，一開始就還沒準備好使用一些現在比較流行的UI函式庫（畢竟是個人項目，多練練手還是好的），所以需要自己開發幾個全域元件，這裡以MessageBox為例記錄Vue.js如何開發全域元件。

原始碼

Talk is cheap. Show me the code.

#Talk is cheap. Show me the code.

## 元件模板

<span style="font-size: 16px;">// /src/components/MessageBox/index.vue<br><template><br>    <p class="message-box" v-show="isShowMessageBox"><br>        <p class="mask" @click="cancel"></p><br>        <p class="message-content"><br>        <svg class="icon" aria-hidden="true" @click="cancel"><br>          <use xlink:href="#icon-delete"></use><br>        </svg><br>            <h3 class="title">{{ title }}</h3><br>            <p class="content">{{ content }}</p><br>        <p><br>          <input type="text" v-model="inputValue" v-if="isShowInput" ref="input"><br>        </p><br>            <p class="btn-group"><br>                <button class="btn-default" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button><br>                <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button><br>            </p><br>        </p><br>    </p><br>    </template><br>    <br>    <script><br>    export default {<br>      props: {<br>        title: {<br>          type: String,<br>          default: '标题'<br>        },<br>        content: {<br>          type: String,<br>          default: '这是弹框内容'<br>        },<br>        isShowInput: false,<br>        inputValue: '',<br>        isShowCancelBtn: {<br>          type: Boolean,<br>          default: true<br>        },<br>        isShowConfimrBtn: {<br>          type: Boolean,<br>          default: true<br>        },<br>        cancelBtnText: {<br>          type: String,<br>          default: '取消'<br>        },<br>        confirmBtnText: {<br>          type: String,<br>          default: '确定'<br>        }<br>      },<br>      data () {<br>        return {<br>          isShowMessageBox: false,<br>          resolve: '',<br>          reject: '',<br>          promise: '' // 保存promise对象<br>        };<br>      },<br>      methods: {<br>        // 确定,将promise断定为resolve状态<br>        confirm: function () {<br>          this.isShowMessageBox = false;<br>          if (this.isShowInput) {<br>            this.resolve(this.inputValue);<br>          } else {<br>            this.resolve('confirm');<br>          }<br>          this.remove();<br>        },<br>        // 取消,将promise断定为reject状态<br>        cancel: function () {<br>          this.isShowMessageBox = false;<br>          this.reject('cancel');<br>          this.remove();<br>        },<br>        // 弹出messageBox,并创建promise对象<br>        showMsgBox: function () {<br>          this.isShowMessageBox = true;<br>          this.promise = new Promise((resolve, reject) => {<br>            this.resolve = resolve;<br>            this.reject = reject;<br>          });<br>          // 返回promise对象<br>          return this.promise;<br>        },<br>        remove: function () {<br>          setTimeout(() => {<br>            this.destroy();<br>          }, 300);<br>        },<br>        destroy: function () {<br>          this.$destroy();<br>          document.body.removeChild(this.$el);<br>        }<br>      }<br>    };<br>    </script><br>    <style lang="scss" scoped><br>    // 此处省略 ...<br>    </style>    <br></span>

為元件新增全域功能

vue.js官方文件中有開發外掛程式的介紹。具體實作程式碼如下：

<span style="font-size: 16px;">// /src/components/MessageBox/index.js<br><br>import msgboxVue from './index.vue';    <br>// 定义插件对象<br>const MessageBox = {};<br>// vue的install方法，用于定义vue插件<br>MessageBox.install = function (Vue, options) {<br>  const MessageBoxInstance = Vue.extend(msgboxVue);<br>  let currentMsg;<br>  const initInstance = () => {<br>    // 实例化vue实例<br>    currentMsg = new MessageBoxInstance();<br>    let msgBoxEl = currentMsg.$mount().$el;<br>    document.body.appendChild(msgBoxEl);<br>  };<br>  // 在Vue的原型上添加实例方法，以全局调用<br>  Vue.prototype.$msgBox = {<br>    showMsgBox (options) {<br>      if (!currentMsg) {<br>        initInstance();<br>      }<br>      if (typeof options === 'string') {<br>        currentMsg.content = options;<br>      } else if (typeof options === 'object') {<br>        Object.assign(currentMsg, options);<br>      }<br>      return currentMsg.showMsgBox()<br>        .then(val => {<br>          currentMsg = null;<br>          return Promise.resolve(val);<br>        })<br>        .catch(err => {<br>          currentMsg = null;<br>          return Promise.reject(err);<br>        });<br>    }<br>  };<br>};<br>export default MessageBox;<br></span>

全域使用

<span style="font-size: 16px;">// src/main.js<br>import MessageBox from './components/MessageBox/index';<br>Vue.use(MessageBox);<br></span>

頁面呼叫

##依照先前定義好的方法，可以在各個頁面中愉快的調用該元件了。

<span style="font-size: 16px;">this.$msgBox.showMsgBox({<br>    title: '添加分类',<br>    content: '请填写分类名称',<br>    isShowInput: true<br>}).then(async (val) => {<br>    // ...        <br>}).catch(() => {<br>    // ...<br>});    <br><br></span>

最後來張效果圖

以上內容就是Vue. js開發一個全域呼叫的MessageBox元件，希望對大家有幫助。

相關推薦： 

vue.js父向子元件傳參的實作方法

Vue.js元件通訊中的幾種姿勢具體分析

Vue.js常用指令的學習詳解

#############

以上是Vue.js開發一個全域呼叫的MessageBox元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！