记录使用uniapp easycom 全局组件

记录使用uniapp easycom

在官网中是这样表述的，传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目根目录或uni_modules的components目录下，并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用

 "easycom": { 
				"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
		}, 

---

创建组件：

首先我在components，中创建jz目录并创建一个jz-avatar的文件，代码如下.

<template>
	<view class="jz-avatar">
		<image v-if="show" :src="url" mode="widthFix" @error="handleImageLoadError"></image>
		<image  v-else :src="errorUrl||defaultHeadImg" mode="widthFix" @error="handleImageLoadError"></image>
	</view>
</template>

<script>
	export default{
		props:{
			url:{
				type:String,
				default:''
			},
			errorUrl:{
				type:String,
				default:''
			}
		},
		computed:{
			defaultHeadImg(){
				return this.$store.state.defaultHeadImg
			}
		},
		data(){
			return{
				show:true
			}
		},
		methods:{
			/**
			 * 图片加载失败
			 */
			handleImageLoadError(){
				this.show=false
			}
		}
	}
</script>

<style scoped lang="scss">
	.jz-avatar{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
</style>

然后在pages.json 中写入，easycom中可以使用正则表达式

"easycom": { 
				"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
				"jz-(.*)":"@/components/jz/jz-$1.vue"
		},