u-subsection.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-subsection",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$8],
  6. data() {
  7. return {
  8. // 组件尺寸
  9. itemRect: {
  10. width: 0,
  11. height: 0
  12. }
  13. };
  14. },
  15. watch: {
  16. list(newValue, oldValue) {
  17. this.init();
  18. },
  19. current: {
  20. immediate: true,
  21. handler(n) {
  22. }
  23. }
  24. },
  25. computed: {
  26. wrapperStyle() {
  27. const style = {};
  28. if (this.mode === "button") {
  29. style.backgroundColor = this.bgColor;
  30. }
  31. return style;
  32. },
  33. // 滑块的样式
  34. barStyle() {
  35. const style = {};
  36. style.width = `${this.itemRect.width}px`;
  37. style.height = `${this.itemRect.height}px`;
  38. style.transform = `translateX(${this.current * this.itemRect.width}px)`;
  39. if (this.mode === "subsection") {
  40. style.backgroundColor = this.activeColor;
  41. }
  42. return style;
  43. },
  44. // 分段器item的样式
  45. itemStyle(index) {
  46. return (index2) => {
  47. const style = {};
  48. if (this.mode === "subsection") {
  49. style.borderColor = this.activeColor;
  50. style.borderWidth = "1px";
  51. style.borderStyle = "solid";
  52. }
  53. return style;
  54. };
  55. },
  56. // 分段器文字颜色
  57. textStyle(index) {
  58. return (index2) => {
  59. const style = {};
  60. style.fontWeight = this.bold && this.current === index2 ? "bold" : "normal";
  61. style.fontSize = common_vendor.index.$u.addUnit(this.fontSize);
  62. if (this.mode === "subsection") {
  63. style.color = this.current === index2 ? "#fff" : this.inactiveColor;
  64. } else {
  65. style.color = this.current === index2 ? this.activeColor : this.inactiveColor;
  66. }
  67. return style;
  68. };
  69. }
  70. },
  71. mounted() {
  72. this.init();
  73. },
  74. methods: {
  75. init() {
  76. common_vendor.index.$u.sleep().then(() => this.getRect());
  77. },
  78. // 判断展示文本
  79. getText(item) {
  80. return typeof item === "object" ? item[this.keyName] : item;
  81. },
  82. // 获取组件的尺寸
  83. getRect() {
  84. this.$uGetRect(".u-subsection__item--0").then((size) => {
  85. this.itemRect = size;
  86. });
  87. },
  88. clickHandler(index) {
  89. this.$emit("change", index);
  90. }
  91. }
  92. };
  93. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  94. return {
  95. a: common_vendor.s($options.barStyle),
  96. b: common_vendor.n(_ctx.mode === "button" && "u-subsection--button__bar"),
  97. c: common_vendor.n(_ctx.current === 0 && _ctx.mode === "subsection" && "u-subsection__bar--first"),
  98. d: common_vendor.n(_ctx.current > 0 && _ctx.current < _ctx.list.length - 1 && _ctx.mode === "subsection" && "u-subsection__bar--center"),
  99. e: common_vendor.n(_ctx.current === _ctx.list.length - 1 && _ctx.mode === "subsection" && "u-subsection__bar--last"),
  100. f: common_vendor.f(_ctx.list, (item, index, i0) => {
  101. return {
  102. a: common_vendor.t($options.getText(item)),
  103. b: common_vendor.s($options.textStyle(index)),
  104. c: common_vendor.n(`u-subsection__item--${index}`),
  105. d: common_vendor.n(index < _ctx.list.length - 1 && "u-subsection__item--no-border-right"),
  106. e: common_vendor.n(index === 0 && "u-subsection__item--first"),
  107. f: common_vendor.n(index === _ctx.list.length - 1 && "u-subsection__item--last"),
  108. g: `u-subsection__item--${index}`,
  109. h: common_vendor.s($options.itemStyle(index)),
  110. i: common_vendor.o(($event) => $options.clickHandler(index), index),
  111. j: index
  112. };
  113. }),
  114. g: common_vendor.n(`u-subsection--${_ctx.mode}`),
  115. h: common_vendor.s(_ctx.$u.addStyle(_ctx.customStyle)),
  116. i: common_vendor.s($options.wrapperStyle)
  117. };
  118. }
  119. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7b2e14a2"], ["__file", "F:/兴元/开门柜项目/平台端管理系统小程序/node_modules/uview-plus/components/u-subsection/u-subsection.vue"]]);
  120. wx.createComponent(Component);