Vue+Element UI:侧边工具封装

1、效果图

Tips1：橙黄色的是父组件的背景色。

2、子组件封装代码

Tips1：该组件的封装主要用到了props属性、mouted()中初始化参数值、v-for循环列表渲染、子组件自定义点击事件与emit事件&属性值发送等。代码如下，

<template>
  <div>
    <div
      class="controlTool"
      v-for="(item, index) in itemlist"
      :key="index"
      @click="getItem(item, index)"
    >
      <img class="img-item" :src="item.imgUrl" alt="" :title="item.name" />
    </div>
  </div>
</template>
<script>
export default {
     
  props: {
     
    itemProperty: Array,
    require: true,
  },
  data() {
     
    return {
     
      itemlist: [
      //测试数据
        // {
     
        //   imgUrl: require('../../../static/imgs/admincenter/mapview.png'),
        //   name: '地理视图',
        // },
        // {
     
        //   imgUrl: require('../../../static/imgs/admincenter/dataview.png'),
        //   name: '数据视图',
        // },
        // {
     
        //   imgUrl: require('../../../static/imgs/admincenter/mixedview.png'),
        //   name: '混合视图',
        // },
      ],
    }
  },
  mounted() {
     
    //接受父组件中传递过来的数据
    this.$data.itemlist = this.$props.itemProperty
  },
  methods: {
     
    //点击事件
    getItem(item, index) {
     
      // console.log(this.$data.itemlist[index])
      // 自定义事件名称：clickItem，向父组件传递数据：当前选中项的属性值{imgUrl:"XXX",name:"XXX"}
      this.$emit('clickItem', this.$data.itemlist[index])
    },
  },
}
</script>
<style lang="less" scoped>
.controlTool {
     
  position: static;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  margin-bottom: 15px;
  background-color: #fff;
  .img-item {
     
    padding-top: 2px;
    width: 32px;
    height: 32px;
    border: none;
  }
}
</style>

3、父组件中使用

Tips1：只需要为子组件指定位置即可。

//1-导入子组件
import SliderTool from '../components/Controls/SliderTool'
//2-注册子组件
components: {
     
    SliderTool,
  },
//3-使用子组件（父子组件之间的传值、指定必要的css样式）
//3.1-预定义的属性值
 controlBtnList: [
        {
     
          imgUrl: require('../../static/imgs/admincenter/mapview.png'),
          name: '地理视图',
        },
        {
     
          imgUrl: require('../../static/imgs/admincenter/dataview.png'),
          name: '数据视图',
        },
        {
     
          imgUrl: require('../../static/imgs/admincenter/mixedview.png'),
          name: '混合视图',
        },
      ],
//3.2-子组件使用与传值
<div class="sliderTool-style">
          <SliderTool
            :itemProperty="controlBtnList"
            @clickItem="clickSliderTool"
          />
        </div>
//3.3-定位
.sliderTool-style {
     
    position: absolute;
    right: 15px;
  }
//4-添加子组件中提供的自定义事件
    clickSliderTool(value) {
     
      console.log(value)
      //判断被点击的按钮，执行业务逻辑代码
      switch (value.name) {
     
        case '地理视图': {
     
      	  //业务逻辑代码
          break
        }
        case '数据视图': {
     
       	 //业务逻辑代码
          break
        }
        case '混合视图': {
     
        //业务逻辑代码
          break
        }
      }
    },