admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ Checkbox 新增toggle方法

Browse Source 
✅ Closes: #239
This commit is contained in:
weisheng 2024-04-12 12:46:21 +08:00 committed by 不如摸鱼去
parent 742b4d6525
commit 6ec0397bc9
4 changed files with 151 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
docs/component/checkbox.md
View File

@ -2,18 +2,18 @@
# Checkbox 复选框
## 基本用法
`value` 为绑定值，通过 `v-model` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。
通过 `v-model` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。
```html
<wd-checkbox v-model="value" @change="handleChange">单选框1</wd-checkbox>
```
```typescript
const value = ref<boolean>(true)
function handleChange1({value}) {
function handleChange1({ value }) {
console.log(value)
}
```
@ -32,16 +32,11 @@ function handleChange1({value}) {
设置 `checked-color` 属性。
```html
<wd-checkbox
v-model="value"
checked-color="#f00"
>
沃特
</wd-checkbox>
<wd-checkbox v-model="value" checked-color="#f00">沃特</wd-checkbox>
```
```typescript
const value = ref<boolean>(true)
```
## 修改选中和非选中的值
@ -49,13 +44,7 @@ const value = ref<boolean>(true)
设置 `true-value` 和 `false-value` 修改选中值和非选中值。如果不设置，`change`事件的参数 默认为 `true` 和 `false` 切换。
```html
<wd-checkbox
:modelValue="true"
true-value="沃特"
false-value="商家后台"
>
复选框
</wd-checkbox>
<wd-checkbox :modelValue="true" true-value="沃特" false-value="商家后台">复选框</wd-checkbox>
```
## 复选框组
@ -68,6 +57,7 @@ const value = ref<boolean>(true)
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
```
```typescript
const value = ref<number[]>([])
```
@ -75,7 +65,6 @@ const value = ref<number[]>([])
设置 `cell` 属性，开启表单模式复选框组。
```html
<wd-checkbox-group v-model="value1" cell>
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
@ -131,6 +120,7 @@ const value = ref(['jingmai'])
```typescript
const value = ref(['jingmai'])
```
## 设置选中数量的上限和下限
`min` 属性设置最小选中的数量，`max` 属性设置最大选中的数量。如果要默认设置某个选项固定被选中，则给该复选框设置 disabled，且 `value` 中有该选项的值。
@ -143,9 +133,9 @@ const value = ref(['jingmai'])
<wd-checkbox modelValue="market">营销中心</wd-checkbox>
</wd-checkbox-group>
```
```typescript
const value = ref(['jd'])
```
## 尺寸
@ -159,61 +149,108 @@ const value = ref(['jd'])
</wd-checkbox-group>
```
## 结合 Cell 使用
通过 `Checkbox` 实例上的 `toggle` 方法触发选中状态切换。
```html
<wd-cell-group border>
<wd-checkbox-group v-model="value" size="large">
<wd-cell title="点赞" center clickable @click="handleCheck1">
<view @click.stop="noop">
<wd-checkbox model-value="1" ref="checkBox1" custom-style="margin:0;"></wd-checkbox>
</view>
</wd-cell>
<wd-cell title="投币" center clickable @click="handleCheck2">
<view @click.stop="noop">
<wd-checkbox model-value="2" ref="checkBox2" custom-style="margin:0;"></wd-checkbox>
</view>
</wd-cell>
<wd-cell title="一键三连" center clickable @click="handleCheck3">
<view @click.stop="noop">
<wd-checkbox model-value="3" ref="checkBox3" custom-style="margin:0;"></wd-checkbox>
</view>
</wd-cell>
</wd-checkbox-group>
</wd-cell-group>
```
```ts
import { ref } from 'vue'
const value = ref<string[]>([])
const checkBox1 = ref<CheckboxInstance>()
const checkBox2 = ref<CheckboxInstance>()
const checkBox3 = ref<CheckboxInstance>()
function handleCheck1() {
checkBox1.value && checkBox1.value.toggle()
}
function handleCheck2() {
checkBox2.value && checkBox2.value.toggle()
}
function handleCheck3() {
checkBox3.value && checkBox3.value.toggle()
}
function noop() {}
```
## Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|--------|
| v-model | 单选框选中时的值 | string / number / boolean | - | - | - |
| shape | 单选框形状 | string | circle / square / button | circle | - |
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
| disabled | 禁用 | boolean | - | false | - |
| max-width | 文字位置最大宽度 | string | - | - | - |
| true-value | 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用 | string / number | - | true | - |
| false-value | 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用 | string /number | - | false | - |
| size | 设置大小 | string | large | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------- | -------------------------------------------------------------------- | ------------------------- | ------------------------ | ------- | -------- |
| v-model | 单选框选中时的值 | string / number / boolean | - | - | - |
| shape | 单选框形状 | string | circle / square / button | circle | - |
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
| disabled | 禁用 | boolean | - | false | - |
| max-width | 文字位置最大宽度 | string | - | - | - |
| true-value | 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用 | string / number | - | true | - |
| false-value | 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用 | string /number | - | false | - |
| size | 设置大小 | string | large | - | - |
## CheckboxGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
| v-model | 绑定值 | Array | - | - | - |
| shape | 单选框形状 | string | circle / square / button | circle | - |
| cell | 表单模式 | boolean | - | false | - |
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
| disabled | 禁用 | boolean | - | false | - |
| min | 最小选中的数量 | number | - | 0 | - |
| max | 最大选中的数量，0 为无限数量，默认为 0 | number | - | 0 | - |
| inline | 同行展示 | boolean | - | false | - |
| size | 设置大小 | string | large | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------- | -------------------------------------- | ------- | ------------------------ | ------- | -------- |
| v-model | 绑定值 | Array | - | - | - |
| shape | 单选框形状 | string | circle / square / button | circle | - |
| cell | 表单模式 | boolean | - | false | - |
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
| disabled | 禁用 | boolean | - | false | - |
| min | 最小选中的数量 | number | - | 0 | - |
| max | 最大选中的数量，0 为无限数量，默认为 0 | number | - | 0 | - |
| inline | 同行展示 | boolean | - | false | - |
| size | 设置大小 | string | large | - | - |
## Checkbox Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| toggle | 切换当前选中状态,同时触发change事件 | - | - |
| 方法名称 | 说明 | 参数 | 最低版本 |
| -------- | ------------------------------------- | ---- | -------- |
| toggle | 切换当前选中状态,同时触发 change 事件 | - | 1.2.16 |
## Checkbox Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| change | 绑定值变化时触发，当为复选框组时参数为boolean，表示该复选框是否选中 | `{ value }` | - |
| 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | -------------------------------------------------------------------- | ----------- | -------- |
| change | 绑定值变化时触发，当为复选框组时参数为 boolean，表示该复选框是否选中 | `{ value }` | - |
## CheckboxGroup Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| change | 绑定值变化时触发 | `{ value }` | - |
| 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | ---------------- | ----------- | -------- |
| change | 绑定值变化时触发 | `{ value }` | - |
## Checkbox 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
| custom-class | 根节点样式 | - |
| custom-label-class | 文字结点样式 | - |
| custom-shape-class | 单选图标结点样式 | - |
| 类名 | 说明 | 最低版本 |
| ------------------ | ---------------- | -------- |
| custom-class | 根节点样式 | - |
| custom-label-class | 文字结点样式 | - |
| custom-shape-class | 单选图标结点样式 | - |
## CheckboxGroup 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | 根节点样式 | - |
| 类名 | 说明 | 最低版本 |
| ------------ | ---------- | -------- |
| custom-class | 根节点样式 | - |

42
src/pages/checkbox/Index.vue
View File

@ -87,11 +87,51 @@
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="结合Cell使用" transparent>
<wd-cell-group border>
<wd-checkbox-group v-model="value10" size="large">
<wd-cell title="点赞" center clickable @click="handleCheck1">
<view @click.stop="noop">
<wd-checkbox model-value="1" ref="checkBox1" custom-style="margin:0;"></wd-checkbox>
</view>
</wd-cell>
<wd-cell title="投币" center clickable @click="handleCheck2">
<view @click.stop="noop">
<wd-checkbox model-value="2" ref="checkBox2" custom-style="margin:0;"></wd-checkbox>
</view>
</wd-cell>
<wd-cell title="一键三连" center clickable @click="handleCheck3">
<view @click.stop="noop">
<wd-checkbox model-value="3" ref="checkBox3" custom-style="margin:0;"></wd-checkbox>
</view>
</wd-cell>
</wd-checkbox-group>
</wd-cell-group>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import type { CheckboxInstance } from '@/uni_modules/wot-design-uni/components/wd-checkbox/types'
import { ref } from 'vue'
const checkBox1 = ref<CheckboxInstance>()
const checkBox2 = ref<CheckboxInstance>()
const checkBox3 = ref<CheckboxInstance>()
function handleCheck1() {
checkBox1.value && checkBox1.value.toggle()
}
function handleCheck2() {
checkBox2.value && checkBox2.value.toggle()
}
function handleCheck3() {
checkBox3.value && checkBox3.value.toggle()
}
function noop() {}
const check1 = ref<boolean>(true)
const check2 = ref<boolean>(true)
const check3 = ref<boolean>(true)
@ -99,6 +139,8 @@ const check4 = ref<boolean>(true)
const check5 = ref<boolean>(true)
const check6 = ref<boolean>(true)
const value0 = ref<number[]>([1, 2, 3])
const value1 = ref<number[]>([1, 3])
const value2 = ref<number[]>([1])
const value3 = ref<string>('沃特')

11
src/uni_modules/wot-design-uni/components/wd-checkbox/types.ts
View File

@ -1,4 +1,4 @@
import type { ExtractPropTypes, PropType } from 'vue'
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeStringProp } from '../common/props'
export type CheckShape = 'circle' | 'square' | 'button'
@ -55,3 +55,12 @@ export const checkboxProps = {
}
export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
export type CheckboxExpose = {
/**
* 切换当前选中状态
*/
toggle: () => void
}
export type CheckboxInstance = ComponentPublicInstance<CheckboxProps, CheckboxExpose>

6
src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue
View File

@ -47,11 +47,15 @@ import { computed, getCurrentInstance, onBeforeMount, watch } from 'vue'
import { useParent } from '../composables/useParent'
import { CHECKBOX_GROUP_KEY } from '../wd-checkbox-group/types'
import { isDef } from '../common/util'
import { checkboxProps } from './types'
import { checkboxProps, type CheckboxExpose } from './types'
const props = defineProps(checkboxProps)
const emit = defineEmits(['change', 'update:modelValue'])
defineExpose<CheckboxExpose>({
toggle
})
const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
const isChecked = computed(() => {