u-col.vue 4.0 KB

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