u-col.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <view
  3. class="u-col"
  4. ref="u-col"
  5. :class="[
  6. 'u-col-' + span
  7. ]"
  8. :style="[colStyle]"
  9. @tap="clickHandler"
  10. >
  11. <slot></slot>
  12. </view>
  13. </template>
  14. <script>
  15. import props from './props.js';
  16. import mixin from '../../libs/mixin/mixin'
  17. import mpMixin from '../../libs/mixin/mpMixin';
  18. /**
  19. * CodeInput 栅格系统的列
  20. * @description 该组件一般用于Layout 布局 通过基础的 12 分栏,迅速简便地创建布局
  21. * @tutorial https://uview.d3u.cn/components/Layout.html
  22. * @property {String | Number} span 栅格占据的列数,总12等份 (默认 12 )
  23. * @property {String | Number} offset 分栏左边偏移,计算方式与span相同 (默认 0 )
  24. * @property {String} justify 水平排列方式,可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) (默认 'start' )
  25. * @property {String} align 垂直对齐方式,可选值为top、center、bottom、stretch (默认 'stretch' )
  26. * @property {String} textAlign 文字水平对齐方式 (默认 'left' )
  27. * @property {Object} customStyle 定义需要用到的外部样式
  28. * @event {Function} click col被点击,会阻止事件冒泡到row
  29. * @example <u-col span="3" offset="3" > <view class="demo-layout bg-purple"></view> </u-col>
  30. */
  31. export default {
  32. name: 'u-col',
  33. mixins: [mpMixin, mixin, props],
  34. data() {
  35. return {
  36. width: 0,
  37. parentData: {
  38. gutter: 0
  39. },
  40. gridNum: 12
  41. }
  42. },
  43. computed: {
  44. uJustify() {
  45. if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify
  46. else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify
  47. else return this.justify
  48. },
  49. uAlignItem() {
  50. if (this.align == 'top') return 'flex-start'
  51. if (this.align == 'bottom') return 'flex-end'
  52. else return this.align
  53. },
  54. colStyle() {
  55. const style = {
  56. // 这里写成"padding: 0 10px"的形式是因为nvue的需要
  57. paddingLeft: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2),
  58. paddingRight: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2),
  59. alignItems: this.uAlignItem,
  60. justifyContent: this.uJustify,
  61. textAlign: this.textAlign,
  62. // #ifndef APP-NVUE
  63. // 在非nvue上,使用百分比形式
  64. flex: `0 0 ${100 / this.gridNum * this.span}%`,
  65. marginLeft: 100 / 12 * this.offset + '%',
  66. // #endif
  67. // #ifdef APP-NVUE
  68. // 在nvue上,由于无法使用百分比单位,这里需要获取父组件的宽度,再计算得出该有对应的百分比尺寸
  69. width: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.span))),
  70. marginLeft: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.offset))),
  71. // #endif
  72. }
  73. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  74. }
  75. },
  76. mounted() {
  77. this.init()
  78. },
  79. // #ifdef VUE3
  80. emits: ["click"],
  81. // #endif
  82. methods: {
  83. async init() {
  84. // 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用
  85. this.updateParentData()
  86. this.width = await this.parent.getComponentWidth()
  87. },
  88. updateParentData() {
  89. this.getParentData('u-row')
  90. },
  91. clickHandler(e) {
  92. this.$emit('click');
  93. }
  94. },
  95. }
  96. </script>
  97. <style lang="scss" scoped>
  98. @import "../../libs/css/components.scss";
  99. .u-col {
  100. padding: 0;
  101. /* #ifndef APP-NVUE */
  102. box-sizing:border-box;
  103. /* #endif */
  104. /* #ifdef MP */
  105. display: block;
  106. /* #endif */
  107. }
  108. // nvue下百分比无效
  109. /* #ifndef APP-NVUE */
  110. .u-col-0 {
  111. width: 0;
  112. }
  113. .u-col-1 {
  114. width: calc(100%/12);
  115. }
  116. .u-col-2 {
  117. width: calc(100%/12 * 2);
  118. }
  119. .u-col-3 {
  120. width: calc(100%/12 * 3);
  121. }
  122. .u-col-4 {
  123. width: calc(100%/12 * 4);
  124. }
  125. .u-col-5 {
  126. width: calc(100%/12 * 5);
  127. }
  128. .u-col-6 {
  129. width: calc(100%/12 * 6);
  130. }
  131. .u-col-7 {
  132. width: calc(100%/12 * 7);
  133. }
  134. .u-col-8 {
  135. width: calc(100%/12 * 8);
  136. }
  137. .u-col-9 {
  138. width: calc(100%/12 * 9);
  139. }
  140. .u-col-10 {
  141. width: calc(100%/12 * 10);
  142. }
  143. .u-col-11 {
  144. width: calc(100%/12 * 11);
  145. }
  146. .u-col-12 {
  147. width: calc(100%/12 * 12);
  148. }
  149. /* #endif */
  150. </style>