Skip to content

Commit 6ec0397

Browse files
MoonofweishengMoonofweisheng
committed
feat: ✨ Checkbox 新增toggle方法
✅ Closes: #239
1 parent 742b4d6 commit 6ec0397

File tree

4 files changed

+151
-59
lines changed

4 files changed

+151
-59
lines changed

‎docs/component/checkbox.md‎

Lines changed: 94 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22

33
# Checkbox 复选框
44

5-
65
## 基本用法
76

8-
`value` 为绑定值，通过 `v-model` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。
7+
通过 `v-model` 绑定复选框的勾选状态，单独使用时值为 `boolean` 类型。
98

109
```html
1110
<wd-checkbox v-model="value" @change="handleChange">单选框1</wd-checkbox>
1211
```
12+
1313
```typescript
1414
const value = ref<boolean>(true)
1515

16-
function handleChange1({value}) {
16+
function handleChange1({ value }) {
1717
console.log(value)
1818
}
1919
```
@@ -32,30 +32,19 @@ function handleChange1({value}) {
3232
设置 `checked-color` 属性。
3333

3434
```html
35-
<wd-checkbox
36-
v-model="value"
37-
checked-color="#f00"
38-
>
39-
沃特
40-
</wd-checkbox>
35+
<wd-checkbox v-model="value" checked-color="#f00">沃特</wd-checkbox>
4136
```
37+
4238
```typescript
4339
const value = ref<boolean>(true)
44-
4540
```
4641

4742
## 修改选中和非选中的值
4843

4944
设置 `true-value` 和 `false-value` 修改选中值和非选中值。如果不设置，`change`事件的参数 默认为 `true` 和 `false` 切换。
5045

5146
```html
52-
<wd-checkbox
53-
:modelValue="true"
54-
true-value="沃特"
55-
false-value="商家后台"
56-
>
57-
复选框
58-
</wd-checkbox>
47+
<wd-checkbox :modelValue="true" true-value="沃特" false-value="商家后台">复选框</wd-checkbox>
5948
```
6049

6150
## 复选框组
@@ -68,14 +57,14 @@ const value = ref<boolean>(true)
6857
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
6958
</wd-checkbox-group>
7059
```
60+
7161
```typescript
7262
const value = ref<number[]>([])
7363
```
7464

7565
设置 `cell` 属性，开启表单模式复选框组。
7666

7767
```html
78-
7968
<wd-checkbox-group v-model="value1" cell>
8069
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
8170
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
@@ -131,6 +120,7 @@ const value = ref(['jingmai'])
131120
```typescript
132121
const value = ref(['jingmai'])
133122
```
123+
134124
## 设置选中数量的上限和下限
135125

136126
`min` 属性设置最小选中的数量，`max` 属性设置最大选中的数量。如果要默认设置某个选项固定被选中，则给该复选框设置 disabled，且 `value` 中有该选项的值。
@@ -143,9 +133,9 @@ const value = ref(['jingmai'])
143133
<wd-checkbox modelValue="market">营销中心</wd-checkbox>
144134
</wd-checkbox-group>
145135
```
136+
146137
```typescript
147138
const value = ref(['jd'])
148-
149139
```
150140

151141
## 尺寸
@@ -159,61 +149,108 @@ const value = ref(['jd'])
159149
</wd-checkbox-group>
160150
```
161151

152+
## 结合 Cell 使用
153+
154+
通过 `Checkbox` 实例上的 `toggle` 方法触发选中状态切换。
155+
156+
```html
157+
<wd-cell-group border>
158+
<wd-checkbox-group v-model="value" size="large">
159+
<wd-cell title="点赞" center clickable @click="handleCheck1">
160+
<view @click.stop="noop">
161+
<wd-checkbox model-value="1" ref="checkBox1" custom-style="margin:0;"></wd-checkbox>
162+
</view>
163+
</wd-cell>
164+
<wd-cell title="投币" center clickable @click="handleCheck2">
165+
<view @click.stop="noop">
166+
<wd-checkbox model-value="2" ref="checkBox2" custom-style="margin:0;"></wd-checkbox>
167+
</view>
168+
</wd-cell>
169+
<wd-cell title="一键三连" center clickable @click="handleCheck3">
170+
<view @click.stop="noop">
171+
<wd-checkbox model-value="3" ref="checkBox3" custom-style="margin:0;"></wd-checkbox>
172+
</view>
173+
</wd-cell>
174+
</wd-checkbox-group>
175+
</wd-cell-group>
176+
```
177+
178+
```ts
179+
import { ref } from 'vue'
180+
const value = ref<string[]>([])
181+
const checkBox1 = ref<CheckboxInstance>()
182+
const checkBox2 = ref<CheckboxInstance>()
183+
const checkBox3 = ref<CheckboxInstance>()
184+
185+
function handleCheck1() {
186+
checkBox1.value && checkBox1.value.toggle()
187+
}
188+
189+
function handleCheck2() {
190+
checkBox2.value && checkBox2.value.toggle()
191+
}
192+
function handleCheck3() {
193+
checkBox3.value && checkBox3.value.toggle()
194+
}
195+
196+
function noop() {}
197+
```
198+
162199
## Checkbox Attributes
163200

164-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
165-
|-----|-----|------|-------|-------|--------|
166-
| v-model | 单选框选中时的值 | string / number / boolean | - | - | - |
167-
| shape | 单选框形状 | string | circle / square / button | circle | - |
168-
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
169-
| disabled | 禁用 | boolean | - | false | - |
170-
| max-width | 文字位置最大宽度 | string | - | - | - |
171-
| true-value | 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用 | string / number | - | true | - |
172-
| false-value | 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用 | string /number | - | false | - |
173-
| size | 设置大小 | string | large | - | - |
201+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
202+
| ------------- | -------------------------------------------------------------------- | ------------------------- | ------------------------ | ------- | -------- |
203+
| v-model | 单选框选中时的值 | string / number / boolean | - | - | - |
204+
| shape | 单选框形状 | string | circle / square / button | circle | - |
205+
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
206+
| disabled | 禁用 | boolean | - | false | - |
207+
| max-width | 文字位置最大宽度 | string | - | - | - |
208+
| true-value | 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用 | string / number | - | true | - |
209+
| false-value | 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用 | string /number | - | false | - |
210+
| size | 设置大小 | string | large | - | - |
174211

175212
## CheckboxGroup Attributes
176213

177-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
178-
|-----|------|-----|-------|-------|--------|
179-
| v-model | 绑定值 | Array | - | - | - |
180-
| shape | 单选框形状 | string | circle / square / button | circle | - |
181-
| cell | 表单模式 | boolean | - | false | - |
182-
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
183-
| disabled | 禁用 | boolean | - | false | - |
184-
| min | 最小选中的数量 | number | - | 0 | - |
185-
| max | 最大选中的数量，0 为无限数量，默认为 0 | number | - | 0 | - |
186-
| inline | 同行展示 | boolean | - | false | - |
187-
| size | 设置大小 | string | large | - | - |
214+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
215+
| ------------- | -------------------------------------- | ------- | ------------------------ | ------- | -------- |
216+
| v-model | 绑定值 | Array | - | - | - |
217+
| shape | 单选框形状 | string | circle / square / button | circle | - |
218+
| cell | 表单模式 | boolean | - | false | - |
219+
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
220+
| disabled | 禁用 | boolean | - | false | - |
221+
| min | 最小选中的数量 | number | - | 0 | - |
222+
| max | 最大选中的数量，0 为无限数量，默认为 0 | number | - | 0 | - |
223+
| inline | 同行展示 | boolean | - | false | - |
224+
| size | 设置大小 | string | large | - | - |
188225

189226
## Checkbox Methods
190227

191-
| 方法名称 | 说明 | 参数 | 最低版本 |
192-
|--------|------|-----|---------|
193-
| toggle | 切换当前选中状态,同时触发change事件 | - | - |
228+
| 方法名称 | 说明 | 参数 | 最低版本 |
229+
| -------- | ------------------------------------- | ---- | -------- |
230+
| toggle | 切换当前选中状态,同时触发 change 事件 | - | 1.2.16 |
194231

195232
## Checkbox Events
196233

197-
| 事件名称 | 说明 | 参数 | 最低版本 |
198-
|---------|-----|-----|---------|
199-
| change | 绑定值变化时触发，当为复选框组时参数为boolean，表示该复选框是否选中 | `{ value }` | - |
234+
| 事件名称 | 说明 | 参数 | 最低版本 |
235+
| -------- | -------------------------------------------------------------------- | ----------- | -------- |
236+
| change | 绑定值变化时触发，当为复选框组时参数为 boolean，表示该复选框是否选中 | `{ value }` | - |
200237

201238
## CheckboxGroup Events
202239

203-
| 事件名称 | 说明 | 参数 | 最低版本 |
204-
|---------|-----|-----|---------|
205-
| change | 绑定值变化时触发 | `{ value }` | - |
240+
| 事件名称 | 说明 | 参数 | 最低版本 |
241+
| -------- | ---------------- | ----------- | -------- |
242+
| change | 绑定值变化时触发 | `{ value }` | - |
206243

207244
## Checkbox 外部样式类
208245

209-
| 类名 | 说明 | 最低版本 |
210-
|-----|-----|---------|
211-
| custom-class | 根节点样式 | - |
212-
| custom-label-class | 文字结点样式 | - |
213-
| custom-shape-class | 单选图标结点样式 | - |
246+
| 类名 | 说明 | 最低版本 |
247+
| ------------------ | ---------------- | -------- |
248+
| custom-class | 根节点样式 | - |
249+
| custom-label-class | 文字结点样式 | - |
250+
| custom-shape-class | 单选图标结点样式 | - |
214251

215252
## CheckboxGroup 外部样式类
216253

217-
| 类名 | 说明 | 最低版本 |
218-
|-----|------|--------|
219-
| custom-class | 根节点样式 | - |
254+
| 类名 | 说明 | 最低版本 |
255+
| ------------ | ---------- | -------- |
256+
| custom-class | 根节点样式 | - |

‎src/pages/checkbox/Index.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,60 @@
8787
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
8888
</wd-checkbox-group>
8989
</demo-block>
90+
91+
<demo-block title="结合Cell使用" transparent>
92+
<wd-cell-group border>
93+
<wd-checkbox-group v-model="value10" size="large">
94+
<wd-cell title="点赞" center clickable @click="handleCheck1">
95+
<view @click.stop="noop">
96+
<wd-checkbox model-value="1" ref="checkBox1" custom-style="margin:0;"></wd-checkbox>
97+
</view>
98+
</wd-cell>
99+
<wd-cell title="投币" center clickable @click="handleCheck2">
100+
<view @click.stop="noop">
101+
<wd-checkbox model-value="2" ref="checkBox2" custom-style="margin:0;"></wd-checkbox>
102+
</view>
103+
</wd-cell>
104+
<wd-cell title="一键三连" center clickable @click="handleCheck3">
105+
<view @click.stop="noop">
106+
<wd-checkbox model-value="3" ref="checkBox3" custom-style="margin:0;"></wd-checkbox>
107+
</view>
108+
</wd-cell>
109+
</wd-checkbox-group>
110+
</wd-cell-group>
111+
</demo-block>
90112
</page-wraper>
91113
</template>
92114
<script lang="ts" setup>
115+
import type { CheckboxInstance } from '@/uni_modules/wot-design-uni/components/wd-checkbox/types'
93116
import { ref } from 'vue'
94117
118+
const checkBox1 = ref<CheckboxInstance>()
119+
const checkBox2 = ref<CheckboxInstance>()
120+
const checkBox3 = ref<CheckboxInstance>()
121+
122+
function handleCheck1() {
123+
checkBox1.value && checkBox1.value.toggle()
124+
}
125+
126+
function handleCheck2() {
127+
checkBox2.value && checkBox2.value.toggle()
128+
}
129+
function handleCheck3() {
130+
checkBox3.value && checkBox3.value.toggle()
131+
}
132+
133+
function noop() {}
134+
95135
const check1 = ref<boolean>(true)
96136
const check2 = ref<boolean>(true)
97137
const check3 = ref<boolean>(true)
98138
const check4 = ref<boolean>(true)
99139
const check5 = ref<boolean>(true)
100140
const check6 = ref<boolean>(true)
101141
142+
const value0 = ref<number[]>([1, 2, 3])
143+
102144
const value1 = ref<number[]>([1, 3])
103145
const value2 = ref<number[]>([1])
104146
const value3 = ref<string>('沃特')

‎src/uni_modules/wot-design-uni/components/wd-checkbox/types.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ExtractPropTypes, PropType } from 'vue'
1+
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
22
import { baseProps, makeStringProp } from '../common/props'
33

44
export type CheckShape = 'circle' | 'square' | 'button'
@@ -55,3 +55,12 @@ export const checkboxProps = {
5555
}
5656

5757
export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
58+
59+
export type CheckboxExpose = {
60+
/**
61+
* 切换当前选中状态
62+
*/
63+
toggle: () => void
64+
}
65+
66+
export type CheckboxInstance = ComponentPublicInstance<CheckboxProps, CheckboxExpose>

‎src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,15 @@ import { computed, getCurrentInstance, onBeforeMount, watch } from 'vue'
4747
import { useParent } from '../composables/useParent'
4848
import { CHECKBOX_GROUP_KEY } from '../wd-checkbox-group/types'
4949
import { isDef } from '../common/util'
50-
import { checkboxProps } from './types'
50+
import { checkboxProps, type CheckboxExpose } from './types'
5151
5252
const props = defineProps(checkboxProps)
5353
const emit = defineEmits(['change', 'update:modelValue'])
5454
55+
defineExpose<CheckboxExpose>({
56+
toggle
57+
})
58+
5559
const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
5660
5761
const isChecked = computed(() => {

0 commit comments

Comments
 (0)