前端 vue组件 layout-button-group - 按钮组 - 高效开发 - 戴向天

大家好！我叫戴向天

QQ群：602504799

QQ:809002582

如若有不理解的，可加QQ群进行咨询了解

layout-div 组件详情 》https://blog.csdn.net/weixin_41088946/article/details/91448369

layout-image 组件详情》https://blog.csdn.net/weixin_41088946/article/details/90759906

layout-swipr 组件详情》https://blog.csdn.net/weixin_41088946/article/details/93395452

touch封装》https://blog.csdn.net/weixin_41088946/article/details/90764437

<template>

  <layout-swipe :auto-play="false">
    <layout-div v-for="(page,p) in getRightFormat" :key="p">
      <layout-div class="flex over-h flex-bt" v-for="(row,key) in page" :key="key">
        <layout-div class="flex flex-1 flex-center over-h" v-for="(column,c) in row" :key="c">
          <layout-div class="t-c" @click="clickHandle(column)" :pad="[20,0]" v-if="column.url || column.name">
            <layout-image :src="column.url" :width="80" :height="80" class="mar-a"/>
            <layout-div :pad="[20,0,0]">{{column.name}}</layout-div>
          </layout-div>
        </layout-div>
      </layout-div>
    </layout-div>
    <layout-div slot="point"></layout-div>
  </layout-swipe>


</template>
<script>
  import LayoutSwipe from "./layout-swipe";
  import WxImage from "./layout-image";

  export default {
    components: {LayoutImage, LayoutSwipe },
    props: {
      icon: {
        type: Object,
        default: () => {
          return {
            width: 80,
            height: 80,
            fillet: 0
          }
        }
      },
      row: {        //行数
        type: Number,
        default: 2
      },
      column: {    //列数
        type: Number,
        default: 5
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        buttons: [],
      }
    },
    methods: {
      clickHandle(column) {      //将点击事件传送出去
        this.$emit('click', column)
      }
    },
    computed: {
      getRightFormat() {   //获取正确的数据格式
        let column = [],     //每一行的数量
          row = [],         //一共多少列
          page = []
        this.list.forEach((item, i) => {
          if (i % this.column < this.column) {
            column.push(item);
          }
          if (column.length == this.column) {
            row.push(column);
            column = [];
          }
        })
        if (column.length) {
          while (column.length < this.column) column.push({})
          row.push(column);
        }

        row.forEach((item, i) => {
          page.push(item);
          if (page.length == this.row) {
            this.buttons.push(page)
            page = []
          }
        })
        if (page.length) this.buttons.push(page)
        return this.buttons
      }
    }
  }
</script>

使用方法

    <layout-button-group :list="list" @click="clickHandle"/>
    
export default {
    components: {LayoutButtonGroup},
    data() {
      return {
        list: [
          {name: '郭德纲', url: 'https://img.cct58.com/201612/16/10-42-39-48-12.jpg'},
          {name: '柳云龙', url: 'https://img.cct58.com/201612/16/17-16-20-59-12.jpg'},
          {name: '舒淇', url: 'https://img.cct58.com/201612/16/17-39-40-28-26.jpg'},
          {name: '安以轩', url: 'https://img.cct58.com/201612/16/14-22-11-95-10.jpg'},
          {name: '袁立', url: 'https://img.cct58.com/201612/16/15-09-00-87-8.jpg'},
          {name: '古天乐', url: 'https://img.cct58.com/201612/16/09-48-33-79-10.jpg'},
          {name: '张瑞希', url: 'https://img.cct58.com/201612/16/15-53-24-25-10.jpg'},
          {name: '胡可', url: 'https://img.cct58.com/201612/16/15-09-41-54-10.jpg'},
          {name: '顾长卫', url: 'https://img.cct58.com/caiji/bdjq/170920/11/20170920115059.jpg'},
          {name: '迈克尔·杰克逊', url: 'https://img.cct58.com/201703/28/13/14ce36d3d539b600d50e5924e050352ac75cb765.jpg'},
          {name: '李瑞镇', url: 'https://img.cct58.com/201703/28/13/f9dcd100baa1cd111b8d1086bc12c8fcc3ce2d58.jpg'},
          {name: '彭浩翔', url: 'https://img.cct58.com/caiji/bdjq/170920/01/20170920015033.jpg'},
          {name: '李克勤', url: 'https://img.cct58.com/caiji/bdjq/170920/03/20170920155612.jpg'},
          {name: '赵子琪', url: 'https://img.cct58.com/201612/16/14-38-22-18-14.png'},
          {name: '王潮歌', url: 'https://img.cct58.com/201703/29/13/0824ab18972bd40708667de572899e510fb30900.jpg'},
          {name: '李念', url: 'https://img.cct58.com/201612/16/14-51-18-59-14.jpg'},
        ],
        params: {
          mobile: '',
          password: ''
        },
      }
    },
    methods: {
      clickHandle(e){
        console.log(`您点击的是${e.name}`)
      },
    }
  }

效果图

class - style 具体内容如下

css 参考的 UI设计尺寸为 750*1334

.flex {
  display: flex;
}
.over-h {
  overflow: hidden;
}
.flex-bt {
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.mar-a{
  margin: 0 auto;
}