AI销管
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.

u-grid.vue 2.7 KiB

2 anni fa
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view>
  3. </template>
  4. <script>
  5. /**
  6. * grid 宫格布局
  7. * @description 宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件(badge),或者图标等,也可以扩展为左右滑动的轮播形式。
  8. * @tutorial https://www.uviewui.com/components/grid.html
  9. * @property {String Number} col 宫格的列数(默认3)
  10. * @property {Boolean} border 是否显示宫格的边框(默认true)
  11. * @property {Boolean} hover-class 点击宫格的时候,是否显示按下的灰色背景(默认false)
  12. * @event {Function} click 点击宫格触发
  13. * @example <u-grid :col="3" @click="click"></u-grid>
  14. */
  15. export default {
  16. name: 'u-grid',
  17. props: {
  18. // 分成几列
  19. col: {
  20. type: [Number, String],
  21. default: 3
  22. },
  23. // 是否显示边框
  24. border: {
  25. type: Boolean,
  26. default: true
  27. },
  28. // 宫格对齐方式,表现为数量少的时候,靠左,居中,还是靠右
  29. align: {
  30. type: String,
  31. default: 'left'
  32. },
  33. // 宫格按压时的样式类,"none"为无效果
  34. hoverClass: {
  35. type: String,
  36. default: 'u-hover-class'
  37. }
  38. },
  39. data() {
  40. return {
  41. index: 0,
  42. }
  43. },
  44. watch: {
  45. // 当父组件需要子组件需要共享的参数发生了变化,手动通知子组件
  46. parentData() {
  47. if(this.children.length) {
  48. this.children.map(child => {
  49. // 判断子组件(u-radio)如果有updateParentData方法的话,就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
  50. typeof(child.updateParentData) == 'function' && child.updateParentData();
  51. })
  52. }
  53. },
  54. },
  55. created() {
  56. // 如果将children定义在data中,在微信小程序会造成循环引用而报错
  57. this.children = [];
  58. },
  59. computed: {
  60. // 计算父组件的值是否发生变化
  61. parentData() {
  62. return [this.hoverClass, this.col, this.size, this.border];
  63. },
  64. // 宫格对齐方式
  65. gridStyle() {
  66. let style = {};
  67. switch(this.align) {
  68. case 'left':
  69. style.justifyContent = 'flex-start';
  70. break;
  71. case 'center':
  72. style.justifyContent = 'center';
  73. break;
  74. case 'right':
  75. style.justifyContent = 'flex-end';
  76. break;
  77. default: style.justifyContent = 'flex-start';
  78. };
  79. return style;
  80. }
  81. },
  82. methods: {
  83. click(index) {
  84. this.$emit('click', index);
  85. }
  86. }
  87. };
  88. </script>
  89. <style scoped lang="scss">
  90. @import "../../libs/css/style.components.scss";
  91. .u-grid {
  92. width: 100%;
  93. /* #ifdef MP */
  94. position: relative;
  95. box-sizing: border-box;
  96. overflow: hidden;
  97. /* #endif */
  98. /* #ifndef MP */
  99. @include vue-flex;
  100. flex-wrap: wrap;
  101. align-items: center;
  102. /* #endif */
  103. }
  104. </style>