uni-grid.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "UniGrid",
  5. emits: ["change"],
  6. props: {
  7. // 每列显示个数
  8. column: {
  9. type: Number,
  10. default: 3
  11. },
  12. // 是否显示边框
  13. showBorder: {
  14. type: Boolean,
  15. default: true
  16. },
  17. // 边框颜色
  18. borderColor: {
  19. type: String,
  20. default: "#D2D2D2"
  21. },
  22. // 是否正方形显示,默认为 true
  23. square: {
  24. type: Boolean,
  25. default: true
  26. },
  27. highlight: {
  28. type: Boolean,
  29. default: true
  30. }
  31. },
  32. provide() {
  33. return {
  34. grid: this
  35. };
  36. },
  37. data() {
  38. const elId = `Uni_${Math.ceil(Math.random() * 1e6).toString(36)}`;
  39. return {
  40. elId,
  41. width: 0
  42. };
  43. },
  44. created() {
  45. this.children = [];
  46. },
  47. mounted() {
  48. this.$nextTick(() => {
  49. this.init();
  50. });
  51. },
  52. methods: {
  53. init() {
  54. setTimeout(() => {
  55. this._getSize((width) => {
  56. this.children.forEach((item, index) => {
  57. item.width = width;
  58. });
  59. });
  60. }, 50);
  61. },
  62. change(e) {
  63. this.$emit("change", e);
  64. },
  65. _getSize(fn) {
  66. common_vendor.index.createSelectorQuery().in(this).select(`#${this.elId}`).boundingClientRect().exec((ret) => {
  67. this.width = parseInt((ret[0].width - 1) / this.column) + "px";
  68. fn(this.width);
  69. });
  70. }
  71. }
  72. };
  73. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  74. return {
  75. a: $data.elId,
  76. b: $props.showBorder ? 1 : "",
  77. c: $props.borderColor
  78. };
  79. }
  80. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-07acefee"], ["__file", "/Users/RuHu.Xu/Desktop/mall-newfeifan-zx-app/uni_modules/uni-grid/components/uni-grid/uni-grid.vue"]]);
  81. wx.createComponent(Component);