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