chore: initialize qiming workspace repository
This commit is contained in:
Codex
258
qiming-mobile/uni_modules/lime-checkbox/readme_old.md
Normal file
258
qiming-mobile/uni_modules/lime-checkbox/readme_old.md
Normal file
@@ -0,0 +1,258 @@
|
||||
# lime-checkbox 复选框
|
||||
复选框，支持v-model双向数据绑定，支持自定义样式，兼容uniapp/uniappx
|
||||
|
||||
## 文档
|
||||
🚀 [checkbox【站点1】](https://limex.qcoon.cn/components/checkbox.html)
|
||||
🌍 [checkbox【站点2】](https://limeui.netlify.app/components/checkbox.html)
|
||||
🔥 [checkbox【站点3】](https://limeui.familyzone.top/components/checkbox.html)
|
||||
|
||||
|
||||
|
||||
## 安装
|
||||
插件市场导入即可，首次导入可能需要重新编译
|
||||
|
||||
## 代码演示
|
||||
### 基础演示
|
||||
通过 `v-model` 绑定复选框的勾选状态。
|
||||
```html
|
||||
<l-checkbox v-model="checked">复选框</l-checkbox>
|
||||
```
|
||||
```js
|
||||
const checked = ref(false)
|
||||
```
|
||||
|
||||
|
||||
### 选项组
|
||||
通过 v-model 绑定值当前选中项的 `value`或`name`。
|
||||
```html
|
||||
<l-checkbox-group v-model="checked" @change="onChange">
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Shanghai" label="上海" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
```
|
||||
```js
|
||||
const checked = ref(['Beijing']);
|
||||
|
||||
const onChange = (e: string[]) => {
|
||||
console.log('onChange', e)
|
||||
}
|
||||
```
|
||||
|
||||
### 禁用
|
||||
通过 `disabled` 属性禁止选项切换，在 checkbox 上设置 `disabled` 可以禁用单个选项。
|
||||
```html
|
||||
<l-checkbox-group v-model="checked" disabled>
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Shanghai" label="上海" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
```
|
||||
|
||||
### 样式
|
||||
`icon` 属性可选值为`circle`(圆) `line`(线) `dot`(点)，复选框形状。
|
||||
```html
|
||||
<l-checkbox-group icon="dot">
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
<l-checkbox-group icon="circle">
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
<l-checkbox-group icon="line">
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
通过 `checked-color` 属性设置选中状态的图标颜色。
|
||||
```html
|
||||
<l-checkbox-group checked-color="#ee0a24">
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
```
|
||||
|
||||
### 自定义大小
|
||||
通过 `icon-size` 属性可以自定义图标的大小。
|
||||
```html
|
||||
<l-checkbox-group>
|
||||
<l-checkbox icon-size="44px" value="Beijing" label="北京" />
|
||||
<l-checkbox icon-size="34px" value="Guangzhou" label="广州" />
|
||||
<l-checkbox icon-size="24px" value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 `icon` 插槽自定义图标，并通过 `slotProps` 判断是否为选中状态。
|
||||
```html
|
||||
<l-checkbox-group>
|
||||
<l-checkbox value="Beijing" label="北京">
|
||||
<template #icon="{checked}">
|
||||
<image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
|
||||
<image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
|
||||
</template>
|
||||
</l-checkbox>
|
||||
<l-checkbox value="Guangzhou" label="广州">
|
||||
<template #icon="{checked}">
|
||||
<image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
|
||||
<image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
|
||||
</template>
|
||||
</l-checkbox>
|
||||
<l-checkbox value="Shenzen" label="深圳">
|
||||
<template #icon="{checked}">
|
||||
<image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
|
||||
<image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
|
||||
</template>
|
||||
</l-checkbox>
|
||||
</l-checkbox-group>
|
||||
```
|
||||
|
||||
|
||||
### 限制最大可选数
|
||||
通过 `max` 属性可以限制复选框组的最大可选数。
|
||||
```html
|
||||
<l-checkbox-group :max="3">
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Shanghai" label="上海" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
```
|
||||
|
||||
### 全选与反选
|
||||
通过 `CheckboxGroup` 实例上的 `toggleAll` 方法可以实现全选与反选。
|
||||
```html
|
||||
<l-checkbox-group ref="checkboxGroupRef" @change="onChange" direction="vertical">
|
||||
<l-checkbox value="all" checkAll label="全选" />
|
||||
<l-checkbox value="Beijing" label="北京" />
|
||||
<l-checkbox value="Shanghai" label="上海" />
|
||||
<l-checkbox value="Guangzhou" label="广州" />
|
||||
<l-checkbox value="Shenzen" label="深圳" />
|
||||
</l-checkbox-group>
|
||||
<button type="primary" @click="checkAll">全选</button>
|
||||
<button @click="toggleAll">反选</button>
|
||||
```
|
||||
```js
|
||||
const checkboxGroupRef = ref<LCheckboxGroupComponentPublicInstance|null>(null);
|
||||
const onChange = (e: string[]) => {
|
||||
console.log('onChange', e)
|
||||
}
|
||||
const checkAll = () => {
|
||||
if(checkboxGroupRef.value == null) return
|
||||
checkboxGroupRef.value!.toggleAll(true)
|
||||
}
|
||||
const toggleAll = () => {
|
||||
if(checkboxGroupRef.value == null) return
|
||||
checkboxGroupRef.value!.toggleAll(false)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 插件标签
|
||||
`l-checkbox` 为 component
|
||||
`lime-checkbox` 为 demo
|
||||
|
||||
### Vue2使用
|
||||
插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
|
||||
关键代码是: 在main.js中 在vue2部分加上这一段即可
|
||||
|
||||
```js
|
||||
// vue2
|
||||
import Vue from 'vue'
|
||||
import VueCompositionAPI from '@vue/composition-api'
|
||||
Vue.use(VueCompositionAPI)
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Checkbox Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标识符，通常为一个唯一的字符串或数字 | _string\|number_ | - |
|
||||
| value | 复选按钮的值 | _any_ | - |
|
||||
| v-model | 是否选中 | _any_ | - |
|
||||
| indeterminate | 是否为半选 | _boolean_ | `false` |
|
||||
| checked | 是否选中 | _boolean_ | `false` |
|
||||
| disabled | 是否为禁用态 | _boolean_ | `false` |
|
||||
| readonly | 是否为只读 | _boolean_ | `false` |
|
||||
| checkAll | 用于标识是否为「全选选项」。复独使用无效 | _boolean_ | `false` |
|
||||
| icon | 自定义选中图标和非选中图标可选值`'rectangle' | 'circle' | 'line' | 'dot'` | _string_ | `rectangle` |
|
||||
| label | 主文案 | _string_ | `` |
|
||||
| fontSize | 文本大小 | _string_ | `` |
|
||||
| iconSize | 图标大小 | _string_ | `` |
|
||||
| checkedColor | 选中状态颜色 | _string_ | `` |
|
||||
| iconBgColor | 图标背景颜色 | _string_ | `` |
|
||||
| iconBorderColor | 图标描边颜色 | _string_ | `` |
|
||||
| iconDisabledColor | 图标禁用颜色 | _string_ | `` |
|
||||
| iconDisabledBgColor | 图标禁用背景颜色 | _string_ | `` |
|
||||
| labelStyle | label的样式 | _string\|object | `` |
|
||||
|
||||
### CheckboxGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | 标识符，通常为一个唯一的字符串或数字 | _string\|number[]_ | - |
|
||||
| name | 标识符，通常为一个唯一的字符串或数字 | _string\|number_ | - |
|
||||
| value | 复选按钮的值 | _any[]_ | - |
|
||||
| indeterminate | 是否为半选 | _boolean_ | `false` |
|
||||
| disabled | 是否为禁用态 | _boolean_ | `false` |
|
||||
| direction | 排列方向，可选值为`vertical` | _string_ | `horizontal` |
|
||||
| icon | 自定义选中图标和非选中图标可选值`'rectangle' | 'circle' | 'line' | 'dot'` | _string_ | `rectangle` |
|
||||
| fontSize | 文本大小 | _string_ | `` |
|
||||
| iconSize | 图标大小 | _string_ | `` |
|
||||
| checkedColor | 选中状态颜色 | _string_ | `` |
|
||||
| iconBgColor | 图标背景颜色 | _string_ | `` |
|
||||
| iconBorderColor | 图标描边颜色 | _string_ | `` |
|
||||
| iconDisabledColor | 图标禁用颜色 | _string_ | `` |
|
||||
| iconDisabledBgColor | 图标禁用背景颜色 | _string_ | `` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------------ | ---------------------- |
|
||||
| change | 当绑定值变化时触发的事件 | _currentValue: any_ |
|
||||
|
||||
|
||||
### Radio Slots
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------------ | ---------------------- |
|
||||
| default | 自定义文本 | _{ checked: boolean, disabled: boolean }_ |
|
||||
| icon | 自定义图标 | _{ checked: boolean, disabled: boolean }_ |
|
||||
|
||||
|
||||
## 主题定制
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------ | -------------------- | ---- |
|
||||
| --l-checkbox-icon-size | _40rpx_ | - |
|
||||
| --l-checkbox-font-size | _32rpx_ | - |
|
||||
| --l-checkbox-icon-bg-color | _white_ | - |
|
||||
| --l-checkbox-border-icon-color | _$gray-5_ | - |
|
||||
| --l-checkbox-icon-disabled-color | _$gray-5_ | - |
|
||||
| --l-checkbox-icon-disabled-bg-color | _$gray-1_ | - |
|
||||
| --l-checkbox-icon-checked-color | _$primary-color_ | - |
|
||||
|
||||
|
||||
## 打赏
|
||||
|
||||
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user