1. 简介
标签页通常用于展示各种类型的信息，这些信息需要被分类并在用户界面上以一种可点击标签的方式呈现。因此，标签页是我们日常 Web 应用中必不可少的元素之一。在这篇文章中，我们将介绍如何使用 Vue 来实现可滑动的标签页。
2. 安装和设置
首先，需要使用 Vue-cli 来创建一个新项目。这可以通过运行以下命令来完成：
vue create my-tab-app接下来，我们安装一个 Vue.js 组件库——Element UI：
npm i element-ui -S当完成以上步骤安装后，我们需要按照 Element UI 的指示将其安装导入到我们的Vue.js项目中。这可以通过以下命令实现：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3. 基础组件
为了创建一个可滑动的标签页，我们需要创建以下基础组件：
标签页页签组件
标签页内容组件
3.1 标签页页签组件
标签页页签组件用于呈现标签页的名称和提供选项卡的点击事件。使用 ElementUI 的 tab 组件可以轻松创建标签页。以下是一个基本的标签页组件的几个重要部分：
切换值（value）：被选中的标签页的索引
选项卡数组（tabItems）：包含标签页信息的对象数组
选项卡点击事件（tabClick）：选择一个选项卡并更新当前的value值
以下是一个基本的标签页页签组件的代码示例：
<template>
<el-tabs
v-model="value"
type="card"
closable="true"
@tab-click="tabClick">
<el-tab-pane
v-for="(tabItem, tabIndex) in tabItems"
:key="tabIndex"
:label="tabItem.tabLabel"
:disabled="tabItem.disabled"
:name="tabIndex.toString()">
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data: function() {
return {
value: "0",
tabItems: [
{ tabLabel: "标签1", disabled: false },
{ tabLabel: "标签2", disabled: false },
{ tabLabel: "标签3", disabled: false }
]
};
},
methods: {
tabClick(tab) {
this.value = tab.name;
}
}
};
</script>
3.2 标签页内容组件
标签页内容组件用于在选项卡被点击时呈现相应的内容。使用 Element UI 的 tab-pane 组件可以轻松创建标签页内容区域。以下是一个基本的标签页内容组件需要的几个组件：
切换值（value）：被选中的标签页的索引
选项卡数组（tabItems）：包含标签页信息的对象数组
内容数组（tabItemsContent）：包含标签页内容的数组
以下是一个基本的标签页内容组件的代码示例：
<template>
<el-tabs v-model="value" type="card">
<el-tab-pane
v-for="(tabItem, tabIndex) in tabItems"
:key="tabIndex"
:label="tabItem.tabLabel"
:disabled="tabItem.disabled"
:name="tabIndex.toString()">
{{tabItemsContent[tabIndex]}}
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data: function() {
return {
value: "0",
tabItems: [
{ tabLabel: "标签1", disabled: false },
{ tabLabel: "标签2", disabled: false },
{ tabLabel: "标签3", disabled: false }
],
tabItemsContent: [
"Tab 1 content",
"Tab 2 content",
"Tab 3 content"
]
};
}
};
</script>
4. 实现可滑动标签页
现在我们已经有了所有的基础组件，接下来就是实现可滑动的标签页。我们将使用函数式组件和 render 函数来自定义标签页样式。
4.1 创建可滑动的标签页页签组件
为了实现可滑动的标签页，我们需要将原始的标签页页签组件更改为更适合我们用例的自定义组件，以便我们可以处理滑动和触摸事件。我们将创建一个函数式组件，并已以下方式合并标签页组件和自定义组件：
<template functional>
<div class="my-tab">
<div ref="tabsWrap">
<div class="my-tab__nav">
<div
class="my-tab__nav-bar"
:style="navBarStyle"
ref="navBar"></div>
<div>
<ul
class="el-tabs-nav el-tabs--card my-tab__nav-list"
:style="navStyle"
ref="nav">
<li
v-for="(tabItem, tabIndex) in props.tabItems"
:key="tabIndex"
:class="{ 'is-active': parseInt(props.value, 10) === tabIndex }"
class="el-tabs__item my-tab__nav-item"
@click="tabClick(tabIndex)">
{{tabItem.tabLabel}}
</li>
</ul>
</div>
</div>
</div>
<div class="my-tab__content">{{props.slot.default}}</div>
</div>
</template>
<script>
export default {
props: {
value: String,
tabItems: Array
},
data() {
return {
direction: "right",
activeIndex: parseInt(this.value, 10)
};
},
computed: {
navStyle() {
return {
transform: "translateX(" + this.navTransform + "px)"
};
},
navBarStyle() {
let navItem = this.$refs.nav.children[this.activeIndex];
if (navItem) {
let offsetLeft = navItem.offsetLeft;
let clientWidth = navItem.clientWidth;
return {
left: offsetLeft + "px",
width: clientWidth + "px",
opacity: 1
};
} else {
return {
opacity: 0,
width: "0px",
left: "0px"
};
}
},
navTransform() {
switch (this.direction) {
case "left":
return (
-this.$refs.navList.children[this.activeIndex].offsetLeft + 15 * 2
);
case "right":
return (
-this.$refs.navList.children[this.activeIndex].offsetLeft -
this.$refs.navList.offsetWidth +
15 * 2 +
this.$refs.navList.children[this.activeIndex].clientWidth
);
default:
return 0;
}
}
},
methods: {
tabClick(index) {
this.$emit("input", index.toString());
this.activeIndex = index;
this.direction = index < this.activeIndex ? "left" : "right";
}
}
};
</script>
我们所创建的函数式组件包含以下几个关键功能：
使用 transform 属性和 CSS3 的过渡效果，使选项卡中的导航条在滑动时占据正确的位置
将 JavaScript 触摸事件与 Vue.js 的事件绑定在一起，向左或向右滑动控制标签页
4.2 创建可滑动的标签页内容组件
为了实现可滑动的标签页，我们将更改标签页内容组件的渲染方式。我们将使用 render 函数来自定义组件，并使其能够响应从选项卡页签的自定义组件移动和朝向变化的背景颜色。
<template>
<div
class="my-tab__pane"
v-show="parseInt(props.value, 10) === parseInt(props.name, 10)"
ref="pane"
:value="props.name">
<div
class="my-tab__pane-bg"
:class="{ 'is-left': direction === 'left', 'is-right': direction === 'right' }"
:style="bgStyle">
</div>
{{props.slot.default}}
</div>
</template>
<script>
export default {
props: {
value: String,
name: String
},
data() {
return {
parent: this.$parent,
direction: "right"
};
},
computed: {
bgStyle() {
switch (this.direction) {
case "left":
return {
left: 0
};
case "right":
return {
left: "100%"
};
default:
return {
left: 0
};
}
}
},
watch: {
parent: function(newVal, oldVal) {
if (newVal.direction !== oldVal.direction) {
this.direction = newVal.direction;
}
}
}
};
</script>
我们所创建的可滑动的标签页内容组件包含以下几个关键功能:
遵循标签页选项卡（包括标签和内容）的手势操作，并响应从左向右和从右向左移动的展示效果
内联样式，控制当前选择的选项卡的背景颜色
5. 总结
本篇文章介绍了如何使用 Vue.js 创建可滑动标签页的组件。通过使用 Element UI 组件库，我们制作了基本的标签页组件和可滑动标签页组件。我们选择了使用函数式组件和 Render 函数来创建可滑动的标签页，使其具有漂亮和响应的用户界面组件。