lc-slider-menu

v0.20

左右联动菜单组件。

注意事项

  • 因为此组件实际开发过程中定制性非常高,故提供基础模板,建议开发时将源码移到项目中进行修改。
  • 当右边内容高度不足以撑满一屏幕时,不推荐使用此组件以免造成不可控问题。
  • 当右侧最后几个内容块高度较短,同时显示在一屏幕内时,左侧对应菜单可能会出现不会高亮选中的情况,或者左侧菜单不能点击的情况,属于正常现象。

效果

使用方法

<template>
<div class="wxc-demo">
<title title="lc-slider-menu"></title>
<category title="图文结合"></category>

<lc-slider-menu :mainHeight='1000' :menuStyles='menuStyles' :menus='menus'>
</lc-slider-menu>
</div>
</template>


<script>
import LcSliderMenu from 'lighting-ui/packages/lc-slider-menu';
import Utils from "lighting-ui/packages/utils";
import Title from 'lighting-ui/packages/_mods/title.vue';
import Category from 'lighting-ui/packages/_mods/category.vue';

export default {
components:{Title,Category,LcSliderMenu},
data () {
return {
menuStyles:{
width:150,
height:100
},
menus:[
{
name: 'menu1',
data: [ { name: 'aaaa' }, { name: 'bbb' }, { name: 'ccc' }, { name: 'ddd' }, { name: 'eee' }, { name: 'fff' }, { name: 'ggg' }]
},
{
name: 'menu2',
data: [ { name: 'aaaa' }, { name: 'bbb' }, { name: 'ccc' }, { name: 'ddd' }, { name: 'eee' }, { name: 'fff' }, { name: 'ggg' }]
},
{
name: 'menu3',
data: [ { name: 'aaaa' }, { name: 'bbb' }, { name: 'ccc' }, { name: 'ddd' }, { name: 'eee' }, { name: 'fff' }, { name: 'ggg' }]
},
]
}
},
methods: {
},
created() {
},
}
</script>
<style scoped>
.wxc-demo {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #fff;
}
</style>

可配置参数

Prop Type Required Default Description
menus Array N - 联动菜单数据项(注1)
mainHeight String/Number N 1334 组件高度
menuStyles Object N 左边导航样式(注2)

注1:此模板提供的数据结构固定,因为实际开发中数据类型和结构不可控,故在此只提供参考数据格式。

注2:单个属性定义如下:

  • width:菜单宽度
  • height:菜单高度