From fdeb869c386da95150a087bc22bcebc4e57d0f76 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 18 Mar 2025 18:16:32 +0800
Subject: [PATCH] 更新所有表单组件文档和头注释
---
forms/checkbox/CCheckBox.vue | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 108 insertions(+), 12 deletions(-)
diff --git a/forms/checkbox/CCheckBox.vue b/forms/checkbox/CCheckBox.vue
index 68b2ac2..aa9c01a 100644
--- a/forms/checkbox/CCheckBox.vue
+++ b/forms/checkbox/CCheckBox.vue
@@ -1,10 +1,16 @@
/**
* CCheckBox
+ * 复选框组件，用于在表单中提供多选或单选功能
+ * 支持两种显示模式：直接显示模式和弹窗选择模式
+ * 支持两种选择类型：多选和单选
* @author Tevin
*/
<template>
- <view class="c-check-box">
+ <view
+ class="c-check-box"
+ :class="displayType==='dialog'?'c-check-box-dialog':''"
+ >
<AtInput
ref="input"
:name="itemRes.name"
@@ -12,21 +18,66 @@
:required="itemRes.required"
:disabled="itemRes.disabled"
:error="itemRes.error"
- />
+ :editable="displayType!=='dialog'"
+ :placeholder="placeholder"
+ :value="selectedStr"
+ :onClick="evt => handleOpen()"
+ >
+ <view
+ v-if="displayType==='dialog'"
+ class="at-icon at-icon-chevron-right"
+ />
+ </AtInput>
<AtCheckbox
ref="check"
+ v-if="displayType==='plane'"
:class="'c-check-box-' + boxType"
:options="options"
:selectedList="selectedList"
:onChange="evt => handleChange(evt)"
/>
+ <AtModal
+ :isOpened="isDialogOpened"
+ v-if="displayType==='dialog'"
+ :onClose="evt => handleClose()"
+ >
+ <AtModalHeader>请选择{{itemRes.label}}</AtModalHeader>
+ <AtModalContent>
+ <scroll-view
+ class="scrollor"
+ :scrollY="true"
+ >
+ <AtCheckbox
+ ref="check"
+ :class="'c-check-box-' + boxType"
+ :options="options"
+ :selectedList="selectedList"
+ :onChange="evt => handleChange(evt)"
+ />
+ <view
+ class="m-text-ignore"
+ v-show="options.length===0"
+ >（选项加载异常）</view>
+ </scroll-view>
+ </AtModalContent>
+ <AtModalAction>
+ <button @tap="evt => handleClose(evt)">确定</button>
+ </AtModalAction>
+ </AtModal>
</view>
</template>
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
-import { AtInput, AtCheckbox } from 'taro-ui-vue';
+import {
+ AtInput,
+ AtCheckbox,
+ AtModal,
+ AtModalHeader,
+ AtModalContent,
+ AtModalAction,
+} from 'taro-ui-vue';
import { Tools } from '@components/common/Tools';
import './cCheckBox.scss';
@@ -35,11 +86,15 @@
components: {
AtInput,
AtCheckbox,
+ AtModal,
+ AtModalHeader,
+ AtModalContent,
+ AtModalAction,
},
props: {
// 表单数据资源（表单组件内部机制专用）
itemRes: Object,
- // 选项列表
+ // 选项列表，单项为 {label,value}
options: {
type: Array,
default: () => [],
@@ -49,9 +104,18 @@
type: String,
default: 'checkbox', // checkbox 多选、radio 单选
},
+ // 显示模式
+ displayType: {
+ type: String,
+ default: 'plane', // plane 直接显示、dialog 弹窗
+ },
+ // 占位提示
+ placeholder: String,
},
data() {
- return {};
+ return {
+ isDialogOpened: false,
+ };
},
computed: {
selectedList() {
@@ -61,6 +125,14 @@
} else {
return [value];
}
+ },
+ selectedStr() {
+ return (this.selectedList || [])
+ .map(selected => {
+ const option = this.options.find(opt => opt.value === selected);
+ return option ? option.label || '' : '';
+ })
+ .join(',');
},
},
methods: {
@@ -72,6 +144,12 @@
if (typeof item === 'undefined') {
return;
}
+ const selectedIndex = this.options.findIndex(
+ opt => opt.value === item,
+ );
+ if (selectedIndex < 0) {
+ return;
+ }
next.push(item);
});
this.itemRes.onChange(next);
@@ -79,17 +157,35 @@
// 单选
else if (this.boxType === 'radio') {
const next = evt[evt.length - 1];
- this.itemRes.onChange(next);
+ const selectedIndex = this.options.findIndex(opt => opt.value === next);
+ if (selectedIndex < 0) {
+ this.itemRes.onChange('');
+ } else {
+ this.itemRes.onChange(next);
+ }
}
+ },
+ handleOpen() {
+ if (this.displayType === 'plane') {
+ return;
+ }
+ this.isDialogOpened = true;
+ },
+ handleClose() {
+ this.isDialogOpened = false;
},
},
mounted() {
- if (process.env.TARO_ENV === 'h5') {
- $(this.$refs.input.$el)
- .find('.at-input__container')
- .prepend(this.$refs.check.$el);
- } else if (process.env.TARO_ENV === 'weapp') {
- $(this.$refs.input.$el).find('.at-input__container').append(this.$refs.check);
+ if (this.displayType === 'plane') {
+ if (process.env.TARO_ENV === 'h5') {
+ $(this.$refs.input.$el)
+ .find('.at-input__container')
+ .prepend(this.$refs.check.$el);
+ } else if (process.env.TARO_ENV === 'weapp') {
+ $(this.$refs.input.$el)
+ .find('.at-input__container')
+ .append(this.$refs.check.$el);
+ }
}
},
};
--
Gitblit v1.9.1