三、封装u-todo-item组件

todo组件采用了uniappx的list-view和list-item组件，其中list-item属性

名称	类型	默认值	描述
type	number	0	对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能

<template>
	<list-item :type="id" class="bg-white m-2 p-4 rounded-lg flex justify-between align-center animate-base"
		:class="[amplify,fadeout]">
		<view class="flex justify-between flex-1">
			<switch style="transform: scale(0.7);" :checked="ischecked" @change="switchChange"></switch>
			<text class="font-lg ml-1 flex-1">
				{{text}}
			</text>
		</view>
		<view>
			<u-icon :code="'\ue6a7'" color="gray" @click="destory(id)"></u-icon>
		</view>
	</list-item>
</template>

<script>
	import { CheckPayload } from "@/common/type.uts"
	export default {
		name: "u-todo-item",
		emits: ["destory", "switch"],
		data() {
			return {
				amplify: "",
				ischecked: false,
			};
		},
		props: {
			id: {
				type: String,
				required: true
			},
			text: {
				type: String,
				required: true
			},
			checked: {
				type: Boolean,
				required: true
			},
		},
		computed: {
			fadeout():string {
				return this.ischecked? "fadeout" : ""
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.amplify = "animate-amplify"
			})
		},
		created() {
			this.ischecked = this.checked
		},
		methods: {
			destory(id : string) {
				this.$emit("destory", id)
			},
			switchChange(e : SwitchChangeEvent) {
				const info : CheckPayload = {
					id: this.id,
					checked: e.detail.value
				}
				this.$emit("switch", info)
			}
		}
	}
</script>

<style>
	.animate-base {
		transform: scale(0.6);
		transition: transform 0.2s;
	}

	.animate-amplify {
		transform: scale(1);
		transition: transform 0.2s;
	}

	.fadeout {
		opacity: 0.6;
	}
</style>