您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

3 年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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. }" @tap.stop.prevent="click">
  11. <slot></slot>
  12. </view>
  13. </template>
  14. <script>
  15. /**
  16. * col 布局单元格
  17. * @description 通过基础的 12 分栏,迅速简便地创建布局(搭配<u-row>使用)
  18. * @tutorial https://www.uviewui.com/components/layout.html
  19. * @property {String Number} span 栅格占据的列数,总12等分(默认0)
  20. * @property {String Number} offset 分栏左边偏移,计算方式与span相同(默认0)
  21. * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
  22. */
  23. export default {
  24. name: "u-col",
  25. props: {
  26. // 占父容器宽度的多少等分,总分为12份
  27. span: {
  28. type: [Number, String],
  29. default: 12
  30. },
  31. // 指定栅格左侧的间隔数(总12栏)
  32. offset: {
  33. type: [Number, String],
  34. default: 0
  35. },
  36. // 水平排列方式,可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
  37. justify: {
  38. type: String,
  39. default: 'start'
  40. },
  41. // 垂直对齐方式,可选值为top、center、bottom
  42. align: {
  43. type: String,
  44. default: 'center'
  45. }
  46. },
  47. inject: ['gutter'],
  48. computed: {
  49. uJustify() {
  50. if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
  51. else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
  52. else return this.justify;
  53. },
  54. uAlignItem() {
  55. if (this.align == 'top') return 'flex-start';
  56. if (this.align == 'bottom') return 'flex-end';
  57. else return this.align;
  58. }
  59. },
  60. methods: {
  61. click() {
  62. this.$emit('click');
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="scss">
  68. @import "../../libs/css/style.components.scss";
  69. .u-col {
  70. /* #ifdef MP-WEIXIN */
  71. float: left;
  72. /* #endif */
  73. }
  74. .u-col-0 {
  75. width: 0;
  76. }
  77. .u-col-1 {
  78. width: calc(100%/12);
  79. }
  80. .u-col-2 {
  81. width: calc(100%/12 * 2);
  82. }
  83. .u-col-3 {
  84. width: calc(100%/12 * 3);
  85. }
  86. .u-col-4 {
  87. width: calc(100%/12 * 4);
  88. }
  89. .u-col-5 {
  90. width: calc(100%/12 * 5);
  91. }
  92. .u-col-6 {
  93. width: calc(100%/12 * 6);
  94. }
  95. .u-col-7 {
  96. width: calc(100%/12 * 7);
  97. }
  98. .u-col-8 {
  99. width: calc(100%/12 * 8);
  100. }
  101. .u-col-9 {
  102. width: calc(100%/12 * 9);
  103. }
  104. .u-col-10 {
  105. width: calc(100%/12 * 10);
  106. }
  107. .u-col-11 {
  108. width: calc(100%/12 * 11);
  109. }
  110. .u-col-12 {
  111. width: calc(100%/12 * 12);
  112. }
  113. </style>