u-grid.vue 2.7 KB

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