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>
<p class="mask"></p>
<br>        <p class="message-content"><br>        <svg class="icon" aria-hidden="true"><br>          <use xlink:href="#icon-delete"></use><br>        </svg><br>            </p>
<h3 id="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" v-show="isShowCancelBtn">{{ cancelBtnText }}</button><br>                <button class="btn-primary btn-confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button><br>            </p>
<br>        <br>    <br>    </template><br>    <br>    <script><br/>    export default {<br/>      props: {<br/>        title: {<br/>          type: String,<br/>          default: &#39;标题&#39;<br/>        },<br/>        content: {<br/>          type: String,<br/>          default: &#39;这是弹框内容&#39;<br/>        },<br/>        isShowInput: false,<br/>        inputValue: &#39;&#39;,<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: &#39;取消&#39;<br/>        },<br/>        confirmBtnText: {<br/>          type: String,<br/>          default: &#39;确定&#39;<br/>        }<br/>      },<br/>      data () {<br/>        return {<br/>          isShowMessageBox: false,<br/>          resolve: &#39;&#39;,<br/>          reject: &#39;&#39;,<br/>          promise: &#39;&#39; // 保存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(&#39;confirm&#39;);<br/>          }<br/>          this.remove();<br/>        },<br/>        // 取消,将promise断定为reject状态<br/>        cancel: function () {<br/>          this.isShowMessageBox = false;<br/>          this.reject(&#39;cancel&#39;);<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中文網其他相關文章！