u-col.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-col",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$17],
  6. data() {
  7. return {
  8. width: 0,
  9. parentData: {
  10. gutter: 0
  11. },
  12. gridNum: 12
  13. };
  14. },
  15. // 微信小程序中 options 选项
  16. options: {
  17. virtualHost: true
  18. // 将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
  19. },
  20. computed: {
  21. uJustify() {
  22. if (this.justify == "end" || this.justify == "start")
  23. return "flex-" + this.justify;
  24. else if (this.justify == "around" || this.justify == "between")
  25. return "space-" + this.justify;
  26. else
  27. return this.justify;
  28. },
  29. uAlignItem() {
  30. if (this.align == "top")
  31. return "flex-start";
  32. if (this.align == "bottom")
  33. return "flex-end";
  34. else
  35. return this.align;
  36. },
  37. colStyle() {
  38. const style = {
  39. // 这里写成"padding: 0 10px"的形式是因为nvue的需要
  40. paddingLeft: common_vendor.addUnit(common_vendor.getPx(this.parentData.gutter) / 2),
  41. paddingRight: common_vendor.addUnit(common_vendor.getPx(this.parentData.gutter) / 2),
  42. alignItems: this.uAlignItem,
  43. justifyContent: this.uJustify,
  44. textAlign: this.textAlign,
  45. // 在非nvue上,使用百分比形式
  46. flex: `0 0 ${100 / this.gridNum * this.span}%`,
  47. marginLeft: 100 / 12 * this.offset + "%"
  48. };
  49. return common_vendor.deepMerge(style, common_vendor.addStyle(this.customStyle));
  50. }
  51. },
  52. mounted() {
  53. this.init();
  54. },
  55. emits: ["click"],
  56. methods: {
  57. async init() {
  58. this.updateParentData();
  59. this.width = await this.parent.getComponentWidth();
  60. },
  61. updateParentData() {
  62. this.getParentData("u-row");
  63. },
  64. clickHandler(e) {
  65. this.$emit("click");
  66. }
  67. }
  68. };
  69. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  70. return {
  71. a: common_vendor.n("u-col-" + _ctx.span),
  72. b: common_vendor.s($options.colStyle),
  73. c: common_vendor.o((...args) => $options.clickHandler && $options.clickHandler(...args))
  74. };
  75. }
  76. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3677f292"], ["__file", "C:/Users/Administrator/Desktop/srcaaa/node_modules/uview-plus/components/u-col/u-col.vue"]]);
  77. wx.createComponent(Component);