Skip to content
On this page

组件库文档 tmui.design

卡片 Colorview

颜色选择器


🌶️ 卡片 Card 示例效果

查看模拟效果
示例代码
vue
<template>
    <tm-app>
        <tm-sheet>
			<tm-text label="颜色选择器,全端兼容.因实现兼容有点小复杂,故属性上我虽然提供了宽和高.但实际上没有用处.也请不要随意赋值.固定值即可.如果确实需要更改宽和高,请自行修改源码."></tm-text>
			<tm-text color="red" label="暂时还未实现双向绑定定位颜色位置功能."></tm-text>
			<tm-text :label="colorName"></tm-text>
			<tm-divider></tm-divider>
		</tm-sheet>
        <view class="pa-32 flex flex-row flex-row-center-center">
            <tm-color-view v-model="colorName"></tm-color-view>
        </view>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmCodeinput from "@/tmui/components/tm-codeinput/tm-codeinput.vue"
import tmKeyborad from "@/tmui/components/tm-keyborad/tm-keyborad.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmColorView from "@/tmui/components/tm-color-view/tm-color-view.vue"
const colorName = ref("#00FF00")

</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
colorStringwhite按钮主题颜色
modelValueString"#FF0000"当前的颜色值,可双向绑定v-model

🌹 事件

事件名称数据类型描述
confirm颜色值rgba的string值当前设置或者选择的颜色值

🌽 slot插槽

插槽名数据类型描述

🥗 ref方法