Tui-Plus4.0.0

Appearance

LuckyWheel (幸运大转盘) ​

canvas绘制，未完成

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page>
		<t-lucky-wheel :options="options"></t-lucky-wheel>
	</t-page>
</template>

<script setup>
	const options : UTSJSONObject[] = [
		{
			text: '一等奖',
			color: '#FF5252',
			fontSize: '',
			icon: '🏆',
			iconWidth: 0,
			iconHeight: 0
		},
		{
			text: '谢谢参与',
			color: '#FF4081',
			fontSize: '',
			icon: '😢',
			iconWidth: 0,
			iconHeight: 0
		},
		{
			text: '二等奖',
			color: '#E040FB',
			fontSize: '',
			icon: '🥈',
			iconWidth: 0,
			iconHeight: 0
		},
		{
			text: '优惠券',
			color: '#7C4DFF',
			fontSize: '',
			icon: '🎫',
			iconWidth: 0,
			iconHeight: 0
		},
		{
			text: '三等奖',
			color: '#536DFE',
			fontSize: '',
			icon: '🥉',
			iconWidth: 0,
			iconHeight: 0
		},
		// {
		// 	text: '谢谢参与',
		// 	color: '#448AFF',
		// 	fontSize: '',
		// 	icon: '😢',
		// 	iconWidth: 0,
		// 	iconHeight: 0
		// },
		// {
		// 	text: '四等奖',
		// 	color: '#40C4FF',
		// 	fontSize: '',
		// 	icon: '🎁',
		// 	iconWidth: 0,
		// 	iconHeight: 0
		// },
		// {
		// 	text: '折扣券',
		// 	color: '#18FFFF',
		// 	fontSize: '',
		// 	icon: '💳',
		// 	iconWidth: 0,
		// 	iconHeight: 0
		// },
		// {
		// 	text: '五等奖',
		// 	color: '#64FFDA',
		// 	fontSize: '',
		// 	icon: '🎯',
		// 	iconWidth: 0,
		// 	iconHeight: 0
		// },
		// {
		// 	text: '谢谢参与',
		// 	color: '#69F0AE',
		// 	fontSize: '',
		// 	icon: '😢',
		// 	iconWidth: 0,
		// 	iconHeight: 0
		// },
		// {
		// 	text: '六等奖',
		// 	color: '#B2FF59',
		// 	fontSize: '',
		// 	icon: '🎨',
		// 	iconWidth: 0,
		// 	iconHeight: 0
		// },
		// {
		// 	text: '代金券',
		// 	color: '#FFFF00',
		// 	fontSize: '',
		// 	icon: '💰',
		// 	iconWidth: 0,
		// 	iconHeight: 0
		// }
	]
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
optionsUTSJSONObject[][]绘制数据配置