打包地址
This commit is contained in:
+198
@@ -0,0 +1,198 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "u-radio",
|
||||
mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$6],
|
||||
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 common_vendor.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 = common_vendor.addUnit(this.elSize);
|
||||
style.height = common_vendor.addUnit(this.elSize);
|
||||
if (this.parentData.iconPlacement === "right") {
|
||||
style.marginRight = 0;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
radioStyle() {
|
||||
const style = {};
|
||||
if (this.parentData.borderBottom && this.parentData.placement === "row") {
|
||||
common_vendor.error("检测到您将borderBottom设置为true,需要同时将u-radio-group的placement设置为column才有效");
|
||||
}
|
||||
if (this.parentData.borderBottom && this.parentData.placement === "column") {
|
||||
style.paddingBottom = common_vendor.os() === "ios" ? "12px" : "8px";
|
||||
}
|
||||
return common_vendor.deepMerge(style, common_vendor.addStyle(this.customStyle));
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
emits: ["change"],
|
||||
methods: {
|
||||
init() {
|
||||
this.updateParentData();
|
||||
if (!this.parent) {
|
||||
common_vendor.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(() => {
|
||||
common_vendor.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.r("icon", {
|
||||
elIconSize: $options.elIconSize,
|
||||
elIconColor: $options.elIconColor
|
||||
}),
|
||||
c: common_vendor.o((...args) => $options.iconClickHandler && $options.iconClickHandler(...args)),
|
||||
d: common_vendor.n($options.iconClasses),
|
||||
e: common_vendor.s($options.iconWrapStyle),
|
||||
f: common_vendor.t(_ctx.label),
|
||||
g: _ctx.label,
|
||||
h: $options.elDisabled ? $options.elInactiveColor : $options.elLabelColor,
|
||||
i: $options.elLabelSize,
|
||||
j: $options.elLabelSize,
|
||||
k: common_vendor.r("label", {
|
||||
label: _ctx.label,
|
||||
elDisabled: $options.elDisabled
|
||||
}),
|
||||
l: common_vendor.o((...args) => $options.labelClickHandler && $options.labelClickHandler(...args)),
|
||||
m: common_vendor.o((...args) => $options.wrapperClickHandler && $options.wrapperClickHandler(...args)),
|
||||
n: common_vendor.s($options.radioStyle),
|
||||
o: common_vendor.n(`u-radio-label--${$data.parentData.iconPlacement}`),
|
||||
p: 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-edf95844"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/node-modules/uview-plus/components/u-radio/u-radio.js.map
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"u-icon": "../u-icon/u-icon"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view catchtap="{{m}}" style="{{n}}" class="{{['u-radio', 'cursor-pointer', 'data-v-edf95844', o, p]}}"><view catchtap="{{c}}" class="{{['u-radio__icon-wrap', 'cursor-pointer', 'data-v-edf95844', d]}}" style="{{e}}"><block wx:if="{{$slots.icon}}"><slot name="icon"></slot></block><block wx:else><u-icon wx:if="{{a}}" class="u-radio__icon-wrap__icon data-v-edf95844" u-i="edf95844-0" bind:__l="__l" u-p="{{a}}"/></block></view><view class="u-radio__label-wrap cursor-pointer data-v-edf95844" catchtap="{{l}}"><block wx:if="{{$slots.label}}"><slot name="label"></slot></block><block wx:else><text class="u-radio__text data-v-edf95844" style="{{'color:' + h + ';' + ('font-size:' + i) + ';' + ('line-height:' + j)}}">{{f}} <label class="data-v-edf95844"><rich-text class="data-v-edf95844" nodes="{{g}}"/></label></text></block></view></view>
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.u-empty.data-v-edf95844,
|
||||
.u-empty__wrap.data-v-edf95844,
|
||||
.u-tabs.data-v-edf95844,
|
||||
.u-tabs__wrapper.data-v-edf95844,
|
||||
.u-tabs__wrapper__scroll-view-wrapper.data-v-edf95844,
|
||||
.u-tabs__wrapper__scroll-view.data-v-edf95844,
|
||||
.u-tabs__wrapper__nav.data-v-edf95844,
|
||||
.u-tabs__wrapper__nav__line.data-v-edf95844,
|
||||
.up-empty.data-v-edf95844,
|
||||
.up-empty__wrap.data-v-edf95844,
|
||||
.up-tabs.data-v-edf95844,
|
||||
.up-tabs__wrapper.data-v-edf95844,
|
||||
.up-tabs__wrapper__scroll-view-wrapper.data-v-edf95844,
|
||||
.up-tabs__wrapper__scroll-view.data-v-edf95844,
|
||||
.up-tabs__wrapper__nav.data-v-edf95844,
|
||||
.up-tabs__wrapper__nav__line.data-v-edf95844 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.u-radio.data-v-edf95844 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.u-radio-label--left.data-v-edf95844 {
|
||||
flex-direction: row;
|
||||
}
|
||||
.u-radio-label--right.data-v-edf95844 {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.u-radio__icon-wrap.data-v-edf95844 {
|
||||
box-sizing: border-box;
|
||||
transition-property: border-color, background-color, color;
|
||||
transition-duration: 0.2s;
|
||||
color: #606266;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
margin-right: 6px;
|
||||
font-size: 20px;
|
||||
border-width: 1px;
|
||||
border-color: #c8c9cc;
|
||||
border-style: solid;
|
||||
}
|
||||
.u-radio__icon-wrap--circle.data-v-edf95844 {
|
||||
border-radius: 100%;
|
||||
}
|
||||
.u-radio__icon-wrap--square.data-v-edf95844 {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.u-radio__icon-wrap--checked.data-v-edf95844 {
|
||||
color: #fff;
|
||||
background-color: red;
|
||||
border-color: #2979ff;
|
||||
}
|
||||
.u-radio__icon-wrap--disabled.data-v-edf95844 {
|
||||
background-color: #ebedf0 !important;
|
||||
}
|
||||
.u-radio__icon-wrap--disabled--checked.data-v-edf95844 {
|
||||
color: #c8c9cc !important;
|
||||
}
|
||||
.u-radio__label.data-v-edf95844 {
|
||||
word-wrap: break-word;
|
||||
margin-left: 5px;
|
||||
margin-right: 12px;
|
||||
color: #606266;
|
||||
font-size: 15px;
|
||||
}
|
||||
.u-radio__label--disabled.data-v-edf95844 {
|
||||
color: #c8c9cc;
|
||||
}
|
||||
Reference in New Issue
Block a user