From 8e8e161971d8876e159f94e7e0f9e0d52d548e8a Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 07 Mar 2022 17:23:34 +0800
Subject: [PATCH] 实现同级显示的单选、多选框组件
---
forms/checkbox/cCheckBox.scss | 51 +++++++++++++++++
forms/checkbox/CCheckBox.vue | 96 ++++++++++++++++++++++++++++++++
forms/checkbox/index.js | 10 +++
3 files changed, 157 insertions(+), 0 deletions(-)
diff --git a/forms/checkbox/CCheckBox.vue b/forms/checkbox/CCheckBox.vue
new file mode 100644
index 0000000..68b2ac2
--- /dev/null
+++ b/forms/checkbox/CCheckBox.vue
@@ -0,0 +1,96 @@
+/**
+ * CCheckBox
+ * @author Tevin
+ */
+
+<template>
+ <view class="c-check-box">
+ <AtInput
+ ref="input"
+ :name="itemRes.name"
+ :title="itemRes.label"
+ :required="itemRes.required"
+ :disabled="itemRes.disabled"
+ :error="itemRes.error"
+ />
+ <AtCheckbox
+ ref="check"
+ :class="'c-check-box-' + boxType"
+ :options="options"
+ :selectedList="selectedList"
+ :onChange="evt => handleChange(evt)"
+ />
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import { $ } from '@tarojs/extend';
+import { AtInput, AtCheckbox } from 'taro-ui-vue';
+import { Tools } from '@components/common/Tools';
+import './cCheckBox.scss';
+
+export default {
+ name: 'CCheckBox',
+ components: {
+ AtInput,
+ AtCheckbox,
+ },
+ props: {
+ // 表单数据资源（表单组件内部机制专用）
+ itemRes: Object,
+ // 选项列表
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ // 勾选类型
+ boxType: {
+ type: String,
+ default: 'checkbox', // checkbox 多选、radio 单选
+ },
+ },
+ data() {
+ return {};
+ },
+ computed: {
+ selectedList() {
+ const value = this.itemRes.formData[this.itemRes.name];
+ if (Tools.isArray(value)) {
+ return value;
+ } else {
+ return [value];
+ }
+ },
+ },
+ methods: {
+ handleChange(evt) {
+ // 多选
+ if (this.boxType === 'checkbox') {
+ const next = [];
+ evt.forEach(item => {
+ if (typeof item === 'undefined') {
+ return;
+ }
+ next.push(item);
+ });
+ this.itemRes.onChange(next);
+ }
+ // 单选
+ else if (this.boxType === 'radio') {
+ const next = evt[evt.length - 1];
+ this.itemRes.onChange(next);
+ }
+ },
+ },
+ 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);
+ }
+ },
+};
+</script>
\ No newline at end of file
diff --git a/forms/checkbox/cCheckBox.scss b/forms/checkbox/cCheckBox.scss
new file mode 100644
index 0000000..f7e9b8e
--- /dev/null
+++ b/forms/checkbox/cCheckBox.scss
@@ -0,0 +1,51 @@
+/**
+ * CCheckBox
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-check-box {
+ .at-input {
+ padding-bottom: 0;
+ }
+ .at-input__container {
+ @include flexbox(flex, flex-start center, row wrap);
+ .at-input__title {
+ width: auto;
+ }
+ .at-input__input,
+ .weui-input,
+ 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-input__icon {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/forms/checkbox/index.js b/forms/checkbox/index.js
new file mode 100644
index 0000000..b503bf5
--- /dev/null
+++ b/forms/checkbox/index.js
@@ -0,0 +1,10 @@
+/**
+ * CCheckBox
+ * @author Tevin
+ */
+
+import CCheckBox from '@components/forms/checkBox/CCheckBox.vue';
+
+export {
+ CCheckBox,
+}
\ No newline at end of file
--
Gitblit v1.9.1