面包屑组件

概述

1 .显示网站的层级结构,告知用户当前所在的位置,以及向上级导航的时候使用
2 .这就要求必须是一个slot
3 .但是还有可能需要一种展示当前选择的所有选项的。 类似于级联显示的最后选择结果,表现是和这个一样的,只不过是添加前往路径的时候比较麻烦。
4 .而且我举得这个不用slot写还是好些一点,slot允许让玩家自己加入任意的组件,会不会可能输入一些无法兼容的组件,最后导致显示错误。
5 .如果自己写的话,最多就是让他传一些数据结构,自己把能想到的功能都预先想好,所做的只是根据传入的数据来决定是否展示dom结构岂不是更好。
6 .面包屑好像并不需要传到下面一些组件,或者dom结构,所以不需要用到slot这个功能

功能

1 .to 设置属性添加链接
2 .支持传入图标
3 .分隔符自定义,设置分隔符的样式
4 .

发现

1 .vue props传递数据的时候,特殊字符需要转义,比如@,#,这些需要传下去当图标的字符串 /@这样才可以。


2 .




@name:.breadcrumb;

@{name}{
    .ds;
    height: 30px;
    .fb_heng;
    color:@info;
    line-height: 30px;

    &_cell{
        .ds;
        .fb_heng;
        .h;
        padding: 5px 0px;
        margin-left:5px;
    }
    &_separator{
        width: 10px;
        height: 30px;
    }
    &_icon{
        width: 20px;
        height: 30px;
        .ds;
        .fb_jun;
    }
    &_svg{
        width: 1em;
        height: 1em;
        color:@info;
    }
    &_value{
        height:30px;
        width: auto;
    }
}

你可能感兴趣的:(面包屑组件)