1. easycom that comes with uniapp
- example
"easycom": { "autoscan": true, "custom": { "^xxx-(.*)": "@/components/xxx-$1/index.vue" // 匹配components目录内xxx-**下的vue文件 } }, - file creation method
- After the above method is mounted, each page needs to write the label of the component separately, but there is no need to introduce
<template>
<view >
<xxx-zj></xxx-zj>
</view>
</template>
2. Use
vue-inset-loader(the method is limited to vue version 2 and used in applets)
step:
1. First, you need to initialize the uniapp project
npm init
2. Downloadvue-inset-loader
npm i vue-inset-loader
3. Create the vue.config.js file
The uniapp project created from HBuilder X does not have a vue.config.js file, so one needs to be built
const path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
use: {
// loader: "vue-inset-loader"
// // 针对Hbuilder工具创建的uni-app项目
loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
},
}]
},
}
}
4. Create components
5. Globally import components into global registration, which can be in mian.js
// 全局自定义loading
import loading from '@/components/global/loading.vue';
Vue.component('loading', loading)
6. Configure insetLoader in the pages.json file
"insetLoader": {
//配置
"config": {
//将需要引入的组件名起了个loading的名字在下面label中使用
//右侧"<loading ref='loading' />"为需要插入的组件标签
"loading": "<loading ref='loadingView' />"
},
// 全局配置
//需要挂在的组件名
"label": ["loading"],
//根元素的标签类型 也就是插入到页面哪个根元素下默认为div 但是uniapp中需要写为view
"rootEle": "view"
}
At the same time, we can also import it separately in a certain route.
"pages": [
{
"path": "pages/index/index", // 路由页面
"aliasPath":"/", //对于h5端你必须在首页加上aliasPath并设置为/
"name": "index",
"style": {
"disableScroll": true // 设置为 true 则页面整体不能上下滚动（bounce
}
//单独配置，用法跟全局配置一致，优先级高于全局
"label": ["confirm"],
"rootEle": "view"
},
]
6. Then we use it in a public way of repackaging
// loading提示
Vue.prototype.$loading=async function(obj){
// #ifndef H5
this.$refs.loadingView.show(obj)
// #endif
}
Vue.prototype.$hideLoading=function(){
if(this.$refs.loadingView){
this.$refs.loadingView.close()
}
}
3. If it is on the h5 page, we need to use the dynamic mount component that comes with vue, so we need to add a judgment
// vue 新增组件
const addH5component= function(url,name){
return new Promise(async (r,_)=>{
const idName = 'loading_new_custom_' + new Date().getTime() + '_' + parseInt(Math.random() * 1000)
const customComponent = url.default
const customComponentCom = Vue.component('confirmDialog', customComponent)// 创建组件
const customComponentComNew = new customComponentCom()// 创建组件实例（可以传递参数 { propsData: props }）
const DOM = document.createElement('div')
DOM.setAttribute('class', `confirmDialog_new_custom ${
name}_component`)
DOM.setAttribute('id', idName)
document.body.appendChild(DOM)
const comp = customComponentComNew.$mount(DOM.appendChild(document.createElement('template')))// 将虚拟dom节点改变成真实dom,获取组件的dom节点,并实现挂载
comp.componentId=idName
r(comp)
})
}
// loading提示
Vue.prototype.$loading=async function(obj){
// #ifdef H5
if(!this.$refs.loadingView){
this.$refs['loadingView']=await addH5component(require('@/components/global/loading.vue'),'loadingView')
}
this.$refs.loadingView.show(obj)
// #endif
// #ifndef H5
this.$refs.loadingView.show(obj)
// #endif
}
Vue.prototype.$hideLoading=function(){
if(this.$refs.loadingView){
this.$refs.loadingView.close()
// #ifdef H5
// 删除组件
setTimeout(()=>{
document.querySelectorAll('.loadingView_component').forEach(item=>{
document.body.removeChild(item)
})
this.$refs.loadingView.$destroy()
},0)
// #endif
}
}