Win Design

Tabs 标签页

代码演示

标签一

基础用法

Tabs标签页的基础用法；新增Tabs被右键点击事件

查看代码 < />

<template>
  <section class="tabs-demo">
      <div class="container">
        <w-tabs v-model="activeName1" @tab-click="handleClick" @mouse-right-click="handleMouseRightClick">
          <w-tab-pane label="标签一" name="first">标签一</w-tab-pane>
          <w-tab-pane label="第二标签" name="second">第二标签</w-tab-pane>
          <w-tab-pane label="标签三" name="third">标签三</w-tab-pane>
          <w-tab-pane label="标签四" name="fourth">标签四</w-tab-pane>
        </w-tabs>
      </div>
  </section>
</template>

<script>
export default {
    data () {
        return {
          activeName1: 'first'
        }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      },
      handleMouseRightClick(tab, event) {
        event.preventDefault();
        console.log(tab, event)
      },
    },
}
</script>
标签一

可删除

设置 closable

查看代码 < />

<template>
  <section class="tabs-demo">
      <div class="container">
        <w-tabs v-model="editableTabsValue" @tab-click="handleClick" closable @tab-remove="handleRemove">
          <w-tab-pane :key="item.name"
                      v-for="item in editableTabs"
                      :label="item.title"
                      :name="item.name">
            {{item.content}}
          </w-tab-pane>
        </w-tabs>
      </div>
  </section>
</template>

<script>
export default {
    data () {
        return {
          editableTabsValue: '1',
          editableTabs: [{
            title: '标签一',
            name: '1',
            content: '标签一'
            }, {
            title: '标签二',
            name: '2',
            content: '标签二'
          }, {
            title: '标签三',
            name: '3',
            content: '标签三'
          }, {
            title: '标签四',
            name: '4',
            content: '标签四'
          }],
        }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      },
      handleRemove(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
    },
}
</script>
标签一

自定义图标

可以通过具名 slot 来实现自定义标签页的内容。

查看代码 < />

<template>
  <section class="tabs-demo">
    <div class="container">
      <w-tabs v-model="activeName2" @tab-click="handleClick">
        <w-tab-pane name="first">
          <span slot="label">
            <i class="w-icon-user"></i> 标签一
          </span>
          标签一
        </w-tab-pane>
        <w-tab-pane name="second">
          <span slot="label">
            <i class="w-icon-config"></i> 第二标签
          </span>
          第二标签
        </w-tab-pane>
        <w-tab-pane name="third">
          <span slot="label">
            <i class="w-icon-mark"></i> 标签三
          </span>
          标签三
        </w-tab-pane>
        <w-tab-pane name="fourth">
          <span slot="label">
            <i class="w-icon-edit-solid"></i> 标签四
          </span>
          标签四
        </w-tab-pane>
      </w-tabs>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      activeName2: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  },
}
</script>
<style scoped lang="scss">
.tabs-demo {
  .container {
    width: 500px;
  }
}
</style>
脑卒中易患
标签一
标签一

滑动

可以左右、上下滑动，容纳更多标签。

查看代码 < />

<template>
  <section class="tabs-demo">
    <div class="box-card">
      <w-tabs v-model="activeName3" @tab-click="handleClick" type="border-card">
        <w-tab-pane label="脑卒中易患" name="first">脑卒中易患</w-tab-pane>
        <w-tab-pane label="脑卒中易患" name="second">脑卒中易患</w-tab-pane>
      </w-tabs>
    </div>
    <div class="box-horizontal">
      <w-tabs v-model="activeName4" @tab-click="handleClick">
        <w-tab-pane label="标签一" name="third">标签一</w-tab-pane>
        <w-tab-pane label="第二标签" name="fourth">第二标签</w-tab-pane>
        <w-tab-pane label="标签三" name="fifth">标签三</w-tab-pane>
        <w-tab-pane label="标签四" name="sixth">标签四</w-tab-pane>
        <w-tab-pane label="标签五" name="seventh">标签五</w-tab-pane>
        <w-tab-pane label="标签六" name="eighth">标签六</w-tab-pane>
      </w-tabs>
    </div>
    <div class="box-vertical">
      <w-tabs v-model="activeName5" @tab-click="handleClick"
        tab-position="left" style="height: 150px;">
        <w-tab-pane label="标签一" name="1">标签一</w-tab-pane>
        <w-tab-pane label="第二标签" name="2">第二标签</w-tab-pane>
        <w-tab-pane label="标签三" name="3">标签三</w-tab-pane>
        <w-tab-pane label="标签四" name="4">标签四</w-tab-pane>
        <w-tab-pane label="标签五" name="5">标签五</w-tab-pane>
        <w-tab-pane label="标签六" name="6">标签六</w-tab-pane>
      </w-tabs>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      activeName3: 'first',
      activeName4: 'third',
      activeName5: '1'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  },
}
</script>
<style scoped lang="scss">
.tabs-demo {
  .box-card {
    width: 390px;
  }
  .box-horizontal {
    width: 500px;
    margin-top: 20px;
  }
  .box-vertical {
    margin-top: 20px;
  }
}
</style>
上
标签一
左
标签一
下
标签一
右
标签一

