uni-grid-item copy.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
  3. <view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }" :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }" class="uni-grid-item__box" @click="_onClick">
  4. <slot />
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. /**
  10. * GridItem 宫格
  11. * @description 宫格组件
  12. * @tutorial https://ext.dcloud.net.cn/plugin?id=27
  13. * @property {Number} index 子组件的唯一标识 ,点击gird会返回当前的标识
  14. */
  15. export default {
  16. name: 'UniGridItem',
  17. inject: ['grid'],
  18. props: {
  19. index: {
  20. type: Number,
  21. default: 0
  22. }
  23. },
  24. data() {
  25. return {
  26. column: 0,
  27. showBorder: true,
  28. square: true,
  29. highlight: true,
  30. left: 0,
  31. top: 0,
  32. openNum: 2,
  33. width: 0,
  34. borderColor: '#e5e5e5'
  35. }
  36. },
  37. created() {
  38. this.column = this.grid.column
  39. this.showBorder = this.grid.showBorder
  40. this.square = this.grid.square
  41. this.highlight = this.grid.highlight
  42. this.top = this.hor === 0 ? this.grid.hor : this.hor
  43. this.left = this.ver === 0 ? this.grid.ver : this.ver
  44. this.borderColor = this.grid.borderColor
  45. this.grid.children.push(this)
  46. // this.grid.init()
  47. this.width = this.grid.width
  48. },
  49. beforeDestroy() {
  50. this.grid.children.forEach((item, index) => {
  51. if (item === this) {
  52. this.grid.children.splice(index, 1)
  53. }
  54. })
  55. },
  56. methods: {
  57. _onClick() {
  58. this.grid.change({
  59. detail: {
  60. index: this.index
  61. }
  62. })
  63. }
  64. }
  65. }
  66. </script>
  67. <style scoped>
  68. .uni-grid-item {
  69. /* #ifndef APP-NVUE */
  70. height: 100%;
  71. display: flex;
  72. /* #endif */
  73. }
  74. .uni-grid-item__box {
  75. /* #ifndef APP-NVUE */
  76. display: flex;
  77. width: 100%;
  78. /* #endif */
  79. position: relative;
  80. flex: 1;
  81. flex-direction: column;
  82. }
  83. .uni-grid-item--border {
  84. position: relative;
  85. /* #ifdef APP-NVUE */
  86. border-bottom-color: #e5e5e5;
  87. border-bottom-style: solid;
  88. border-bottom-width: 0.5px;
  89. border-right-color: #e5e5e5;
  90. border-right-style: solid;
  91. border-right-width: 0.5px;
  92. /* #endif */
  93. /* #ifndef APP-NVUE */
  94. z-index: 0;
  95. /* #endif */
  96. }
  97. /* #ifndef APP-NVUE */
  98. .uni-grid-item--border:after {
  99. content: '';
  100. position: absolute;
  101. bottom: 0;
  102. left: 0;
  103. top: 0;
  104. right: 0;
  105. border-bottom-style: solid;
  106. border-bottom-width: 1px;
  107. border-bottom-color: inherit;
  108. border-right-style: solid;
  109. border-right-width: 1px;
  110. border-right-color: inherit;
  111. box-sizing: border-box;
  112. width: 200%;
  113. height: 200%;
  114. transform: scale(0.5);
  115. transform-origin: left top;
  116. z-index: -1;
  117. }
  118. /* #endif */
  119. .uni-grid-item--border-top {
  120. position: relative;
  121. /* #ifdef APP-NVUE */
  122. border-top-color: #e5e5e5;
  123. border-top-style: solid;
  124. border-top-width: 0.5px;
  125. /* #endif */
  126. /* #ifndef APP-NVUE */
  127. height: 100%;
  128. box-sizing: border-box;
  129. z-index: 0;
  130. /* #endif */
  131. }
  132. /* #ifndef APP-NVUE */
  133. .uni-grid-item--border-top:after {
  134. content: '';
  135. position: absolute;
  136. bottom: 0;
  137. left: 0;
  138. top: 0;
  139. right: 0;
  140. border-top-style: solid;
  141. border-top-width: 1px;
  142. border-top-color: inherit;
  143. box-sizing: border-box;
  144. width: 200%;
  145. height: 200%;
  146. transform: scale(0.5);
  147. transform-origin: left top;
  148. z-index: -1;
  149. }
  150. /* #endif */
  151. .uni-highlight:active {
  152. background-color: #f1f1f1;
  153. }
  154. </style>