widget.qw 1.0.76 → 1.0.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.development +9 -9
- package/.env.production +8 -8
- package/README.md +75 -73
- package/build/style.css +471 -471
- package/build/widget.qw.es.js +91 -66
- package/build/widget.qw.umd.js +91 -66
- package/index.html +17 -17
- package/package.json +47 -47
- package/src/App.vue +26 -26
- package/src/api/index.js +165 -165
- package/src/components/AuditBar.vue +396 -396
- package/src/components/BillCard.vue +164 -164
- package/src/components/CascaderPicker.vue +132 -132
- package/src/components/CascaderPop.vue +371 -371
- package/src/components/CheckGroup.vue +113 -113
- package/src/components/DatetimePicker/DatetimePop.vue +342 -342
- package/src/components/DatetimePicker/index.vue +124 -124
- package/src/components/DayDropdown.vue +56 -56
- package/src/components/FilePicker.vue +172 -145
- package/src/components/Input.vue +80 -80
- package/src/components/MonthDropdown.vue +51 -51
- package/src/components/MultiPicker.vue +123 -123
- package/src/components/ObjsEditor.vue +334 -334
- package/src/components/SecretNotify.js +5 -5
- package/src/components/Sheet.vue +92 -92
- package/src/components/SingleApiPicker.vue +108 -108
- package/src/components/SinglePicker.vue +102 -102
- package/src/components/SingleUserSelector.vue +425 -425
- package/src/components/Switch.vue +64 -64
- package/src/components/TreePicker.vue +113 -113
- package/src/components/UserPicker.vue +106 -106
- package/src/components/UserProfile.vue +129 -129
- package/src/components/UsersPicker.vue +118 -118
- package/src/components/YearDropdown.vue +59 -59
- package/src/components/data_selector.vue +303 -303
- package/src/components/image_picker.vue +123 -123
- package/src/components/images_picker.vue +159 -159
- package/src/components/index.js +162 -162
- package/src/components/mult_list_selector.vue +155 -155
- package/src/components/subdepartment_selector.vue +481 -481
- package/src/components/user_selector.vue +639 -639
- package/src/components/widget/DataPop.vue +95 -95
- package/src/components/widget/TreePop.vue +88 -88
- package/src/components/widget/UserPop.vue +347 -347
- package/src/env.d.ts +8 -8
- package/src/main.js +117 -117
- package/src/router/index.ts +173 -173
- package/src/util/array_util.js +32 -32
- package/src/util/auth_util.js +72 -72
- package/src/util/bool_util.js +5 -5
- package/src/util/bus.js +1 -1
- package/src/util/cache_util.js +18 -18
- package/src/util/errer_code.js +6 -6
- package/src/util/eval_util.js +19 -19
- package/src/util/icon_util.js +36 -36
- package/src/util/image_util.js +27 -27
- package/src/util/index.js +57 -57
- package/src/util/num_util.js +70 -70
- package/src/util/obj_util.js +28 -28
- package/src/util/request.js +73 -73
- package/src/util/request_json.js +71 -71
- package/src/util/request_json_mute.js +65 -65
- package/src/util/request_upload.js +79 -79
- package/src/util/route_util.js +31 -31
- package/src/util/str_util.js +143 -143
- package/src/util/time_util.js +406 -406
- package/src/util/toast_util.js +24 -24
- package/src/util/tree_util.js +153 -153
- package/src/util/uuid_util.js +9 -9
- package/src/util/validate.js +182 -182
- package/src/util/vue_filter.js +223 -223
- package/src/views/auditbar/index.vue +78 -78
- package/src/views/billcard/index.vue +48 -48
- package/src/views/cascaderpop/index.vue +90 -90
- package/src/views/checkgroup/index.vue +35 -35
- package/src/views/dataSelector/index.vue +48 -48
- package/src/views/datetimepicker/index.vue +34 -34
- package/src/views/daydropdown/index.vue +31 -31
- package/src/views/filepicker/index.vue +32 -31
- package/src/views/imagepicker/index.vue +31 -31
- package/src/views/imagespicker/index.vue +31 -31
- package/src/views/input/index.vue +35 -35
- package/src/views/monthdropdown/index.vue +31 -31
- package/src/views/multListSelector/index.vue +61 -61
- package/src/views/multipicker/index.vue +36 -36
- package/src/views/objseditor/index.vue +277 -277
- package/src/views/productSelector/index.vue +35 -35
- package/src/views/projectpicker/index.vue +41 -41
- package/src/views/secretnotify/index.vue +27 -27
- package/src/views/sheet/index.vue +45 -45
- package/src/views/singlepicker/index.vue +35 -35
- package/src/views/subdepartmentSelector/index.vue +40 -40
- package/src/views/switch/index.vue +34 -34
- package/src/views/treepicker/index.vue +41 -41
- package/src/views/userSelector/index.vue +54 -54
- package/src/views/userSelectorNew/index.vue +45 -45
- package/src/views/userpicker/index.vue +43 -43
- package/src/views/userprofile/index.vue +30 -30
- package/src/views/userspicker/index.vue +43 -43
- package/src/views/yeardropdown/index.vue +32 -32
- package/src/vm/index.js +1 -1
- package/tsconfig.json +19 -19
- package/tsconfig.node.json +8 -8
- package/vite.config.ts +122 -122
package/src/components/index.js
CHANGED
|
@@ -1,162 +1,162 @@
|
|
|
1
|
-
// 引入封装好的组件
|
|
2
|
-
import vm from "../vm";
|
|
3
|
-
import AuditBar from "./AuditBar.vue";
|
|
4
|
-
import Input from "./Input.vue";
|
|
5
|
-
import SinglePicker from "./SinglePicker.vue";
|
|
6
|
-
import MultiPicker from './MultiPicker.vue'
|
|
7
|
-
import CheckGroup from "./CheckGroup.vue";
|
|
8
|
-
import DatetimePicker from "./DatetimePicker/index.vue";
|
|
9
|
-
import DataSelector from "./data_selector.vue";
|
|
10
|
-
import MultListSelector from "./mult_list_selector.vue";
|
|
11
|
-
import SubdepartmentSelector from "./subdepartment_selector.vue";
|
|
12
|
-
import UserSelector from "./user_selector.vue";
|
|
13
|
-
import ImagePicker from "./image_picker.vue";
|
|
14
|
-
import ImagesPicker from "./images_picker.vue";
|
|
15
|
-
import FilePicker from "./FilePicker.vue";
|
|
16
|
-
import SingleUserSelector from "./SingleUserSelector.vue";
|
|
17
|
-
import UsersPicker from "./UsersPicker.vue"
|
|
18
|
-
import UserPicker from "./UserPicker.vue"
|
|
19
|
-
import UserProfile from "./UserProfile.vue"
|
|
20
|
-
import BillCard from './BillCard.vue'
|
|
21
|
-
import YearDropdown from "./YearDropdown.vue";
|
|
22
|
-
import MonthDropdown from "./MonthDropdown.vue";
|
|
23
|
-
import DayDropdown from "./DayDropdown.vue";
|
|
24
|
-
import Switch from './Switch.vue'
|
|
25
|
-
import Sheet from './Sheet.vue'
|
|
26
|
-
import TreePicker from './TreePicker.vue'
|
|
27
|
-
import CascaderPop from './CascaderPop.vue'
|
|
28
|
-
import CascaderPicker from './CascaderPicker.vue'
|
|
29
|
-
import SingleApiPicker from "./SingleApiPicker.vue";
|
|
30
|
-
import ObjsEditor from './ObjsEditor.vue'
|
|
31
|
-
|
|
32
|
-
const components = [
|
|
33
|
-
{
|
|
34
|
-
name: "WidgetQwAuditBar",
|
|
35
|
-
widget: AuditBar,
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
name: "WidgetQwInput",
|
|
39
|
-
widget: Input,
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
name: "WidgetQwSinglePicker",
|
|
43
|
-
widget: SinglePicker,
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
name: "WidgetQwMultiPicker",
|
|
47
|
-
widget: MultiPicker,
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
name: "WidgetQwCheckGroup",
|
|
51
|
-
widget: CheckGroup,
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
name: "WidgetQwDatetimePicker",
|
|
55
|
-
widget: DatetimePicker,
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
name: "WidgetQwDataSelector",
|
|
59
|
-
widget: DataSelector,
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
name: "WidgetQwMultListSelector",
|
|
63
|
-
widget: MultListSelector,
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
name: "WidgetQwSubdepartmentSelector",
|
|
67
|
-
widget: SubdepartmentSelector,
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
name: "WidgetQwSingleUserSelector",
|
|
71
|
-
widget: SingleUserSelector,
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
name: "WidgetQwImagePicker",
|
|
75
|
-
widget: ImagePicker,
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
name: "WidgetQwImagesPicker",
|
|
79
|
-
widget: ImagesPicker,
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
name: "WidgetQwFilePicker",
|
|
83
|
-
widget: FilePicker,
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
name: 'WidgetQwBillCard',
|
|
87
|
-
widget: BillCard
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
name: 'WidgetQwUserSelector',
|
|
91
|
-
widget: UserSelector
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
name: 'WidgetQwUsersPicker',
|
|
95
|
-
widget: UsersPicker
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
name: 'WidgetQwUserPicker',
|
|
99
|
-
widget: UserPicker
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
name: 'WidgetQwUserProfile',
|
|
103
|
-
widget: UserProfile
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
name: 'WidgetQwYearDropdown',
|
|
107
|
-
widget: YearDropdown
|
|
108
|
-
},
|
|
109
|
-
{
|
|
110
|
-
name: 'WidgetQwMonthDropdown',
|
|
111
|
-
widget: MonthDropdown
|
|
112
|
-
},
|
|
113
|
-
{
|
|
114
|
-
name: 'WidgetQwDayDropdown',
|
|
115
|
-
widget: DayDropdown
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
name: 'WidgetQwSwitch',
|
|
119
|
-
widget: Switch
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
name: 'WidgetQwSheet',
|
|
123
|
-
widget: Sheet
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
name: 'WidgetQwTreePicker',
|
|
127
|
-
widget: TreePicker
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
name: 'WidgetQwCascaderPop',
|
|
131
|
-
widget: CascaderPop
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
name: 'WidgetQwCascaderPicker',
|
|
135
|
-
widget: CascaderPicker
|
|
136
|
-
},
|
|
137
|
-
{
|
|
138
|
-
name: 'WidgetQwSingleApiPicker',
|
|
139
|
-
widget: SingleApiPicker
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
name: "WidgetQwObjsEditor",
|
|
143
|
-
widget: ObjsEditor,
|
|
144
|
-
},
|
|
145
|
-
];
|
|
146
|
-
// 导出组件
|
|
147
|
-
export const WidgetQw = {
|
|
148
|
-
install(app) {
|
|
149
|
-
components.forEach((component) => {
|
|
150
|
-
app.component(component.name, component.widget);
|
|
151
|
-
});
|
|
152
|
-
},
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
// 导出初始化方法
|
|
156
|
-
export function setup(params) {
|
|
157
|
-
Object.keys(params).forEach(key => {
|
|
158
|
-
vm[key] = params[key]
|
|
159
|
-
})
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
export * from "./SecretNotify";
|
|
1
|
+
// 引入封装好的组件
|
|
2
|
+
import vm from "../vm";
|
|
3
|
+
import AuditBar from "./AuditBar.vue";
|
|
4
|
+
import Input from "./Input.vue";
|
|
5
|
+
import SinglePicker from "./SinglePicker.vue";
|
|
6
|
+
import MultiPicker from './MultiPicker.vue'
|
|
7
|
+
import CheckGroup from "./CheckGroup.vue";
|
|
8
|
+
import DatetimePicker from "./DatetimePicker/index.vue";
|
|
9
|
+
import DataSelector from "./data_selector.vue";
|
|
10
|
+
import MultListSelector from "./mult_list_selector.vue";
|
|
11
|
+
import SubdepartmentSelector from "./subdepartment_selector.vue";
|
|
12
|
+
import UserSelector from "./user_selector.vue";
|
|
13
|
+
import ImagePicker from "./image_picker.vue";
|
|
14
|
+
import ImagesPicker from "./images_picker.vue";
|
|
15
|
+
import FilePicker from "./FilePicker.vue";
|
|
16
|
+
import SingleUserSelector from "./SingleUserSelector.vue";
|
|
17
|
+
import UsersPicker from "./UsersPicker.vue"
|
|
18
|
+
import UserPicker from "./UserPicker.vue"
|
|
19
|
+
import UserProfile from "./UserProfile.vue"
|
|
20
|
+
import BillCard from './BillCard.vue'
|
|
21
|
+
import YearDropdown from "./YearDropdown.vue";
|
|
22
|
+
import MonthDropdown from "./MonthDropdown.vue";
|
|
23
|
+
import DayDropdown from "./DayDropdown.vue";
|
|
24
|
+
import Switch from './Switch.vue'
|
|
25
|
+
import Sheet from './Sheet.vue'
|
|
26
|
+
import TreePicker from './TreePicker.vue'
|
|
27
|
+
import CascaderPop from './CascaderPop.vue'
|
|
28
|
+
import CascaderPicker from './CascaderPicker.vue'
|
|
29
|
+
import SingleApiPicker from "./SingleApiPicker.vue";
|
|
30
|
+
import ObjsEditor from './ObjsEditor.vue'
|
|
31
|
+
|
|
32
|
+
const components = [
|
|
33
|
+
{
|
|
34
|
+
name: "WidgetQwAuditBar",
|
|
35
|
+
widget: AuditBar,
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: "WidgetQwInput",
|
|
39
|
+
widget: Input,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "WidgetQwSinglePicker",
|
|
43
|
+
widget: SinglePicker,
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "WidgetQwMultiPicker",
|
|
47
|
+
widget: MultiPicker,
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "WidgetQwCheckGroup",
|
|
51
|
+
widget: CheckGroup,
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
name: "WidgetQwDatetimePicker",
|
|
55
|
+
widget: DatetimePicker,
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
name: "WidgetQwDataSelector",
|
|
59
|
+
widget: DataSelector,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: "WidgetQwMultListSelector",
|
|
63
|
+
widget: MultListSelector,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
name: "WidgetQwSubdepartmentSelector",
|
|
67
|
+
widget: SubdepartmentSelector,
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
name: "WidgetQwSingleUserSelector",
|
|
71
|
+
widget: SingleUserSelector,
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
name: "WidgetQwImagePicker",
|
|
75
|
+
widget: ImagePicker,
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
name: "WidgetQwImagesPicker",
|
|
79
|
+
widget: ImagesPicker,
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: "WidgetQwFilePicker",
|
|
83
|
+
widget: FilePicker,
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
name: 'WidgetQwBillCard',
|
|
87
|
+
widget: BillCard
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: 'WidgetQwUserSelector',
|
|
91
|
+
widget: UserSelector
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
name: 'WidgetQwUsersPicker',
|
|
95
|
+
widget: UsersPicker
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
name: 'WidgetQwUserPicker',
|
|
99
|
+
widget: UserPicker
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
name: 'WidgetQwUserProfile',
|
|
103
|
+
widget: UserProfile
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
name: 'WidgetQwYearDropdown',
|
|
107
|
+
widget: YearDropdown
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
name: 'WidgetQwMonthDropdown',
|
|
111
|
+
widget: MonthDropdown
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
name: 'WidgetQwDayDropdown',
|
|
115
|
+
widget: DayDropdown
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
name: 'WidgetQwSwitch',
|
|
119
|
+
widget: Switch
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
name: 'WidgetQwSheet',
|
|
123
|
+
widget: Sheet
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
name: 'WidgetQwTreePicker',
|
|
127
|
+
widget: TreePicker
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
name: 'WidgetQwCascaderPop',
|
|
131
|
+
widget: CascaderPop
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
name: 'WidgetQwCascaderPicker',
|
|
135
|
+
widget: CascaderPicker
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
name: 'WidgetQwSingleApiPicker',
|
|
139
|
+
widget: SingleApiPicker
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
name: "WidgetQwObjsEditor",
|
|
143
|
+
widget: ObjsEditor,
|
|
144
|
+
},
|
|
145
|
+
];
|
|
146
|
+
// 导出组件
|
|
147
|
+
export const WidgetQw = {
|
|
148
|
+
install(app) {
|
|
149
|
+
components.forEach((component) => {
|
|
150
|
+
app.component(component.name, component.widget);
|
|
151
|
+
});
|
|
152
|
+
},
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
// 导出初始化方法
|
|
156
|
+
export function setup(params) {
|
|
157
|
+
Object.keys(params).forEach(key => {
|
|
158
|
+
vm[key] = params[key]
|
|
159
|
+
})
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
export * from "./SecretNotify";
|
|
@@ -1,156 +1,156 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<!-- Tips section with corrected syntax -->
|
|
3
|
-
<div class="confirmation-tips" v-if="tips && tips.length > 0">
|
|
4
|
-
<van-icon name="info" color="#1989fa" />
|
|
5
|
-
<span>{{ tips }}</span>
|
|
6
|
-
</div>
|
|
7
|
-
|
|
8
|
-
<van-checkbox-group
|
|
9
|
-
:model-value="modelValue"
|
|
10
|
-
@update:model-value="$emit('update:modelValue', $event)"
|
|
11
|
-
class="confirmation-group"
|
|
12
|
-
:required="required"
|
|
13
|
-
:disabled="props.disabled"
|
|
14
|
-
:rules="rules"
|
|
15
|
-
>
|
|
16
|
-
<div class="confirmation-item" v-for="item in options" :key="item.value">
|
|
17
|
-
<van-checkbox
|
|
18
|
-
:name="item.value"
|
|
19
|
-
shape="square"
|
|
20
|
-
icon-size="18px"
|
|
21
|
-
class="custom-checkbox"
|
|
22
|
-
>
|
|
23
|
-
<span class="option-text">{{ item.label }}</span>
|
|
24
|
-
</van-checkbox>
|
|
25
|
-
</div>
|
|
26
|
-
</van-checkbox-group>
|
|
27
|
-
</template>
|
|
28
|
-
|
|
29
|
-
<script setup>
|
|
30
|
-
import { ref, watch, nextTick } from 'vue';
|
|
31
|
-
const props = defineProps({
|
|
32
|
-
options: {
|
|
33
|
-
type: Array,
|
|
34
|
-
required: true
|
|
35
|
-
},
|
|
36
|
-
modelValue: {
|
|
37
|
-
type: Array,
|
|
38
|
-
default: () => []
|
|
39
|
-
},
|
|
40
|
-
disabled: {
|
|
41
|
-
type: Boolean,
|
|
42
|
-
default: false
|
|
43
|
-
},
|
|
44
|
-
required: {
|
|
45
|
-
type: Boolean,
|
|
46
|
-
default: true
|
|
47
|
-
},
|
|
48
|
-
tips: {
|
|
49
|
-
type: String,
|
|
50
|
-
default: ''
|
|
51
|
-
},
|
|
52
|
-
rules : {
|
|
53
|
-
type: Array,
|
|
54
|
-
default: () => []
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
defineEmits(['update:modelValue']);
|
|
59
|
-
|
|
60
|
-
// watch(() => props.disabled, (newVal) => {
|
|
61
|
-
// console.log('disabled状态变化:', newVal);
|
|
62
|
-
// // 强制更新复选框状态
|
|
63
|
-
// nextTick(() => {
|
|
64
|
-
// const checkboxes = document.querySelectorAll('.van-checkbox');
|
|
65
|
-
// checkboxes.forEach(checkbox => {
|
|
66
|
-
// checkbox.style.pointerEvents = newVal ? 'none' : 'auto';
|
|
67
|
-
// checkbox.style.opacity = newVal ? '0.6' : '1';
|
|
68
|
-
// });
|
|
69
|
-
// });
|
|
70
|
-
// });
|
|
71
|
-
</script>
|
|
72
|
-
|
|
73
|
-
<style scoped>
|
|
74
|
-
/* // 修改 confirmation-group 和 confirmation-item 的样式 */
|
|
75
|
-
.confirmation-group {
|
|
76
|
-
padding: 0 16px;
|
|
77
|
-
--van-checkbox-disabled-icon-color: black;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.confirmation-item {
|
|
81
|
-
padding: 12px 16px;
|
|
82
|
-
margin: 0 -16px;
|
|
83
|
-
border-bottom: 1px solid #f5f5f5;
|
|
84
|
-
/* 禁用状态样式 */
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/* // 在下方添加媒体查询适配小屏幕 */
|
|
89
|
-
@media (max-width: 320px) {
|
|
90
|
-
.confirmation-item {
|
|
91
|
-
padding: 12px 8px;
|
|
92
|
-
margin: 0 -8px;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.confirmation-item:last-child {
|
|
97
|
-
border-bottom: none;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/* 新增样式 */
|
|
101
|
-
.confirmation-tips {
|
|
102
|
-
padding: 12px 16px;
|
|
103
|
-
background: #f0faff;
|
|
104
|
-
border-radius: 8px;
|
|
105
|
-
margin: 10px 16px;
|
|
106
|
-
display: flex;
|
|
107
|
-
align-items: center;
|
|
108
|
-
color: #1989fa;
|
|
109
|
-
font-size: 13px;
|
|
110
|
-
border: 1px solid #d9efff;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.confirmation-tips .van-icon {
|
|
114
|
-
margin-right: 8px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
/* 新增字体继承样式 */
|
|
118
|
-
.confirmation-group {
|
|
119
|
-
font-size: inherit; /* 继承父级字体大小 */
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.option-text {
|
|
123
|
-
font-size: 14px; /* 明确指定字体大小 */
|
|
124
|
-
line-height: 1.5; /* 保持行高一致 */
|
|
125
|
-
/* color:black; */
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/* 适配移动端的字体调整 */
|
|
129
|
-
@media (max-width: 375px) {
|
|
130
|
-
.option-text {
|
|
131
|
-
font-size: 13px;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/* 新增禁用状态样式 */
|
|
136
|
-
.custom-checkbox:disabled :deep(.--van-checkbox__icon) {
|
|
137
|
-
background-color: #f5f5f5;
|
|
138
|
-
border-color: #ebedf0;
|
|
139
|
-
transition: all 0.3s;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.custom-checkbox:disabled :deep(.van-checkbox__icon--checked) {
|
|
143
|
-
background-color: #1989fa;
|
|
144
|
-
border-color: #1989fa;
|
|
145
|
-
opacity: 0.7;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.van-checkbox--disabled :deep(.option-text) {
|
|
149
|
-
color: #969799;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.van-checkbox--disabled.van-checkbox--checked :deep(.option-text) {
|
|
153
|
-
color: #1989fa;
|
|
154
|
-
opacity: 0.8;
|
|
155
|
-
}
|
|
1
|
+
<template>
|
|
2
|
+
<!-- Tips section with corrected syntax -->
|
|
3
|
+
<div class="confirmation-tips" v-if="tips && tips.length > 0">
|
|
4
|
+
<van-icon name="info" color="#1989fa" />
|
|
5
|
+
<span>{{ tips }}</span>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<van-checkbox-group
|
|
9
|
+
:model-value="modelValue"
|
|
10
|
+
@update:model-value="$emit('update:modelValue', $event)"
|
|
11
|
+
class="confirmation-group"
|
|
12
|
+
:required="required"
|
|
13
|
+
:disabled="props.disabled"
|
|
14
|
+
:rules="rules"
|
|
15
|
+
>
|
|
16
|
+
<div class="confirmation-item" v-for="item in options" :key="item.value">
|
|
17
|
+
<van-checkbox
|
|
18
|
+
:name="item.value"
|
|
19
|
+
shape="square"
|
|
20
|
+
icon-size="18px"
|
|
21
|
+
class="custom-checkbox"
|
|
22
|
+
>
|
|
23
|
+
<span class="option-text">{{ item.label }}</span>
|
|
24
|
+
</van-checkbox>
|
|
25
|
+
</div>
|
|
26
|
+
</van-checkbox-group>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script setup>
|
|
30
|
+
import { ref, watch, nextTick } from 'vue';
|
|
31
|
+
const props = defineProps({
|
|
32
|
+
options: {
|
|
33
|
+
type: Array,
|
|
34
|
+
required: true
|
|
35
|
+
},
|
|
36
|
+
modelValue: {
|
|
37
|
+
type: Array,
|
|
38
|
+
default: () => []
|
|
39
|
+
},
|
|
40
|
+
disabled: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: false
|
|
43
|
+
},
|
|
44
|
+
required: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
default: true
|
|
47
|
+
},
|
|
48
|
+
tips: {
|
|
49
|
+
type: String,
|
|
50
|
+
default: ''
|
|
51
|
+
},
|
|
52
|
+
rules : {
|
|
53
|
+
type: Array,
|
|
54
|
+
default: () => []
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
defineEmits(['update:modelValue']);
|
|
59
|
+
|
|
60
|
+
// watch(() => props.disabled, (newVal) => {
|
|
61
|
+
// console.log('disabled状态变化:', newVal);
|
|
62
|
+
// // 强制更新复选框状态
|
|
63
|
+
// nextTick(() => {
|
|
64
|
+
// const checkboxes = document.querySelectorAll('.van-checkbox');
|
|
65
|
+
// checkboxes.forEach(checkbox => {
|
|
66
|
+
// checkbox.style.pointerEvents = newVal ? 'none' : 'auto';
|
|
67
|
+
// checkbox.style.opacity = newVal ? '0.6' : '1';
|
|
68
|
+
// });
|
|
69
|
+
// });
|
|
70
|
+
// });
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
<style scoped>
|
|
74
|
+
/* // 修改 confirmation-group 和 confirmation-item 的样式 */
|
|
75
|
+
.confirmation-group {
|
|
76
|
+
padding: 0 16px;
|
|
77
|
+
--van-checkbox-disabled-icon-color: black;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.confirmation-item {
|
|
81
|
+
padding: 12px 16px;
|
|
82
|
+
margin: 0 -16px;
|
|
83
|
+
border-bottom: 1px solid #f5f5f5;
|
|
84
|
+
/* 禁用状态样式 */
|
|
85
|
+
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* // 在下方添加媒体查询适配小屏幕 */
|
|
89
|
+
@media (max-width: 320px) {
|
|
90
|
+
.confirmation-item {
|
|
91
|
+
padding: 12px 8px;
|
|
92
|
+
margin: 0 -8px;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.confirmation-item:last-child {
|
|
97
|
+
border-bottom: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* 新增样式 */
|
|
101
|
+
.confirmation-tips {
|
|
102
|
+
padding: 12px 16px;
|
|
103
|
+
background: #f0faff;
|
|
104
|
+
border-radius: 8px;
|
|
105
|
+
margin: 10px 16px;
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
color: #1989fa;
|
|
109
|
+
font-size: 13px;
|
|
110
|
+
border: 1px solid #d9efff;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.confirmation-tips .van-icon {
|
|
114
|
+
margin-right: 8px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* 新增字体继承样式 */
|
|
118
|
+
.confirmation-group {
|
|
119
|
+
font-size: inherit; /* 继承父级字体大小 */
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.option-text {
|
|
123
|
+
font-size: 14px; /* 明确指定字体大小 */
|
|
124
|
+
line-height: 1.5; /* 保持行高一致 */
|
|
125
|
+
/* color:black; */
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* 适配移动端的字体调整 */
|
|
129
|
+
@media (max-width: 375px) {
|
|
130
|
+
.option-text {
|
|
131
|
+
font-size: 13px;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* 新增禁用状态样式 */
|
|
136
|
+
.custom-checkbox:disabled :deep(.--van-checkbox__icon) {
|
|
137
|
+
background-color: #f5f5f5;
|
|
138
|
+
border-color: #ebedf0;
|
|
139
|
+
transition: all 0.3s;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.custom-checkbox:disabled :deep(.van-checkbox__icon--checked) {
|
|
143
|
+
background-color: #1989fa;
|
|
144
|
+
border-color: #1989fa;
|
|
145
|
+
opacity: 0.7;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.van-checkbox--disabled :deep(.option-text) {
|
|
149
|
+
color: #969799;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.van-checkbox--disabled.van-checkbox--checked :deep(.option-text) {
|
|
153
|
+
color: #1989fa;
|
|
154
|
+
opacity: 0.8;
|
|
155
|
+
}
|
|
156
156
|
</style>
|