uni-grid.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="uni-grid" :class="{'uni-grid-no-border':!showBorder,'uni-grid-no-out-border':showBorder && !showOutBorder}">
  3. <view class="uni-grid__flex" v-for="(items,i) in gridGroup" :key="i">
  4. <view class="uni-grid-item" hover-class="uni-grid-item-hover" :hover-start-time="20" :hover-stay-time="70" v-for="(item,index) in items"
  5. :key="index" :class="[index == columnNum ? 'uni-grid-item-last' : '','uni-grid-item-' + type]" @click="onClick(i,index,item.url)" :style="{visibility:item.seize ? 'hidden' : 'inherit'}">
  6. <view class="uni-grid-item__content" v-if="!item.seize">
  7. <image class="uni-grid-item-image" :src="item.image"></image>
  8. <text class="uni-grid-item-text">{{item.text}}</text>
  9. </view>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. name: "uni-grid",
  17. props: {
  18. options: Array,
  19. type: { //布局格式,长方形oblong,正方形square
  20. type: String,
  21. default: 'square'
  22. },
  23. columnNum: { //每一行有多少个
  24. type: [Number, String],
  25. default: 3
  26. },
  27. showOutBorder: { //显示外边框
  28. type: [Boolean, String],
  29. default: true
  30. },
  31. showBorder: { //是否显示border,如果为false,showOutBorder无效
  32. type: [Boolean, String],
  33. default: true
  34. }
  35. },
  36. data() {
  37. return {}
  38. },
  39. created() {
  40. this.columnNumber = this.gridGroup[0].length
  41. },
  42. computed: {
  43. gridGroup() {
  44. let group = []
  45. let groupItem = []
  46. this.options && this.options.forEach((item, index) => {
  47. groupItem.push(item)
  48. if (index % this.columnNum === this.columnNum - 1) {
  49. group.push(groupItem)
  50. groupItem = []
  51. }
  52. })
  53. if (groupItem.length > 0) {
  54. if (this.columnNum > groupItem.length) {
  55. for (let i = 0,length = groupItem.length; i < this.columnNum - length; i++) {
  56. groupItem.push({seize:true})
  57. }
  58. }
  59. group.push(groupItem)
  60. }
  61. groupItem = null
  62. return group
  63. }
  64. },
  65. methods: {
  66. onClick(index, num,url) {
  67. uni.navigateTo({
  68. url: url
  69. });
  70. }
  71. }
  72. }
  73. </script>
  74. <style>
  75. @charset "UTF-8";
  76. .uni-grid {
  77. position: relative;
  78. display: flex;
  79. flex-direction: column;
  80. }
  81. .uni-grid__flex {
  82. display: flex;
  83. flex-direction: row;
  84. }
  85. .uni-grid-item {
  86. display: flex;
  87. position: relative;
  88. flex-direction: column;
  89. background-color: #FFFFFF;
  90. flex: 1
  91. }
  92. .uni-grid-item:before {
  93. display: block;
  94. content: " ";
  95. padding-bottom: 100%
  96. }
  97. .uni-grid-item:after {
  98. content: '';
  99. position: absolute;
  100. z-index: 1;
  101. transform-origin: center;
  102. box-sizing: border-box;
  103. top: -50%;
  104. left: -50%;
  105. right: -50%;
  106. bottom: -50%;
  107. border-color: #c8c7cc;
  108. border-style: solid;
  109. border-width: 1px;
  110. -webkit-transform: scale(.5);
  111. transform: scale(.5);
  112. border-top-width: 0;
  113. border-left-width: 0
  114. }
  115. .uni-grid-item__content {
  116. position: absolute;
  117. left: 0;
  118. top: 0;
  119. width: 100%;
  120. height: 100%;
  121. display: flex;
  122. flex-direction: column;
  123. justify-content: center;
  124. align-items: center
  125. }
  126. .uni-grid-item-text {
  127. font-size: 32upx;
  128. color: #333;
  129. margin-top: 12upx
  130. }
  131. .uni-grid-item-hover {
  132. background-color: #f1f1f1
  133. }
  134. .uni-grid-item-image {
  135. width: 80upx;
  136. height: 80upx
  137. }
  138. .uni-grid .uni-grid__flex:first-child .uni-grid-item:after {
  139. border-top-width: 1px
  140. }
  141. .uni-grid .uni-grid__flex .uni-grid-item:first-child:after {
  142. border-left-width: 1px
  143. }
  144. .uni-grid.uni-grid-no-out-border .uni-grid__flex:first-child .uni-grid-item:after {
  145. border-top-width: 0
  146. }
  147. .uni-grid.uni-grid-no-out-border .uni-grid__flex:last-child .uni-grid-item:after {
  148. border-bottom-width: 0
  149. }
  150. .uni-grid.uni-grid-no-out-border .uni-grid__flex .uni-grid-item:first-child:after {
  151. border-left-width: 0
  152. }
  153. .uni-grid.uni-grid-no-out-border .uni-grid__flex .uni-grid-item:last-child:after {
  154. border-right-width: 0
  155. }
  156. .uni-grid.uni-grid-no-border .uni-grid-item:after {
  157. border-width: 0
  158. }
  159. .uni-grid.uni-grid-no-border .uni-grid__flex:first-child .uni-grid-item:after {
  160. border-top-width: 0
  161. }
  162. .uni-grid.uni-grid-no-border .uni-grid__flex .uni-grid-item:first-child:after {
  163. border-left-width: 0
  164. }
  165. .uni-grid-item-oblong.uni-grid-item:before {
  166. padding-bottom: 60%
  167. }
  168. .uni-grid-item-oblong .uni-grid-item__content {
  169. flex-direction: row
  170. }
  171. .uni-grid-item-oblong .uni-grid-item-image {
  172. width: 52upx;
  173. height: 52upx
  174. }
  175. .uni-grid-item-oblong .uni-grid-item-text {
  176. margin-top: 0;
  177. margin-left: 12upx
  178. }
  179. </style>