1.0.2 • Published 7 months ago

tnuiv3p-tn-color-select v1.0.2

Weekly downloads
-
License
Apache 2.0
Repository
github
Last release
7 months ago

图鸟 UI vue3 uniapp Plugins

TuniaoUI vue3 uniapp

Tuniao UI vue3官方仓库

该组件用于选择颜色

组件安装

npm i tnuiv3p-tn-color-select

组件位置

import TnColorSelect from 'tnuiv3p-tn-color-select/index.vue'

平台差异说明

App(vue)H5微信小程序支付宝小程序...
适配中

基础使用

  • 通过v-model绑定选择的颜色的值
<script setup lang="ts">
import { ref } from 'vue'

const color = ref('')
</script>

<template>
  <TnColorSelect v-model="color" />
</template>

设置颜色预览框的大小

  • 通过size设置颜色预览框的大小,预设的值有smlgxl,同时也可以传递自定义的值
<TnColorSelect v-model="color" size="sm" />
<TnColorSelect v-model="color" size="lg" />
<TnColorSelect v-model="color" size="xl" />
<TnColorSelect v-model="color" size="120rpx" />

API

Props

属性名说明类型默认值可选值
v-model/model-value选择颜色的值String#FF0000-
size颜色预览框的尺寸大小,可以使用可选值和指定的尺寸大小String-smlgxl
disabled禁用颜色选择器Booleanfalsetrue
validate-event值发生修改时是否触发表单验证Booleantruefalse

Emits

事件名说明类型
change颜色发生改变时触发(value: string) => void
1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago