u-radio.js 7.2 KB

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