u-radio.js
7.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
"use strict";
const uni_modules_uviewPlus_components_uRadio_props = require("./props.js");
const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
const common_vendor = require("../../../../common/vendor.js");
const _sfc_main = {
name: "u-radio",
mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uRadio_props.props],
data() {
return {
checked: false,
// 当你看到这段代码的时候,
// 父组件的默认值,因为头条小程序不支持在computed中使用this.parent.shape的形式
// 故只能使用如此方法
parentData: {
iconSize: 12,
labelDisabled: null,
disabled: null,
shape: null,
activeColor: null,
inactiveColor: null,
size: 18,
value: null,
modelValue: null,
iconColor: null,
placement: "row",
borderBottom: false,
iconPlacement: "left"
}
};
},
computed: {
// 是否禁用,如果父组件u-raios-group禁用的话,将会忽略子组件的配置
elDisabled() {
return this.disabled !== "" ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
},
// 是否禁用label点击
elLabelDisabled() {
return this.labelDisabled !== "" ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled : false;
},
// 组件尺寸,对应size的值,默认值为21px
elSize() {
return this.size ? this.size : this.parentData.size ? this.parentData.size : 21;
},
// 组件的勾选图标的尺寸,默认12px
elIconSize() {
return this.iconSize ? this.iconSize : this.parentData.iconSize ? this.parentData.iconSize : 12;
},
// 组件选中激活时的颜色
elActiveColor() {
return this.activeColor ? this.activeColor : this.parentData.activeColor ? this.parentData.activeColor : "#2979ff";
},
// 组件选未中激活时的颜色
elInactiveColor() {
return this.inactiveColor ? this.inactiveColor : this.parentData.inactiveColor ? this.parentData.inactiveColor : "#c8c9cc";
},
// label的颜色
elLabelColor() {
return this.labelColor ? this.labelColor : this.parentData.labelColor ? this.parentData.labelColor : "#606266";
},
// 组件的形状
elShape() {
return this.shape ? this.shape : this.parentData.shape ? this.parentData.shape : "circle";
},
// label大小
elLabelSize() {
return uni_modules_uviewPlus_libs_function_index.addUnit(this.labelSize ? this.labelSize : this.parentData.labelSize ? this.parentData.labelSize : "15");
},
elIconColor() {
const iconColor = this.iconColor ? this.iconColor : this.parentData.iconColor ? this.parentData.iconColor : "#ffffff";
if (this.elDisabled) {
return this.checked ? this.elInactiveColor : "transparent";
} else {
return this.checked ? iconColor : "transparent";
}
},
iconClasses() {
let classes = [];
classes.push("u-radio__icon-wrap--" + this.elShape);
if (this.elDisabled) {
classes.push("u-radio__icon-wrap--disabled");
}
if (this.checked && this.elDisabled) {
classes.push("u-radio__icon-wrap--disabled--checked");
}
return classes;
},
iconWrapStyle() {
const style = {};
style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : "#ffffff";
style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor;
style.width = uni_modules_uviewPlus_libs_function_index.addUnit(this.elSize);
style.height = uni_modules_uviewPlus_libs_function_index.addUnit(this.elSize);
if (this.parentData.iconPlacement === "right") {
style.marginRight = 0;
}
return style;
},
radioStyle() {
const style = {};
if (this.parentData.borderBottom && this.parentData.placement === "row") {
uni_modules_uviewPlus_libs_function_index.error("检测到您将borderBottom设置为true,需要同时将u-radio-group的placement设置为column才有效");
}
if (this.parentData.borderBottom && this.parentData.placement === "column") {
style.paddingBottom = uni_modules_uviewPlus_libs_function_index.os() === "ios" ? "12px" : "8px";
}
return uni_modules_uviewPlus_libs_function_index.deepMerge(style, uni_modules_uviewPlus_libs_function_index.addStyle(this.customStyle));
}
},
mounted() {
this.init();
},
emits: ["change"],
methods: {
init() {
this.updateParentData();
if (!this.parent) {
uni_modules_uviewPlus_libs_function_index.error("u-radio必须搭配u-radio-group组件使用");
}
this.checked = this.name === this.parentData.modelValue;
},
updateParentData() {
this.getParentData("u-radio-group");
},
// 点击图标
iconClickHandler(e) {
this.preventEvent(e);
if (!this.elDisabled) {
this.setRadioCheckedStatus();
}
},
// 横向两端排列时,点击组件即可触发选中事件
wrapperClickHandler(e) {
this.parentData.iconPlacement === "right" && this.iconClickHandler(e);
},
// 点击label
labelClickHandler(e) {
this.preventEvent(e);
if (!this.elLabelDisabled && !this.elDisabled) {
this.setRadioCheckedStatus();
}
},
emitEvent() {
if (!this.checked) {
this.$emit("change", this.name);
this.$nextTick(() => {
uni_modules_uviewPlus_libs_function_index.formValidate(this, "change");
});
}
},
// 改变组件选中状态
// 这里的改变的依据是,更改本组件的checked值为true,同时通过父组件遍历所有u-radio实例
// 将本组件外的其他u-radio的checked都设置为false(都被取消选中状态),因而只剩下一个为选中状态
setRadioCheckedStatus() {
this.emitEvent();
this.checked = true;
typeof this.parent.unCheckedOther === "function" && this.parent.unCheckedOther(this);
}
}
};
if (!Array) {
const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
_easycom_u_icon2();
}
const _easycom_u_icon = () => "../u-icon/u-icon.js";
if (!Math) {
_easycom_u_icon();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {
a: common_vendor.p({
name: "checkbox-mark",
size: $options.elIconSize,
color: $options.elIconColor
}),
b: common_vendor.o((...args) => $options.iconClickHandler && $options.iconClickHandler(...args)),
c: common_vendor.n($options.iconClasses),
d: common_vendor.s($options.iconWrapStyle),
e: common_vendor.t(_ctx.label),
f: common_vendor.o((...args) => $options.labelClickHandler && $options.labelClickHandler(...args)),
g: $options.elDisabled ? $options.elInactiveColor : $options.elLabelColor,
h: $options.elLabelSize,
i: $options.elLabelSize,
j: common_vendor.o((...args) => $options.wrapperClickHandler && $options.wrapperClickHandler(...args)),
k: common_vendor.s($options.radioStyle),
l: common_vendor.n(`u-radio-label--${$data.parentData.iconPlacement}`),
m: common_vendor.n($data.parentData.borderBottom && $data.parentData.placement === "column" && "u-border-bottom")
};
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-83036558"]]);
wx.createComponent(Component);