uni-grid.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <view class="uni-grid-wrap">
  3. <view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
  4. <slot />
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. // #ifdef APP-NVUE
  10. const dom = uni.requireNativePlugin('dom');
  11. // #endif
  12. /**
  13. * Grid 宫格
  14. * @description 宫格组件
  15. * @tutorial https://ext.dcloud.net.cn/plugin?id=27
  16. * @property {Number} column 每列显示个数
  17. * @property {String} borderColor 边框颜色
  18. * @property {Boolean} showBorder 是否显示边框
  19. * @property {Boolean} square 是否方形显示
  20. * @property {Boolean} Boolean 点击背景是否高亮
  21. * @event {Function} change 点击 grid 触发,e={detail:{index:0}},index 为当前点击 gird 下标
  22. */
  23. export default {
  24. name: 'UniGrid',
  25. emits:['change'],
  26. props: {
  27. // 每列显示个数
  28. column: {
  29. type: Number,
  30. default: 3
  31. },
  32. // 是否显示边框
  33. showBorder: {
  34. type: Boolean,
  35. default: true
  36. },
  37. // 边框颜色
  38. borderColor: {
  39. type: String,
  40. default: '#D2D2D2'
  41. },
  42. // 是否正方形显示,默认为 true
  43. square: {
  44. type: Boolean,
  45. default: true
  46. },
  47. highlight: {
  48. type: Boolean,
  49. default: true
  50. }
  51. },
  52. provide() {
  53. return {
  54. grid: this
  55. }
  56. },
  57. data() {
  58. const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
  59. return {
  60. elId,
  61. width: 0
  62. }
  63. },
  64. created() {
  65. this.children = []
  66. },
  67. mounted() {
  68. this.$nextTick(()=>{
  69. this.init()
  70. })
  71. },
  72. methods: {
  73. init() {
  74. setTimeout(() => {
  75. this._getSize((width) => {
  76. this.children.forEach((item, index) => {
  77. item.width = width
  78. })
  79. })
  80. }, 500)
  81. },
  82. change(e) {
  83. this.$emit('change', e)
  84. },
  85. _getSize(fn) {
  86. // #ifndef APP-NVUE
  87. uni.createSelectorQuery()
  88. .in(this)
  89. .select(`#${this.elId}`)
  90. .boundingClientRect()
  91. .exec(ret => {
  92. if(ret[0]){
  93. this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
  94. fn(this.width)
  95. }
  96. })
  97. // #endif
  98. // #ifdef APP-NVUE
  99. dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
  100. this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
  101. fn(this.width)
  102. })
  103. // #endif
  104. }
  105. }
  106. }
  107. </script>
  108. <style lang="scss" scoped>
  109. .uni-grid-wrap {
  110. /* #ifndef APP-NVUE */
  111. display: flex;
  112. /* #endif */
  113. flex: 1;
  114. flex-direction: column;
  115. /* #ifdef H5 */
  116. width: 100%;
  117. /* #endif */
  118. }
  119. .uni-grid {
  120. /* #ifndef APP-NVUE */
  121. display: flex;
  122. /* #endif */
  123. // flex: 1;
  124. flex-direction: row;
  125. flex-wrap: wrap;
  126. }
  127. .uni-grid--border {
  128. position: relative;
  129. /* #ifdef APP-NVUE */
  130. border-left-color: #D2D2D2;
  131. border-left-style: solid;
  132. border-left-width: 0.5px;
  133. /* #endif */
  134. /* #ifndef APP-NVUE */
  135. z-index: 1;
  136. border-left: 1px #D2D2D2 solid;
  137. /* #endif */
  138. }
  139. </style>