MENU前言组件挂载组件使用前言项目开发中基本都会用到组件库但是设计稿样式和功能不一定和组件库相同尤其像是消息提示弹窗、确认弹窗各个项目各个设计师都有自己的一套风格。虽然我们可以使用组件库中的组件对其进行样式覆盖来使用。但是一些定制功能还是不容易修改这种情况我们就会选择自定义组件然后通过components属性引入页面显式的写入标签调用对于消息提示这种给用户简单的提示或操作大多数常用的ui库类似功能都支持通过js调用。我们也可以参照ui库的调用方式实现一个通过js函数调用的自定义组件。此功能不可以在微信小程序中使用因为微信小程序的body元素已被屏蔽。组件Htmltemplateviewclassw_100_ h_100vh bc_rgba_255_6 bf_b26 pf l_0 t_0 z_index_9999viewclassw_100_ h_506 df fd_c b_lg_02viewclassm_t_236 f_s_48 f_w_600 ta_c color_16172a弹窗组件/view/viewviewclassm_t_68 df jc_cviewclassdg gtc_c2_300 grg_86 gcg_30viewclassdf fd_c ai_cv-foritem in list:keyitem.idimageclassw_100 h_100:srcitem.icon/imageviewclassm_t_36 f_s_32 color_333{{ item.title }}/view/view/view/viewviewclassm_t_36 df jc_cimageclassw_58 h_58src/static/image/icon/12.pngclickonClick/image/view/view/templatez_index_9999代表的是层级为9999也是最高层级如果层级为999则盖不住tabBar组件。df表示display: flex;在第一个元素使用此属性是为了防止margin-top的是时候父元素跟着偏移。使用统一样式在此文章中不单独列出基本看类名便知道样式属性及值。JavaScriptexportdefault{data(){return{list:[]}},created(){this.init();},methods:{onClick(){console.log(调用时传递的数据: ,this.msg);// 关闭组件this.$el.parentNode.removeChild(this.$el);},init(){letlist[模块一,模块二,模块三,模块四];this.listlist.map(item{letobj{};obj.idthis.$uniqueA(26);obj.iconrequire(/static/image/icon/11.png);obj.titleitem;returnobj;});}}}uniqueA是生成唯一值方法。npm下载指令npm install js-unique --save。关键代码this.$el.parentNode.removeChild(this.$el);调用vue自带的移除元素节点方法。挂载组件importVuefromvue;importcomponentsQuickEntryfrom../components/quickEntry/index.vue;// 注册实例constQuickEntryVue.extend(componentsQuickEntry);exportfunctionquickEntry(options{msg:数据消息},methods{}){letappnewQuickEntry({// 数据data:options,methods});// 挂载实例appapp.$mount();document.body.appendChild(app.$el);}编写js文件在util文件夹中新建一个名为quickEntry的.js文件。使用第一步import{quickEntry}from/util/quickEntryVue.prototype.$quickEntryquickEntry在main.js文件中注册组件。第二步exportdefault{onLaunch(){uni.onTabBarMidButtonTap((){this.$quickEntry({msg:数据消息},{});});}}经过以上步骤后便可在项目中正常使用组件示例在App.vue文件中使用。