ycwh/miniapp/pages/components/icon.vue

<template>
<view :style="[style]">
	<u--image :src="imgSrc" :width="imgWidth" :height="imgHeight" @click="clickImg" 
		:showMenuByLongpress="false"/>
</view>
</template>

<script>
export default {
	props: {
		img: String,
		size: [Number,String],//如果有宽和高，则size失效
		width: [Number,String],
		height: [Number,String],
		color: String,
		left: [Number,String],
		right: [Number,String],
	},
	computed: {
		imgWidth() {
			return parseInt(this.width || this.size) / 2
		},
		imgHeight() {
			return parseInt(this.height || this.size) / 2
		},
		imgSrc() {
			return '/static/images/icon/' + this.img + '.png'
		},
		style() {
			let style = {}
			if (this.color) {
				style.backgroundColor = this.color
			}
			if (this.left) {
				style.marginLeft = this.left + 'rpx'
			}
			if (this.right) {
				style.marginRight = this.right + 'rpx'
			}
			return style
		},
	},
	data() {
		return {
		}
	},
	methods: {
		clickImg() {
			this.$emit('click')
		},
	},
}
</script>

<style>
</style>