时间:2021-07-01 10:21:17 帮助过:10人阅读
前言
一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧。
源码
github地址:Talk is cheap. Show me the code.
本地下载地址:http://xiazai.jb51.net/201711/yuanma/vue-messagebox(jb51.net).rar
组件模板
- // /src/components/MessageBox/index.vue
- <template>
- <div class="message-box" v-show="isShowMessageBox">
- <div class="mask" @click="cancel"></div>
- <div class="message-content">
- <svg class="icon" aria-hidden="true" @click="cancel">
- <use xlink:href="#icon-delete" rel="external nofollow" ></use>
- </svg>
- <h3 class="title">{{ title }}</h3>
- <p class="content">{{ content }}</p>
- <div>
- <input type="text" v-model="inputValue" v-if="isShowInput" ref="input">
- </div>
- <div class="btn-group">
- <button class="btn-default" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button>
- <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: {
- title: {
- type: String,
- default: '标题'
- },
- content: {
- type: String,
- default: '这是弹框内容'
- },
- isShowInput: false,
- inputValue: '',
- isShowCancelBtn: {
- type: Boolean,
- default: true
- },
- isShowConfimrBtn: {
- type: Boolean,
- default: true
- },
- cancelBtnText: {
- type: String,
- default: '取消'
- },
- confirmBtnText: {
- type: String,
- default: '确定'
- }
- },
- data () {
- return {
- isShowMessageBox: false,
- resolve: '',
- reject: '',
- promise: '' // 保存promise对象
- };
- },
- methods: {
- // 确定,将promise断定为resolve状态
- confirm: function () {
- this.isShowMessageBox = false;
- if (this.isShowInput) {
- this.resolve(this.inputValue);
- } else {
- this.resolve('confirm');
- }
- this.remove();
- },
- // 取消,将promise断定为reject状态
- cancel: function () {
- this.isShowMessageBox = false;
- this.reject('cancel');
- this.remove();
- },
- // 弹出messageBox,并创建promise对象
- showMsgBox: function () {
- this.isShowMessageBox = true;
- this.promise = new Promise((resolve, reject) => {
- this.resolve = resolve;
- this.reject = reject;
- });
- // 返回promise对象
- return this.promise;
- },
- remove: function () {
- setTimeout(() => {
- this.destroy();
- }, 300);
- },
- destroy: function () {
- this.$destroy();
- document.body.removeChild(this.$el);
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- // 此处省略 ...
- </style>
给组件添加全局功能
vue.js官方文档中有开发插件的介绍。具体实现代码如下:
- // /src/components/MessageBox/index.js
- import msgboxVue from './index.vue';
- // 定义插件对象
- const MessageBox = {};
- // vue的install方法,用于定义vue插件
- MessageBox.install = function (Vue, options) {
- const MessageBoxInstance = Vue.extend(msgboxVue);
- let currentMsg, instance;
- const initInstance = () => {
- // 实例化vue实例
- currentMsg = new MessageBoxInstance();
- let msgBoxEl = currentMsg.$mount().$el;
- document.body.appendChild(msgBoxEl);
- };
- // 在Vue的原型上添加实例方法,以全局调用
- Vue.prototype.$msgBox = {
- showMsgBox (options) {
- if (!instance) {
- initInstance();
- }
- if (typeof options === 'string') {
- currentMsg.content = options;
- } else if (typeof options === 'object') {
- Object.assign(currentMsg, options);
- }
- return currentMsg.showMsgBox();
- }
- };
- };
- export default MessageBox;
全局使用
- // src/main.js
- import MessageBox from './components/MessageBox/index';
- Vue.use(MessageBox);
页面调用
按照之前定义好的方法,可以在各个页面中愉快的调用该组件了。
- this.$msgBox.showMsgBox({
- title: '添加分类',
- content: '请填写分类名称',
- isShowInput: true
- }).then(async (val) => {
- // ...
- }).catch(() => {
- // ...
- });
最后来张效果图
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。