Support Breadcrumb

keep slot sepatator
This commit is contained in:
huixisheng 2017-03-03 21:05:30 +08:00
parent 2d74744daf
commit c06e99d09f
7 changed files with 59 additions and 12 deletions

View file

@ -39,6 +39,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/poptip">Poptip</router-link></li>
<li><router-link to="/slider">Slider</router-link></li>
<li><router-link to="/dropdown">Dropdown</router-link></li>
<li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
</ul>
</nav>
<router-view></router-view>

View file

@ -120,6 +120,10 @@ const router = new VueRouter({
{
path: '/dropdown',
component: require('./routers/dropdown.vue')
},
{
path: '/breadcrumb',
component: require('./routers/breadcrumb.vue')
}
]
});

View file

@ -0,0 +1,35 @@
<style>
.demo-breadcrumb-separator{
color: #ff5500;
padding: 0 5px;
}
</style>
<template>
<div>
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
<Breadcrumb-item href="/">Home4</Breadcrumb-item>
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
<Breadcrumb separator="">
<Breadcrumb-item href="/">
<template>Home</template>
<template slot="separator">
<b style="color: #ff5500;">-></b>
</template>
</Breadcrumb-item>
<Breadcrumb-item href="/components/breadcrumb">
<template>Breadcrumb</template>
<template slot="separator">
<b style="color: #ff5500;">-></b>
</template>
</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
</div>
</template>
<script>
export default {
}
</script>