chenhaodong / mew-iview

Commit 456daf3492b924f4346f003a1fddd34b98b6628b

Authored by 梁灏
1 parent 15368be1

support Tag 

support Tag
Showing 6 changed files with 50 additions and 50 deletions   Show diff stats
Inline Side-by-side
README.md
  Show/Hide comments   View file @456daf3
... ... @@ -44,7 +44,7 @@
44 44 - [x] Badge
45 45 - [ ] Collapse
46 46 - [x] Timeline
47   -- [ ] Tag
  47 +- [x] Tag
48 48 - [ ] Tooltip
49 49 - [ ] Poptip
50 50 - [ ] Carousel
... ...
src/components/tag/tag.vue
  Show/Hide comments   View file @456daf3
1 1 <template>
2   - <div :class="classes" transition="fade">
3   - <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.stop="close"></Icon>
4   - </div>
  2 + <transition name="fade">
  3 + <div :class="classes">
  4 + <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
  5 + </div>
  6 + </transition>
5 7 </template>
6 8 <script>
7 9 import Icon from '../icon';
... ...
src/index.js
  Show/Hide comments   View file @456daf3
... ... @@ -35,7 +35,7 @@ import Steps from &#39;./components/steps&#39;;
35 35 import Switch from './components/switch';
36 36 // import Table from './components/table';
37 37 // import Tabs from './components/tabs';
38   -// import Tag from './components/tag';
  38 +import Tag from './components/tag';
39 39 import Timeline from './components/timeline';
40 40 // import TimePicker from './components/time-picker';
41 41 // import Tooltip from './components/tooltip';
... ... @@ -102,7 +102,7 @@ const iview = {
102 102 // iTable: Table,
103 103 // Tabs: Tabs,
104 104 // TabPane: Tabs.Pane,
105   - // Tag,
  105 + Tag,
106 106 Timeline,
107 107 TimelineItem: Timeline.Item,
108 108 // TimePicker,
... ...
test/app.vue
  Show/Hide comments   View file @456daf3
... ... @@ -24,6 +24,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
24 24 <li><router-link to="/switch">Switch</router-link></li>
25 25 <li><router-link to="/alert">Alert</router-link></li>
26 26 <li><router-link to="/badge">Badge</router-link></li>
  27 + <li><router-link to="/tag">Tag</router-link></li>
27 28 </ul>
28 29 </nav>
29 30 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @456daf3
... ... @@ -60,6 +60,10 @@ const router = new VueRouter({
60 60 {
61 61 path: '/badge',
62 62 component: require('./routers/badge.vue')
  63 + },
  64 + {
  65 + path: '/tag',
  66 + component: require('./routers/tag.vue')
63 67 }
64 68 ]
65 69 });
... ...
test/routers/tag.vue
  Show/Hide comments   View file @456daf3
1 1 <template>
2   - <Tag>标签一</Tag>
3   - <Tag>标签二</Tag>
4   - <Tag closable>标签三</Tag>
5   - <Tag closable color="blue">标签一</Tag>
6   - <Tag closable color="green">标签二</Tag>
7   - <Tag closable color="red">标签三</Tag>
8   - <Tag closable color="yellow">标签四</Tag>
9   - <br><br>
10   - <Tag type="dot">标签一</Tag>
11   - <Tag type="dot" closable>标签一</Tag>
12   - <Tag type="dot" color="blue">标签一</Tag>
13   - <Tag type="dot" color="blue" closable>标签一</Tag>
14   - <Tag type="dot" color="green">标签一</Tag>
15   - <Tag type="dot" color="green" closable>标签一</Tag>
16   - <Tag type="dot" color="red">标签一</Tag>
17   - <Tag type="dot" color="red" closable>标签一</Tag>
18   - <Tag type="dot" color="yellow">标签一</Tag>
19   - <Tag type="dot" color="yellow" closable>标签一</Tag>
20   - <br><br>
21   - <Tag type="border">标签一</Tag>
22   - <Tag type="border" closable>标签一</Tag>
23   - <Tag type="border" color="blue">标签一</Tag>
24   - <Tag type="border" color="blue" closable>标签一</Tag>
25   - <Tag type="border" color="green">标签一</Tag>
26   - <Tag type="border" color="green" closable>标签一</Tag>
27   - <Tag type="border" color="red">标签一</Tag>
28   - <Tag type="border" color="red" closable>标签一</Tag>
29   - <Tag type="border" color="yellow">标签一</Tag>
30   - <Tag type="border" color="yellow" closable>标签一</Tag>
31   - <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
32   - <Modal
33   - :visible.sync="modal1"
34   - title="普通的Modal对话框标题"
35   - :loading="loading" @on-ok="ok">
36   - <p>对话框内容</p>
37   - <p>对话框内容</p>
38   - <p>对话框内容</p>
39   - {{ loading }}
40   - <i-button @click="loading = true">true</i-button>
41   - <i-button @click="loading = false">false</i-button>
42   - </Modal>
43   - <br><br>
44   - <Tag type="border" color="yellow" closable @click="clickTag" @on-close="clickTagClose">标签一</Tag>
  2 + <div>
  3 + <Tag>标签一</Tag>
  4 + <Tag>标签二</Tag>
  5 + <Tag closable>标签三</Tag>
  6 + <Tag closable color="blue">标签一</Tag>
  7 + <Tag closable color="green">标签二</Tag>
  8 + <Tag closable color="red">标签三</Tag>
  9 + <Tag closable color="yellow">标签四</Tag>
  10 + <br><br>
  11 + <Tag type="dot">标签一</Tag>
  12 + <Tag type="dot" closable>标签一</Tag>
  13 + <Tag type="dot" color="blue">标签一</Tag>
  14 + <Tag type="dot" color="blue" closable>标签一</Tag>
  15 + <Tag type="dot" color="green">标签一</Tag>
  16 + <Tag type="dot" color="green" closable>标签一</Tag>
  17 + <Tag type="dot" color="red">标签一</Tag>
  18 + <Tag type="dot" color="red" closable>标签一</Tag>
  19 + <Tag type="dot" color="yellow">标签一</Tag>
  20 + <Tag type="dot" color="yellow" closable>标签一</Tag>
  21 + <br><br>
  22 + <Tag type="border">标签一</Tag>
  23 + <Tag type="border" closable>标签一</Tag>
  24 + <Tag type="border" color="blue">标签一</Tag>
  25 + <Tag type="border" color="blue" closable>标签一</Tag>
  26 + <Tag type="border" color="green">标签一</Tag>
  27 + <Tag type="border" color="green" closable>标签一</Tag>
  28 + <Tag type="border" color="red">标签一</Tag>
  29 + <Tag type="border" color="red" closable>标签一</Tag>
  30 + <Tag type="border" color="yellow">标签一</Tag>
  31 + <Tag type="border" color="yellow" closable>标签一</Tag>
  32 + <Button type="primary" @click="modal1 = true">显示对话框</Button>
  33 + <br><br>
  34 + <Tag v-if="ccc" closable @on-close="clickTagClose">标签一</Tag>
  35 + </div>
45 36 </template>
46 37 <script>
47 38 import { Tag, Modal, iButton } from 'iview';
... ... @@ -50,7 +41,8 @@
50 41 data () {
51 42 return {
52 43 modal1: false,
53   - loading: true
  44 + loading: true,
  45 + ccc: true
54 46 }
55 47 },
56 48 methods: {
... ... @@ -63,6 +55,7 @@
63 55 console.log('click tag');
64 56 },
65 57 clickTagClose() {
  58 + this.ccc = false;
66 59 console.log('click tag close-icon');
67 60 }
68 61 }
... ...