other / mew-iview

Commit c06e99d09f9f36cdd40c198f1e5b0daa762722ee

Authored by huixisheng
1 parent 2d74744d

Support Breadcrumb 

keep slot sepatator
Showing 7 changed files with 59 additions and 12 deletions   Show diff stats
Inline Side-by-side
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 - [x] Tabs 53 - [x] Tabs
54 - [x] Dropdown 54 - [x] Dropdown
55 - [ ] Page 55 - [ ] Page
56 -- [ ] Breadcrumb 56 +- [x] Breadcrumb
57 - [x] Steps 57 - [x] Steps
58 - [ ] LoadingBar 58 - [ ] LoadingBar
59 - [x] Circle 59 - [x] Circle
@@ -76,7 +76,7 @@ @@ -76,7 +76,7 @@
76 76
77 ## Install 77 ## Install
78 78
79 -### Install vue-webpack project in the first place 79 +### Install vue-webpack project in the first place
80 80
81 Use [iview-project](https://github.com/iview/iview-project)(Recommended) Or [vue-cli](https://github.com/vuejs/vue-cli) 81 Use [iview-project](https://github.com/iview/iview-project)(Recommended) Or [vue-cli](https://github.com/vuejs/vue-cli)
82 82
src/components/breadcrumb/breadcrumb-item.vue
  Show/Hide comments   View file @c06e99d
@@ -6,8 +6,10 @@ @@ -6,8 +6,10 @@
6 <span v-else :class="linkClasses"> 6 <span v-else :class="linkClasses">
7 <slot></slot> 7 <slot></slot>
8 </span> 8 </span>
9 - <span :class="separatorClasses">  
10 - <slot name="separator">{{{ separator }}}</slot> 9 + <span :class="separatorClasses" v-html="separator" v-if="!showSeparator">
  10 + </span>
  11 + <span :class="separatorClasses" v-else>
  12 + <slot name="separator"></slot>
11 </span> 13 </span>
12 </span> 14 </span>
13 </template> 15 </template>
@@ -18,12 +20,17 @@ @@ -18,12 +20,17 @@
18 props: { 20 props: {
19 href: { 21 href: {
20 type: String 22 type: String
21 - },  
22 - separator: {  
23 - type: String,  
24 - default: '/'  
25 } 23 }
26 }, 24 },
  25 + data () {
  26 + return {
  27 + separator: '',
  28 + showSeparator: false
  29 + }
  30 + },
  31 + mounted () {
  32 + this.showSeparator = this.$slots.separator !== undefined;
  33 + },
27 computed: { 34 computed: {
28 linkClasses () { 35 linkClasses () {
29 return `${prefixCls}-link`; 36 return `${prefixCls}-link`;
src/components/breadcrumb/breadcrumb.vue
  Show/Hide comments   View file @c06e99d
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 return `${prefixCls}`; 18 return `${prefixCls}`;
19 } 19 }
20 }, 20 },
21 - compiled () { 21 + mounted () {
22 this.updateChildren(); 22 this.updateChildren();
23 }, 23 },
24 methods: { 24 methods: {
@@ -5,7 +5,7 @@ import Affix from &#39;./components/affix&#39;; @@ -5,7 +5,7 @@ import Affix from &#39;./components/affix&#39;;
5 import Alert from './components/alert'; 5 import Alert from './components/alert';
6 // import BackTop from './components/back-top'; 6 // import BackTop from './components/back-top';
7 import Badge from './components/badge'; 7 import Badge from './components/badge';
8 -// import Breadcrumb from './components/breadcrumb'; 8 +import Breadcrumb from './components/breadcrumb';
9 import Button from './components/button'; 9 import Button from './components/button';
10 import Card from './components/card'; 10 import Card from './components/card';
11 import Carousel from './components/carousel'; 11 import Carousel from './components/carousel';
@@ -51,8 +51,8 @@ const iview = { @@ -51,8 +51,8 @@ const iview = {
51 Alert, 51 Alert,
52 // BackTop, 52 // BackTop,
53 Badge, 53 Badge,
54 - // Breadcrumb,  
55 - // BreadcrumbItem: Breadcrumb.Item, 54 + Breadcrumb,
  55 + BreadcrumbItem: Breadcrumb.Item,
56 // iButton: Button, 56 // iButton: Button,
57 Button, 57 Button,
58 ButtonGroup: Button.Group, 58 ButtonGroup: Button.Group,
@@ -39,6 +39,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -39,6 +39,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
39 <li><router-link to="/poptip">Poptip</router-link></li> 39 <li><router-link to="/poptip">Poptip</router-link></li>
40 <li><router-link to="/slider">Slider</router-link></li> 40 <li><router-link to="/slider">Slider</router-link></li>
41 <li><router-link to="/dropdown">Dropdown</router-link></li> 41 <li><router-link to="/dropdown">Dropdown</router-link></li>
  42 + <li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
42 </ul> 43 </ul>
43 </nav> 44 </nav>
44 <router-view></router-view> 45 <router-view></router-view>
@@ -120,6 +120,10 @@ const router = new VueRouter({ @@ -120,6 +120,10 @@ const router = new VueRouter({
120 { 120 {
121 path: '/dropdown', 121 path: '/dropdown',
122 component: require('./routers/dropdown.vue') 122 component: require('./routers/dropdown.vue')
  123 + },
  124 + {
  125 + path: '/breadcrumb',
  126 + component: require('./routers/breadcrumb.vue')
123 } 127 }
124 ] 128 ]
125 }); 129 });
test/routers/breadcrumb.vue 0 → 100644
  Show/Hide comments   View file @c06e99d
  1 +<style>
  2 + .demo-breadcrumb-separator{
  3 + color: #ff5500;
  4 + padding: 0 5px;
  5 + }
  6 +</style>
  7 +<template>
  8 +<div>
  9 + <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
  10 + <Breadcrumb-item href="/">Home4</Breadcrumb-item>
  11 + <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
  12 + <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
  13 + </Breadcrumb>
  14 + <Breadcrumb separator="">
  15 + <Breadcrumb-item href="/">
  16 + <template>Home</template>
  17 + <template slot="separator">
  18 + <b style="color: #ff5500;">-></b>
  19 + </template>
  20 + </Breadcrumb-item>
  21 + <Breadcrumb-item href="/components/breadcrumb">
  22 + <template>Breadcrumb</template>
  23 + <template slot="separator">
  24 + <b style="color: #ff5500;">-></b>
  25 + </template>
  26 + </Breadcrumb-item>
  27 + <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
  28 + </Breadcrumb>
  29 +</div>
  30 +</template>
  31 +<script>
  32 + export default {
  33 +
  34 + }
  35 +</script>
0 \ No newline at end of file 36 \ No newline at end of file