不同位置

根据tab-position设置标签的位置。

查看代码 < />

<template>
  <section class="tabs-demo">
      <div class="container">
        <div class="container__box">
          <div class="container__box--inner">
            <span class="demonstration">上</span>
            <w-tabs v-model="activeName1" @tab-click="handleClick" tab-position="top">
              <w-tab-pane label="标签一" name="1">标签一</w-tab-pane>
              <w-tab-pane label="第二标签" name="2">第二标签</w-tab-pane>
              <w-tab-pane label="标签三" name="3">标签三</w-tab-pane>
            </w-tabs>
          </div>
          <div class="container__box--inner">
            <span class="demonstration">左</span>
            <w-tabs v-model="activeName2" @tab-click="handleClick" tab-position="left">
              <w-tab-pane label="标签一" name="4">标签一</w-tab-pane>
              <w-tab-pane label="第二标签" name="5">第二标签</w-tab-pane>
              <w-tab-pane label="标签三" name="6">标签三</w-tab-pane>
            </w-tabs>
          </div>
        </div>
        <div class="container__box">
          <div class="container__box--inner">
            <span class="demonstration">下</span>
            <w-tabs v-model="activeName3" @tab-click="handleClick" tab-position="bottom">
              <w-tab-pane label="标签一" name="7">标签一</w-tab-pane>
              <w-tab-pane label="第二标签" name="8">第二标签</w-tab-pane>
              <w-tab-pane label="标签三" name="9">标签三</w-tab-pane>
            </w-tabs>
          </div>
          <div class="container__box--inner">
            <span class="demonstration">右</span>
            <w-tabs v-model="activeName4" @tab-click="handleClick" tab-position="right">
              <w-tab-pane label="标签一" name="10">标签一</w-tab-pane>
              <w-tab-pane label="第二标签" name="11">第二标签</w-tab-pane>
              <w-tab-pane label="标签三" name="12">标签三</w-tab-pane>
            </w-tabs>
          </div>
        </div>
      </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      activeName1: '1',
      activeName2: '4',
      activeName3: '7',
      activeName4: '10'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  },
}
</script>
<style scoped lang="scss">
.tabs-demo {
  .container {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    .container__box {
      padding: 0;
      margin: 0 auto;
      flex: 1;
      border-right: 1px solid #eff2f6;
      &:last-child {
          border-right: none;
      }
      .container__box--inner {
        padding: 30px 20px;
        flex: 1;
        min-height: 150px;
        &:last-child {
          border-top: 1px solid #eff2f6;
        }
        .demonstration {
          display: block;
          color: #8492a6;
          font-size: 14px;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
标签一
标签三
第二标签

尺寸选择

根据size设置大小。

查看代码 < />

<template>
  <section class="tabs-demo">
    <w-radio-group v-model="size" size="small">
      <w-radio-button label="large">大</w-radio-button>
      <w-radio-button label="medium">中</w-radio-button>
      <w-radio-button label="small">小</w-radio-button>
    </w-radio-group>
    <div class="container">
      <w-tabs v-model="activeName1" @tab-click="handleClick" :size="size">
        <w-tab-pane label="标签一" name="1">标签一</w-tab-pane>
        <w-tab-pane label="第二标签" name="2">第二标签</w-tab-pane>
        <w-tab-pane label="标签三" name="3">标签三</w-tab-pane>
        <w-tab-pane label="标签四" name="4">标签四</w-tab-pane>
      </w-tabs>
      <w-tabs v-model="activeName2" @tab-click="handleClick" type="card" :size="size">
        <w-tab-pane label="标签一" name="5">标签一</w-tab-pane>
        <w-tab-pane label="第二标签" name="6">第二标签</w-tab-pane>
        <w-tab-pane label="标签三" name="7">标签三</w-tab-pane>
        <w-tab-pane label="标签四" name="8">标签四</w-tab-pane>
      </w-tabs>
      <w-tabs v-model="activeName3" @tab-click="handleClick" type="border-card" :size="size">
        <w-tab-pane label="标签一" name="9">标签一</w-tab-pane>
        <w-tab-pane label="第二标签" name="10">第二标签</w-tab-pane>
        <w-tab-pane label="标签三" name="11">标签三</w-tab-pane>
        <w-tab-pane label="标签四" name="12">标签四</w-tab-pane>
      </w-tabs>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      size: 'large',
      activeName1: '1',
      activeName2: '7',
      activeName3: '10'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  },
}
</script>
<style scoped lang="scss">
.tabs-demo {
  .container {
    width: 450px;
    margin-top: 30px;
    .w-tabs {
      margin-bottom: 20px;
    }
  }
}
</style>
标签一
标签一

卡片式页签

根据card设置卡片式。

查看代码 < />

<template>
  <section class="tabs-demo">
      <div class="container">
        <w-tabs v-model="activeName1" @tab-click="handleClick" type="card">
          <w-tab-pane label="标签一" name="first">标签一</w-tab-pane>
          <w-tab-pane label="第二标签" name="second">第二标签</w-tab-pane>
          <w-tab-pane label="标签三" name="third">标签三</w-tab-pane>
          <w-tab-pane label="标签四" name="fourth">标签四</w-tab-pane>
        </w-tabs>
        <w-tabs v-model="activeName2" @tab-click="handleClick" type="dark">
          <w-tab-pane label="标签一" name="first">标签一</w-tab-pane>
          <w-tab-pane label="第二标签" name="second">第二标签</w-tab-pane>
          <w-tab-pane label="标签三" name="third">标签三</w-tab-pane>
          <w-tab-pane label="标签四" name="fourth">标签四</w-tab-pane>
        </w-tabs>
      </div>
  </section>
</template>

<script>
export default {
    data () {
        return {
          activeName1: 'first',
          activeName2: 'first'
        }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    },
}
</script>
<style scoped lang="scss">
.tabs-demo {
  .container {
    width: 450px;
    .w-tabs {
      margin-bottom: 30px;
    }
  }
}
</style>
标签二

新增与关闭

增减标签页按钮只能在选项卡样式的标签页下使用。

查看代码 < />

<template>
  <section class="tabs-demo">
    <w-radio-group v-model="size" size="small">
      <w-radio-button label="large">大</w-radio-button>
      <w-radio-button label="medium">中</w-radio-button>
      <w-radio-button label="small">小</w-radio-button>
    </w-radio-group>
    <div class="container">
      <w-tabs v-model="editableTabsValue" type="card"
        editable @edit="handleTabsEdit" :size="size">
        <w-tab-pane :key="item.name"
          v-for="item in editableTabs"
          :label="item.title"
          :name="item.name">
          {{item.content}}
        </w-tab-pane>
      </w-tabs>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      size: 'large',
      editableTabsValue: '2',
      editableTabs: [{
        title: '标签一',
        name: '1',
        content: '标签一'
        }, {
        title: '标签二',
        name: '2',
        content: '标签二'
      }, {
        title: '标签三',
        name: '3',
        content: '标签三'
      }, {
        title: '标签四',
        name: '4',
        content: '标签四'
      }],
      tabIndex: 4
    }
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: '新增 Tab',
          name: newTabName,
          content: '新增 Tab'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  },
}
</script>
<style scoped lang="scss">
.tabs-demo {
  .container {
    margin-top: 20px;
  }
}
</style>

