前端 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

使用方法

    
    
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;
}