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
README.md
  Show/Hide comments   View file @c06e99d
... ... @@ -53,7 +53,7 @@
53 53 - [x] Tabs
54 54 - [x] Dropdown
55 55 - [ ] Page
56   -- [ ] Breadcrumb
  56 +- [x] Breadcrumb
57 57 - [x] Steps
58 58 - [ ] LoadingBar
59 59 - [x] Circle
... ... @@ -76,7 +76,7 @@
76 76  
77 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 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 6 <span v-else :class="linkClasses">
7 7 <slot></slot>
8 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 13 </span>
12 14 </span>
13 15 </template>
... ... @@ -18,12 +20,17 @@
18 20 props: {
19 21 href: {
20 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 34 computed: {
28 35 linkClasses () {
29 36 return `${prefixCls}-link`;
... ...
src/components/breadcrumb/breadcrumb.vue
  Show/Hide comments   View file @c06e99d
... ... @@ -18,7 +18,7 @@
18 18 return `${prefixCls}`;
19 19 }
20 20 },
21   - compiled () {
  21 + mounted () {
22 22 this.updateChildren();
23 23 },
24 24 methods: {
... ...
src/index.js
  Show/Hide comments   View file @c06e99d
... ... @@ -5,7 +5,7 @@ import Affix from &#39;./components/affix&#39;;
5 5 import Alert from './components/alert';
6 6 // import BackTop from './components/back-top';
7 7 import Badge from './components/badge';
8   -// import Breadcrumb from './components/breadcrumb';
  8 +import Breadcrumb from './components/breadcrumb';
9 9 import Button from './components/button';
10 10 import Card from './components/card';
11 11 import Carousel from './components/carousel';
... ... @@ -51,8 +51,8 @@ const iview = {
51 51 Alert,
52 52 // BackTop,
53 53 Badge,
54   - // Breadcrumb,
55   - // BreadcrumbItem: Breadcrumb.Item,
  54 + Breadcrumb,
  55 + BreadcrumbItem: Breadcrumb.Item,
56 56 // iButton: Button,
57 57 Button,
58 58 ButtonGroup: Button.Group,
... ...
test/app.vue
  Show/Hide comments   View file @c06e99d
... ... @@ -39,6 +39,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
39 39 <li><router-link to="/poptip">Poptip</router-link></li>
40 40 <li><router-link to="/slider">Slider</router-link></li>
41 41 <li><router-link to="/dropdown">Dropdown</router-link></li>
  42 + <li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
42 43 </ul>
43 44 </nav>
44 45 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @c06e99d
... ... @@ -120,6 +120,10 @@ const router = new VueRouter({
120 120 {
121 121 path: '/dropdown',
122 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 36 \ No newline at end of file
... ...