标签排序

对应小程序中 效果举例>标签排序

<template>
	<su-drag ref="sudrag"
		v-model="dataList"  
		:columns="4" 
		itemMargin="5px"
		custom-after-class="custom-class"
		custom-class="custom-class" 
		@start="start"
		@update="update"
		@end="end"
		>
		<template #default={data}>
			{{data.name}}	
			<view class="close-button" @click.stop="sudrag?.deleteItem(data.id)">
				<uni-icons type="closeempty" size="10" color="#fff"></uni-icons>
			</view>
		</template>
		<template #after>
			<view @click="addItem">
				<uni-icons type="plusempty" size="17"></uni-icons>
			</view>
		</template>
	</su-drag>
</template>
<script setup>
	import { ref } from 'vue';
	const sudrag = ref(null)
	const dataList = ref([
		{ id: 1, name: "推荐" },
		{ id: 2, name: "关注" },
		{ id: 3, name: "精选" },
		{ id: 4, name: "同城" },
		{ id: 5, name: "团购" },
		{ id: 6, name: "商城" },
		{ id: 7, name: "热点" },
		{ id: 8, name: "直播" }
	])
	
	function addItem(){
		sudrag.value?.addItem({id: Date.now(), name: "新增"})
	}
	function start(event, index) {
		console.log("start", event, index);
	}
	function update(event, index) {
		console.log("update", event, index);
	}
	function end(event, index) {
		console.log("end", event, index);
	}
</script>
<style lang="scss" scoped>
	:deep() {
		.custom-class {
			background-color: #fff;
			text-align: center;
			height: 35px;
			line-height: 35px;
			border-radius: 10px;
			position: relative;
			box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
		}
	}
</style>
<style lang="scss">
	.close-button {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #b5bcbf;
		width: 20px;
		height: 20px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		box-sizing: border-box;
		border: 1px solid #fff;
	}
</style>