@wallejs/components-nav-menu NPM

this is a han-clouds' components

no need to install, just import and use it

版本更新日志：

1，在原来的基础上去除左侧侧菜单 2，修改icon 3，简化配置，尽量统一风格

使用框架

1，VUE 2，less

主要文件

1. index.vue

<template>
    <aside class="sider-container" :class="{'menu-show': visible}">
        <div class="menu-mask" :style="{'background-color':maskBgColor}" @click="handleMaskClick"/>
        <div class="second-menu" :style="{ 'background-color': menuBgColor}">
            <ul class="platform-list">
                <platform-item
                    :data="platform"
                    :target="target"
                    :index="index"
                    v-for="(platform, index) in platformData"
                    :key="index"
                    @close="handleMaskClick"
                />
            </ul>
        </div>
    </aside>
</template>

<script>
import { type } from 'os'
import './index.less'
import PlatformItem from './platform-item'

export default {
    name: 'sider-container',
    props: {
        visible: Boolean,
        platformData: {
            type: Array,
            default() {
                return []
            }
        },
        target:{
            type:String,
            default:'_blank'
        },
        menuBgColor:String,  
        maskBgColor:String,         
    },
    components: {
        PlatformItem
    },
    methods: {
        handleMaskClick() {
            this.$emit('update:visible', false)
            this.$emit('on-close', false)
        }
    }
}
</script>

2.platform-item.vue

<template>
    <li
        class="platform-item"
        :ref="index"
        @click="handleItem"
        @mouseenter="enterItem(index)"
        @mouseleave="leaveItem(index)"
    >
        <a :href="data.url" :target="target">
            <i class="icon-sprite" :class="[data.icon]" />
            <div class="item-info">
                <p class="item-name" :style="{ 'color': data.nameColor }">{{ data.name }}</p>
                <p
                    :title="data.desc"
                    class="item-desc"
                    :style="{ 'color': data.descColor }"
                >{{ data.desc }}</p>
            </div>
        </a>
    </li>
</template>


<script>
import { type } from 'os'

export default {
    props: {
        data: {
            type: Object,
            default() {
                return {}
            }
        },
        target: String,
        index: Number
    },
    methods: {
        handleItem() {
            this.$emit('close')
        },
        enterItem(key) {
            if (this.$refs[key]) {
                this.$refs[key].style.backgroundColor = this.data.hoverBgColor
                this.$refs[key].getElementsByClassName('item-name')[0].style.color = this.data.hoverColor
                this.$refs[key].getElementsByClassName('item-desc')[0].style.color = this.data.hoverColor
            }
        },
        leaveItem(key) {
            if (this.$refs[key]) {
                this.$refs[key].style.backgroundColor = ''
                this.$refs[key].getElementsByClassName('item-name')[0].style.color = this.data.nameBgColor || ''
                this.$refs[key].getElementsByClassName('item-desc')[0].style.color = this.data.descBgColor || ''
            }
        }
    }
}
</script>

参数配置

index.vue

参数名	说明	类型	默认值
visible	显示控制参数	Boolean	false
platformData	菜单参数	Object	[]
target	在何处打开链接(同a标签)	String	'_blank'
menuBgColor	菜单背景颜色	String	'#f7f7f7'
maskBgColor	蒙版背景色	String	'#000000'

参数platformData下元素(Object)属性

参数名	说明	类型	默认值
name	菜单名称	String	''
nameColor	菜单名称颜色	String	'#333333'
desc	菜单描述	String	''
descColor	菜单描述颜色	String	'#B2B2B2'
icon	菜单图标	String	"iconfont"
url	菜单导航路径	String	''
hoverBgColor	hover态菜单背景色	String	'#5187ed0c'
hoverColor	hover态菜单字体色	String	'#5187ed'