From 446276295e2185963d228f8c7c13a41303b3a681 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Sat, 15 Jul 2023 16:17:31 +0800
Subject: [PATCH] Merge branch 'temp'
---
forms/checkbox/cCheckBox.scss | 104 +++++++++++++++++++-------
forms/checkbox/CCheckBox.vue | 118 ++++++++++++++++++++++++++---
2 files changed, 181 insertions(+), 41 deletions(-)
diff --git a/forms/checkbox/CCheckBox.vue b/forms/checkbox/CCheckBox.vue
index 4c5ed64..ef4718d 100644
--- a/forms/checkbox/CCheckBox.vue
+++ b/forms/checkbox/CCheckBox.vue
@@ -4,7 +4,10 @@
*/
<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 +15,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,6 +83,10 @@
components: {
AtInput,
AtCheckbox,
+ AtModal,
+ AtModalHeader,
+ AtModalContent,
+ AtModalAction,
},
props: {
// 表单数据资源（表单组件内部机制专用）
@@ -49,9 +101,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 +122,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 +141,13 @@
if (typeof item === 'undefined') {
return;
}
+ const selectedIndex = this.options.findIndex(
+ opt => opt.value === item
+ );
+ console.log(item, selectedIndex);
+ if (selectedIndex < 0) {
+ return;
+ }
next.push(item);
});
this.itemRes.onChange(next);
@@ -79,19 +155,35 @@
// 单选
else if (this.boxType === 'radio') {
const next = evt[evt.length - 1];
- this.itemRes.onChange(next);
+ const selectedIndex = this.options.find(opt => opt.value === item);
+ 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.$el);
+ 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);
+ }
}
},
};
diff --git a/forms/checkbox/cCheckBox.scss b/forms/checkbox/cCheckBox.scss
index 1507019..8f8e640 100644
--- a/forms/checkbox/cCheckBox.scss
+++ b/forms/checkbox/cCheckBox.scss
@@ -6,6 +6,53 @@
@import "../../common/sassMixin";
.c-check-box {
+ &.c-check-box-dialog {
+ .at-input {
+ padding-bottom: 24px;
+ .at-input__title {
+ width: 162px;
+ }
+ }
+ .at-input__container {
+ &.at-input--disabled {
+ opacity: 1;
+ }
+ .at-input__input,
+ .weui-input,
+ input {
+ display: inline-block;
+ }
+ }
+ .at-input__children {
+ padding-right: 20px;
+ &::after {
+ display: none;
+ }
+ .at-icon-chevron-right {
+ padding: 0;
+ font-size: 48px;
+ color: #ccc;
+ }
+ }
+ .at-modal__container {
+ width: 620rpx;
+ .at-modal__content {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .scrollor {
+ height: 100%;
+ max-height: 840px;
+ }
+ .at-checkbox {
+ padding-left: 0;
+ }
+ }
+ .m-text-ignore {
+ padding: 60px 0;
+ text-align: center;
+ }
+ }
.at-input {
padding-bottom: 0;
}
@@ -19,36 +66,37 @@
input {
display: none;
}
- .at-checkbox {
- width: 96%;
- padding-left: 4%;
- &::before,
- &::after {
- display: none;
- }
- &.c-check-box-checkbox {
- .at-checkbox__icon-cnt {
- width: 48px;
- height: 48px;
- font-size: 32px;
- border-radius: 0;
- border-color: #c9c9c9;
- }
- }
- &.c-check-box-radio {
- .at-checkbox__icon-cnt {
- width: 48px;
- height: 48px;
- font-size: 32px;
- border-color: #c9c9c9;
- }
- }
- .at-checkbox__title {
- max-width: calc(100% - 80px);
- }
- }
+
}
.at-input__icon {
display: none;
}
+ .at-checkbox {
+ width: 96%;
+ padding-left: 4%;
+ &::before,
+ &::after {
+ display: none;
+ }
+ &.c-check-box-checkbox {
+ .at-checkbox__icon-cnt {
+ width: 48px;
+ height: 48px;
+ font-size: 32px;
+ border-radius: 0;
+ border-color: #c9c9c9;
+ }
+ }
+ &.c-check-box-radio {
+ .at-checkbox__icon-cnt {
+ width: 48px;
+ height: 48px;
+ font-size: 32px;
+ border-color: #c9c9c9;
+ }
+ }
+ .at-checkbox__title {
+ max-width: calc(100% - 80px);
+ }
+ }
}
\ No newline at end of file
--
Gitblit v1.9.1