前言
参照element的方式,写了个简单vue全局ui插件的代码基本组织结构,已经剥离了大部分非关键代码,应该可以一看就懂。
入口js
<code class="language-null">import Vue from 'vue' import App from './index.vue' import AuthUi from '@/global/authui.js' Vue.use(AuthUi); new Vue({ render: h => h(App), }).$mount('#app') </code>
插件汇总js @/global/authui.js
<code class="language-null">//参考 https://github.com/ElemeFE/element/blob/dev/src/index.js import Tips from '@/module/tips/1.0.0/index.js' const components = [ Tips ]; const install = function(Vue) { components.forEach(component => { Vue.component(component.name, component); }); Vue.prototype.$tips = Tips; }; /* istanbul ignore if */ if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export default { install, Tips } </code>
组件入口js @/module/tips/1.0.0/index.js
<code class="language-null">//参考 https://github.com/ElemeFE/element/blob/dev/packages/message/src/main.js import Vue from 'vue'; import Main from './main.vue'; let TipsConstructor = Vue.extend(Main); let instance; let seed = 1; const Tips = function(options){ if (typeof options === 'string') { options = { message: options }; } let userOnClose = options.onClose; let id = 'tips_' + seed++; options.onClose = function(){ Tips.close(id, userOnClose); }; instance = new TipsConstructor({ data: options }); instance.id = id; instance.$mount(); document.body.appendChild(instance.$el); return instance; } export default Tips </code>
组件模板 @/module/tips/1.0.0/main.vue
<code class="language-null"><template> <div class="msg-mode"> <div class="msg-text text-center">tips text {{message}}</div> </div> </template> <script> export default { name: 'Tips', data(){ return { message: '' } }, mounted(){ } } </script> <style lang="less" scoped> </style> </code>