组件库文档 tmui.design
颜色选择器 Colorview
颜色选择器
🌶️ 颜色选择器 Colorview 示例效果
查看模拟效果+
示例代码
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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ❌ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
color | String | white | 按钮主题颜色 |
modelValue | String | "#FF0000" | 当前的颜色值,可双向绑定v-model |
🌹 事件
事件名称 | 数据 | 类型 | 描述 |
---|---|---|---|
confirm | 颜色值 | rgba的string值 | 当前设置或者选择的颜色值 |
🌽 slot插槽
插槽名 | 数据 | 类型 | 描述 |
---|
无
🥗 ref方法
无