项目初始化

gaoluyang

5 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-grid/components/uni-grid/uni-grid.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,142 @@
<template>
   <view class="uni-grid-wrap">
      <view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
         <slot />
      </view>
   </view>
</template>

<script>
   // #ifdef APP-NVUE
   const dom = uni.requireNativePlugin('dom');
   // #endif

   /**
    * Grid å®«æ ¼
    * @description å®«æ ¼ç»„件
    * @tutorial https://ext.dcloud.net.cn/plugin?id=27
    * @property {Number} column æ¯åˆ—显示个数
    * @property {String} borderColor è¾¹æ¡†é¢œè‰²
    * @property {Boolean} showBorder æ˜¯å¦æ˜¾ç¤ºè¾¹æ¡†
    * @property {Boolean} square æ˜¯å¦æ–¹å½¢æ˜¾ç¤º
    * @property {Boolean} Boolean ç‚¹å‡»èƒŒæ™¯æ˜¯å¦é«˜äº®
    * @event {Function} change ç‚¹å‡» grid è§¦å‘，e={detail:{index:0}}，index ä¸ºå½“前点击 gird ä¸‹æ ‡
    */
   export default {
      name: 'UniGrid',
      emits:['change'],
      props: {
         // æ¯åˆ—显示个数
         column: {
            type: Number,
            default: 3
         },
         // æ˜¯å¦æ˜¾ç¤ºè¾¹æ¡†
         showBorder: {
            type: Boolean,
            default: true
         },
         // è¾¹æ¡†é¢œè‰²
         borderColor: {
            type: String,
            default: '#D2D2D2'
         },
         // æ˜¯å¦æ­£æ–¹å½¢æ˜¾ç¤º,默认为 true
         square: {
            type: Boolean,
            default: true
         },
         highlight: {
            type: Boolean,
            default: true
         }
      },
      provide() {
         return {
            grid: this
         }
      },
      data() {
         const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
         return {
            elId,
            width: 0
         }
      },
      created() {
         this.children = []
      },
      mounted() {
         this.$nextTick(()=>{
            this.init()
         })
      },
      methods: {
         init() {
            setTimeout(() => {
               this._getSize((width) => {
                  this.children.forEach((item, index) => {
                     item.width = width
                  })
               })
            }, 50)
         },
         change(e) {
            this.$emit('change', e)
         },
         _getSize(fn) {
            // #ifndef APP-NVUE
            uni.createSelectorQuery()
               .in(this)
               .select(`#${this.elId}`)
               .boundingClientRect()
               .exec(ret => {
                  this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
                  fn(this.width)
               })
            // #endif
            // #ifdef APP-NVUE
            dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
               this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
               fn(this.width)
            })
            // #endif
         }
      }
   }
</script>

<style lang="scss" scoped>
   .uni-grid-wrap {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex: 1;
      flex-direction: column;
      /* #ifdef H5 */
      width: 100%;
      /* #endif */
   }

   .uni-grid {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      // flex: 1;
      flex-direction: row;
      flex-wrap: wrap;
   }

   .uni-grid--border {
      position: relative;
      /* #ifdef APP-NVUE */
      border-left-color: #D2D2D2;
      border-left-style: solid;
      border-left-width: 0.5px;
      /* #endif */
      /* #ifndef APP-NVUE */
      z-index: 1;
      border-left: 1px #D2D2D2 solid;
      /* #endif */
   }
</style>