u-col.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <view class="u-col" :class="[
  3. 'u-col-' + span
  4. ]" :style="{
  5. padding: `0 ${Number(gutter)/2 + 'rpx'}`,
  6. marginLeft: 100 / 12 * offset + '%',
  7. flex: `0 0 ${100 / 12 * span}%`,
  8. alignItems: uAlignItem,
  9. justifyContent: uJustify,
  10. textAlign: textAlign
  11. }"
  12. @tap="click">
  13. <slot></slot>
  14. </view>
  15. </template>
  16. <script>
  17. /**
  18. * col 布局单元格
  19. * @description 通过基础的 12 分栏,迅速简便地创建布局(搭配<u-row>使用)
  20. * @tutorial https://www.uviewui.com/components/layout.html
  21. * @property {String Number} span 栅格占据的列数,总12等分(默认0)
  22. * @property {String} text-align 文字水平对齐方式(默认left)
  23. * @property {String Number} offset 分栏左边偏移,计算方式与span相同(默认0)
  24. * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
  25. */
  26. export default {
  27. name: "u-col",
  28. props: {
  29. // 占父容器宽度的多少等分,总分为12份
  30. span: {
  31. type: [Number, String],
  32. default: 12
  33. },
  34. // 指定栅格左侧的间隔数(总12栏)
  35. offset: {
  36. type: [Number, String],
  37. default: 0
  38. },
  39. // 水平排列方式,可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
  40. justify: {
  41. type: String,
  42. default: 'start'
  43. },
  44. // 垂直对齐方式,可选值为top、center、bottom
  45. align: {
  46. type: String,
  47. default: 'center'
  48. },
  49. // 文字对齐方式
  50. textAlign: {
  51. type: String,
  52. default: 'left'
  53. },
  54. // 是否阻止事件传播
  55. stop: {
  56. type: Boolean,
  57. default: true
  58. }
  59. },
  60. data() {
  61. return {
  62. gutter: 20, // 给col添加间距,左右边距各占一半,从父组件u-row获取
  63. }
  64. },
  65. created() {
  66. this.parent = false;
  67. },
  68. mounted() {
  69. // 获取父组件实例,并赋值给对应的参数
  70. this.parent = this.$u.$parent.call(this, 'u-row');
  71. if (this.parent) {
  72. this.gutter = this.parent.gutter;
  73. }
  74. },
  75. computed: {
  76. uJustify() {
  77. if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
  78. else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
  79. else return this.justify;
  80. },
  81. uAlignItem() {
  82. if (this.align == 'top') return 'flex-start';
  83. if (this.align == 'bottom') return 'flex-end';
  84. else return this.align;
  85. }
  86. },
  87. methods: {
  88. click(e) {
  89. this.$emit('click');
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="scss">
  95. @import "../../libs/css/style.components.scss";
  96. .u-col {
  97. /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
  98. float: left;
  99. /* #endif */
  100. }
  101. .u-col-0 {
  102. width: 0;
  103. }
  104. .u-col-1 {
  105. width: calc(100%/12);
  106. }
  107. .u-col-2 {
  108. width: calc(100%/12 * 2);
  109. }
  110. .u-col-3 {
  111. width: calc(100%/12 * 3);
  112. }
  113. .u-col-4 {
  114. width: calc(100%/12 * 4);
  115. }
  116. .u-col-5 {
  117. width: calc(100%/12 * 5);
  118. }
  119. .u-col-6 {
  120. width: calc(100%/12 * 6);
  121. }
  122. .u-col-7 {
  123. width: calc(100%/12 * 7);
  124. }
  125. .u-col-8 {
  126. width: calc(100%/12 * 8);
  127. }
  128. .u-col-9 {
  129. width: calc(100%/12 * 9);
  130. }
  131. .u-col-10 {
  132. width: calc(100%/12 * 10);
  133. }
  134. .u-col-11 {
  135. width: calc(100%/12 * 11);
  136. }
  137. .u-col-12 {
  138. width: calc(100%/12 * 12);
  139. }
  140. </style>