93 lines
1.5 KiB
Vue
93 lines
1.5 KiB
Vue
<template>
|
|
<div :class="{'is-select':select}" class="x-menu-item">
|
|
<i :style="{backgroundColor: select ? iconColor || '#2362FB' : '#edf2f6'}" :class="['x-menu-item__icon', iconClass]" />
|
|
<span class="x-menu-item__label">{{ label }}</span>
|
|
<el-badge v-if="num > 0" :max="99" :value="num"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// 菜单
|
|
name: 'xMenuItem',
|
|
components: {},
|
|
props: {
|
|
iconClass: String,
|
|
iconColor: String,
|
|
label: String,
|
|
// 关键字
|
|
name: String,
|
|
num: [String, Number],
|
|
select: Boolean
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
mounted() {},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.x-menu-item {
|
|
padding: 12px 20px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&__icon {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
background-color: #edf2f6;
|
|
color: #8a94a6;;
|
|
}
|
|
|
|
&__label {
|
|
color: #333;
|
|
font-size: 13px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
&.is-select {
|
|
.x-menu-item__icon {
|
|
/* background-color: $x-color-primary;*/
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.x-menu-item.is-select,
|
|
.x-menu-item:hover {
|
|
background-color: #f6f8fa;
|
|
}
|
|
|
|
.x-menu-item::before {
|
|
content: ' ';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background-color: #2362fb;
|
|
opacity: 0;
|
|
}
|
|
|
|
.x-menu-item.is-select::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.el-badge .el-badge__content {
|
|
border: none;
|
|
top: 0;
|
|
}
|
|
|
|
.el-badge {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 15px;
|
|
}
|
|
</style>
|