API

Tabs Attributes

参数 说明 类型 可选值 默认值 Version
addable 标签是否可增加 Boolean — false
before-leave 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 Function(activeName, oldActiveName) — —
closable 标签是否可关闭 Boolean — false
editable 标签是否同时可增加和关闭 Boolean — false
stretch 标签的宽度是否自撑开 Boolean - false
size 大小 String large/medium/small medium
type 风格类型 String card/border-card/dark —
tab-position 选项卡所在位置 String top/right/bottom/left top
value / v-model 绑定值，选中选项卡的 name String — 第一个选项卡的 name

Tabs Events

事件名称 说明 回调参数 Version
edit 点击 tabs 的新增按钮或 tab 被关闭后触发 (targetName, action)
tab-click tab 被选中时触发 被选中的标签 tab 实例
mouse-right-click tab 被右键点击时触发 被右键点击的标签 tab 实例 v1.5.11
tab-remove 点击 tab 移除按钮后触发 被删除的标签的 name
tab-add 点击 tabs 的新增按钮后触发 —

Tab-pane Attributes

参数 说明 类型 可选值 默认值 Version
closable 标签是否可关闭 Boolean — false
disabled 是否禁用 Boolean — false
label 选项卡标题 String — —
lazy 标签是否延迟渲染 Boolean — false
name 与选项卡绑定值 value 对应的标识符，表示选项卡别名 String — 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 3/19/2020, 3:52:58 PM

← Tag 标签 →