Vue.js는 전역적으로 호출되는 MessageBox 구성 요소를 개발합니다.

머리말

저는 현재 개인 블로그 프로젝트를 개발 중입니다. 처음부터 많이 사용되는 UI 라이브러리를 사용할 준비가 되어 있지 않았습니다(결국 개인 프로젝트이므로 더 연습하는 것이 좋습니다). 그래서 여러 전역 구성 요소를 직접 개발해야 합니다. 여기서는 Vue.js가 전역 구성 요소를 개발하는 방법을 기록하기 위한 예로 MessageBox를 사용합니다.

소스코드

톡이 저렴해요. 구체적인 구현 코드는 다음과 같습니다.

<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>

Global use

<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>

Page call

앞서 정의한 방법을 따르면 각 페이지에서 이 컴포넌트를 즐겁게 호출할 수 있습니다.

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

마지막으로 렌더링은 다음과 같습니다.

위 내용은 전역적으로 호출되는 MessageBox 구성 요소를 개발하는 Vue.js에 대한 내용입니다.

관련 권장 사항:

vue.js 상위 구성 요소에서 하위 구성 요소로 매개 변수를 전달하는 구현 방법

Vue.js 구성 요소 통신의 여러 상태에 대한 특별 분석

Vue. 일반적인 js 명령어 학습에 대한 자세한 설명

위 내용은 Vue.js는 전역적으로 호출되는 MessageBox 구성 요소를 개발합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!