frontend / zui

Download as
Browse Code »

Commit 91f01c1c2567c8839bd9f343f65693fb02800ccb

Authored by 刘汉宸
1 parent 76ac7eee
Exists in master

[新增] 标签栏

Showing 5 changed files with 183 additions and 2 deletions   Show diff stats
examples/router/routes.js
  Diff comments   View file @91f01c1
... ... @@ -60,6 +60,12 @@ const _components = [
60 60 meta: { title: 'NavBar 导航栏' },
61 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 {
... ...
examples/views/docs/component/tab-bar.md 0 → 100644
  Diff comments   View file @91f01c1
... ... @@ -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 37 \ No newline at end of file
... ...
examples/views/docs/component/tag.md
  Diff comments   View file @91f01c1
... ... @@ -22,8 +22,9 @@
22 22 font-color="#fff"
23 23 >续保3折起</zui-tag>
24 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 28 </div>
28 29 </template>
29 30  
... ...
packages/tabBar/index.css 0 → 100644
  Diff comments   View file @91f01c1
... ... @@ -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 +}
... ...
packages/tabBar/index.vue 0 → 100644
  Diff comments   View file @91f01c1
... ... @@ -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 85 \ No newline at end of file
... ...