uniapp实现的具备丝滑动画的标签工具栏模板

采用 uniapp 实现, 是一款具备丝滑动画的标签工具栏模板，支持 vue2、vue3；适配 web、H5、微信小程序（其他平台小程序未测试过，可自行尝试）
代码实现简约易懂，用户可根据自身需求下载模板，并进行扩展开发

可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=23810

• 示例
  

props 属性

defaultValue

默认高亮选项

defaultValue: {
    type: String,
    default: "unsplash",
},

orientation

设置工具栏排列方向，提供两种选项：horizontal、vertical

orientation: {
    type: String,
    default: "horizontal",
},

options

选项数组，必须具备 label、value、icon 字段

options: {
    type: Object,
    default: () => {
      return [
      { icon: "https://img.icons8.com/?size=100&id=56579&format=png&color=ffffff", label: "Unsplash", value: "unsplash" },
      { icon: "https://img.icons8.com/?size=100&id=890&format=png&color=ffffff", label: "iphone", value: "iphone" },
      { icon: "https://img.icons8.com/?size=100&id=12412&format=png&color=ffffff", label: "Browsers", value: "browsers" },
      { icon: "https://img.icons8.com/?size=100&id=118504&format=png&color=ffffff", label: "Facebook", value: "facebook" },
      ]
    }
  }

事件

@onChange

点击选项时触发，返回 options 中提供的点击的选项值，

使用示例

vue2 使用示例

<template>
	<view style="padding: 0.4em; font-size: 1.7em; height: 60vh;">
		<view class="flex-center">
				<view class="bg-circle">
					<ToolbarComp style="border-radius: inherit;" orientation="vertical"></ToolbarComp>
				</view>
			</view>
		<view class="flex-center" style="padding-top: 60px;">
			<view class="flex-center bg-circle">
				<ToolbarComp style="border-radius: inherit;" default-value="browsers"></ToolbarComp>
			</view>
		</view>
		<view class="flex-center" style="padding-top: 60px; width: 100%;">
			<view style="width: 100%;" class="flex-center bg-circle">
				<ToolbarComp style="border-radius: inherit;" default-value="iphone" :options="toolbarOptions" @onChange="handleChange"></ToolbarComp>
			</view>
		</view>
		<view class="flex-center" style="padding-top: 60px; width: 100%;">
			<view style="width: 100%;" class="flex-center bg-react">
				<ToolbarComp style="border-radius: inherit;" default-value="facebook" :options="toolbarOptions"></ToolbarComp>
			</view>
		</view>
	</view>
</template>

<script>
import ToolbarComp from './comp/toolbarComp.vue';
export default {
	components: {
		ToolbarComp
	},
	data() {
		return {
			toolbarOptions: [
        { icon: "https://img.icons8.com/?size=100&id=56579&format=png&color=ffffff", label: "Unsplash", value: "unsplash" },
        { icon: "https://img.icons8.com/?size=100&id=890&format=png&color=ffffff", label: "iphone", value: "iphone" },
        { icon: "https://img.icons8.com/?size=100&id=12412&format=png&color=ffffff", label: "Browsers", value: "browsers" },
        { icon: "https://img.icons8.com/?size=100&id=118504&format=png&color=ffffff", label: "Facebook", value: "facebook" },
        { icon: "https://img.icons8.com/?size=100&id=3529&format=png&color=ffffff", label: "Pinterest", value: "pinterest" },
      ]
		}
	},
	methods: {
		handleChange(e) {
			console.log('selected：', e);
		}
	}
}
</script>

<style scoped>
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.bg-circle {
	background-color: hsl(0, 0%, 10%);
	border-radius: 1em;
}
.bg-react {
	background-color: hsl(0, 0%, 10%);
	border-radius: 0.4em;
}
</style>

vue3 使用示例

<template>
	<view style="padding: 0.4em; font-size: 1.7em; height: 60vh;">
			<view class="flex-center">
					<view class="bg-circle">
							<ToolbarComp style="border-radius: inherit;" orientation="vertical"></ToolbarComp>
					</view>
			</view>
			<view class="flex-center" style="padding-top: 60px;">
					<view class="flex-center bg-circle">
							<ToolbarComp style="border-radius: inherit;" default-value="browsers"></ToolbarComp>
					</view>
			</view>
			<view class="flex-center" style="padding-top: 60px; width: 100%;">
					<view style="width: 100%;" class="flex-center bg-circle">
							<ToolbarComp style="border-radius: inherit;" default-value="iphone" :options="toolbarOptions" @onChange="handleChange"></ToolbarComp>
					</view>
			</view>
			<view class="flex-center" style="padding-top: 60px; width: 100%;">
					<view style="width: 100%;" class="flex-center bg-react">
							<ToolbarComp style="border-radius: inherit;" default-value="facebook" :options="toolbarOptions"></ToolbarComp>
					</view>
			</view>
	</view>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import ToolbarComp from './comp/toolbarComp.vue';

export default defineComponent({
	components: {
			ToolbarComp
	},
	setup() {
			const toolbarOptions = reactive([
					{ icon: "https://img.icons8.com/?size=100&id=56579&format=png&color=ffffff", label: "Unsplash", value: "unsplash" },
					{ icon: "https://img.icons8.com/?size=100&id=890&format=png&color=ffffff", label: "iphone", value: "iphone" },
					{ icon: "https://img.icons8.com/?size=100&id=12412&format=png&color=ffffff", label: "Browsers", value: "browsers" },
					{ icon: "https://img.icons8.com/?size=100&id=118504&format=png&color=ffffff", label: "Facebook", value: "facebook" },
					{ icon: "https://img.icons8.com/?size=100&id=3529&format=png&color=ffffff", label: "Pinterest", value: "pinterest" },
			]);

			const handleChange = (e) => {
					console.log('selected：', e);
			};

			return {
					toolbarOptions,
					handleChange
			};
	}
});
</script>

<style scoped>
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.bg-circle {
	background-color: hsl(0, 0%, 10%);
	border-radius: 1em;
}
.bg-react {
	background-color: hsl(0, 0%, 10%);
	border-radius: 0.4em;
}
</style>