Commit 91f01c1c2567c8839bd9f343f65693fb02800ccb
1 parent
76ac7eee
Exists in
master
[新增] 标签栏
Showing
5 changed files
with
183 additions
and
2 deletions
Show diff stats
examples/router/routes.js
| @@ -60,6 +60,12 @@ const _components = [ | @@ -60,6 +60,12 @@ const _components = [ | ||
| 60 | meta: { title: 'NavBar 导航栏' }, | 60 | meta: { title: 'NavBar 导航栏' }, |
| 61 | component: () => import('@/views/docs/component/nav-bar.md'), | 61 | component: () => import('@/views/docs/component/nav-bar.md'), |
| 62 | }, | 62 | }, |
| 63 | + { | ||
| 64 | + path: 'tab-bar', | ||
| 65 | + name: 'tab-bar', | ||
| 66 | + meta: { title: 'TabBar 标签栏' }, | ||
| 67 | + component: () => import('@/views/docs/component/tab-bar.md'), | ||
| 68 | + }, | ||
| 63 | ] | 69 | ] |
| 64 | }, | 70 | }, |
| 65 | { | 71 | { |
| @@ -0,0 +1,36 @@ | @@ -0,0 +1,36 @@ | ||
| 1 | +# TabBar 标签栏 | ||
| 2 | + | ||
| 3 | +说明 | ||
| 4 | + | ||
| 5 | +## 基础用法 | ||
| 6 | + | ||
| 7 | +说明 | ||
| 8 | + | ||
| 9 | +::: snippet 示例 | ||
| 10 | + | ||
| 11 | +```html | ||
| 12 | +<template> | ||
| 13 | + <div class="tab-bar-demo"> | ||
| 14 | + <zui-tab-bar :items="items"></zui-tab-bar> | ||
| 15 | + </div> | ||
| 16 | +</template> | ||
| 17 | + | ||
| 18 | +<script> | ||
| 19 | +export default { | ||
| 20 | + data() { | ||
| 21 | + return { | ||
| 22 | + items: [{ name: 1, label: '标签1' }, { name: 2, label: '标签2' }] | ||
| 23 | + } | ||
| 24 | + } | ||
| 25 | +} | ||
| 26 | +</script> | ||
| 27 | + | ||
| 28 | +<style> | ||
| 29 | +.tab-bar-demo { | ||
| 30 | + background: #eee; | ||
| 31 | + padding: 20px; | ||
| 32 | +} | ||
| 33 | +</style> | ||
| 34 | +``` | ||
| 35 | + | ||
| 36 | +::: | ||
| 0 | \ No newline at end of file | 37 | \ No newline at end of file |
examples/views/docs/component/tag.md
| @@ -22,8 +22,9 @@ | @@ -22,8 +22,9 @@ | ||
| 22 | font-color="#fff" | 22 | font-color="#fff" |
| 23 | >续保3折起</zui-tag> | 23 | >续保3折起</zui-tag> |
| 24 | <zui-tag size="small" shape="circle" sharp="bottom-left" type="fill" fill-color="rgba(231, 64, 33, 1)" font-color="#fff"> | 24 | <zui-tag size="small" shape="circle" sharp="bottom-left" type="fill" fill-color="rgba(231, 64, 33, 1)" font-color="#fff"> |
| 25 | - 发布3条 | ||
| 26 | - </zui-tag> | 25 | + 发布3条 |
| 26 | + </zui-tag> | ||
| 27 | + <zui-tag size="small" shape="square" font-color="#28AA91" type="ghost">可选</zui-tag> | ||
| 27 | </div> | 28 | </div> |
| 28 | </template> | 29 | </template> |
| 29 | 30 |
| @@ -0,0 +1,54 @@ | @@ -0,0 +1,54 @@ | ||
| 1 | +.zui-tab-bar { | ||
| 2 | + position: relative; | ||
| 3 | + padding-left: 16px; | ||
| 4 | + padding-right: 16px; | ||
| 5 | + background-color: #fff; | ||
| 6 | +} | ||
| 7 | +.zui-tab-bar-inner { | ||
| 8 | + position: relative; | ||
| 9 | + width: 100%; | ||
| 10 | +} | ||
| 11 | +.zui-tab-bar-list { | ||
| 12 | + display: flex; | ||
| 13 | + justify-content: space-between; | ||
| 14 | + min-width: 100%; | ||
| 15 | +} | ||
| 16 | +.zui-tab-bar-item { | ||
| 17 | + flex: auto; | ||
| 18 | + flex-shrink: 0; | ||
| 19 | + position: relative; | ||
| 20 | + display: inline-flex; | ||
| 21 | + align-items: center; | ||
| 22 | + justify-content: center; | ||
| 23 | + color: #aaa; | ||
| 24 | + font-size: 14px; | ||
| 25 | + font-weight: 600; | ||
| 26 | + min-height: 50px; | ||
| 27 | + padding: 0 16px; | ||
| 28 | + margin: 0 auto; | ||
| 29 | + box-sizing: border-box; | ||
| 30 | + -webkit-user-select: none; | ||
| 31 | + -webkit-tap-highlight-color: transparent; | ||
| 32 | +} | ||
| 33 | +.zui-tab-bar-item::after { | ||
| 34 | + position: absolute; | ||
| 35 | + display: block; | ||
| 36 | + content: ''; | ||
| 37 | + border-color: transparent; | ||
| 38 | + border-width: 1px; | ||
| 39 | + border-style: solid; | ||
| 40 | + width: 100%; | ||
| 41 | + bottom: 0; | ||
| 42 | + left: 50%; | ||
| 43 | + transform: translateX(-50%); | ||
| 44 | +} | ||
| 45 | +.zui-tab-bar-item.is-active { | ||
| 46 | + color: #FCD404; | ||
| 47 | + font-weight: bold; | ||
| 48 | +} | ||
| 49 | +.is-active.zui-tab-bar-item::after { | ||
| 50 | + border-color: #FCD404; | ||
| 51 | +} | ||
| 52 | +.zui-tab-bar-item.is-disabled { | ||
| 53 | + color: #ccc; | ||
| 54 | +} |
| @@ -0,0 +1,84 @@ | @@ -0,0 +1,84 @@ | ||
| 1 | +<template> | ||
| 2 | + <div class="zui-tab-bar"> | ||
| 3 | + <div class="zui-tab-bar-inner"> | ||
| 4 | + <div class="zui-tab-bar-list"> | ||
| 5 | + <div class="zui-tab-bar-item" :class="itemClassRender(item)" v-for="(item, index) in items" :key="item.name" @click="$_onClick(item, index)"> | ||
| 6 | + <slot name="item" :item="item" :items="items" :index="index" :currentName="currentName">{{ item.label }}</slot> | ||
| 7 | + </div> | ||
| 8 | + </div> | ||
| 9 | + </div> | ||
| 10 | + </div> | ||
| 11 | +</template> | ||
| 12 | + | ||
| 13 | +<script> | ||
| 14 | +export default { | ||
| 15 | + name: "TabBar", | ||
| 16 | + props: { | ||
| 17 | + value: { | ||
| 18 | + type: [String, Number], | ||
| 19 | + default: "" | ||
| 20 | + }, | ||
| 21 | + items: { | ||
| 22 | + type: Array, | ||
| 23 | + default: function() { | ||
| 24 | + return []; | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | + }, | ||
| 28 | + data: function() { | ||
| 29 | + return { | ||
| 30 | + currentName: "" | ||
| 31 | + }; | ||
| 32 | + }, | ||
| 33 | + computed: { | ||
| 34 | + currentIndex: function() { | ||
| 35 | + for (var i = 0, len = this.items.length; i < len; i++) { | ||
| 36 | + if (this.items[i].name == this.currentName) { | ||
| 37 | + return i; | ||
| 38 | + } | ||
| 39 | + } | ||
| 40 | + }, | ||
| 41 | + currentTab: function() { | ||
| 42 | + if (this.currentIndex) { | ||
| 43 | + return this.items[this.currentIndex]; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + }, | ||
| 47 | + watch: { | ||
| 48 | + value: { | ||
| 49 | + immediate: true, | ||
| 50 | + handler: function(val) { | ||
| 51 | + if (val != this.currentName) { | ||
| 52 | + this.currentName = val; | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + } | ||
| 56 | + }, | ||
| 57 | + created: function() { | ||
| 58 | + if (this.currentName == "" && this.items.length) { | ||
| 59 | + this.currentName = this.items[0].name; | ||
| 60 | + this.$emit("change", this.items[0].name, this.items[0], 0, 0); | ||
| 61 | + } | ||
| 62 | + }, | ||
| 63 | + methods: { | ||
| 64 | + $_onClick: function(item, index) { | ||
| 65 | + if (item.disabled) { | ||
| 66 | + return; | ||
| 67 | + } | ||
| 68 | + this.$emit("change", item.name, item, index, this.currentIndex); | ||
| 69 | + this.currentName = item.name; | ||
| 70 | + this.$emit("input", item.name); | ||
| 71 | + }, | ||
| 72 | + itemClassRender: function(item) { | ||
| 73 | + return { | ||
| 74 | + "is-active": this.currentName == item.name, | ||
| 75 | + "is-disabled": !!item.disabled | ||
| 76 | + }; | ||
| 77 | + } | ||
| 78 | + } | ||
| 79 | +}; | ||
| 80 | +</script> | ||
| 81 | + | ||
| 82 | +<style> | ||
| 83 | +@import "./index.css"; | ||
| 84 | +</style> | ||
| 0 | \ No newline at end of file | 85 | \ No newline at end of file |