elemetui(vue)移动端 划动切换Tab标签

Element UI是一个基于Vue.js的开源UI组件库，它提供了一系列丰富的移动端和桌面端组件。如果你想要在移动端实现滑动切换Tab标签，可以使用`el-tabs`组件，这是一个用于展示内容列表并支持通过手势或导航栏切换的组件。

以下是基本的步骤：

1. 引入依赖：

   <script src="https://unpkg.com/@element-ui/lib/components/tab-panel.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/@element-ui/lib/theme-chalk/index.css">

2. 创建`el-tabs`组件：

   <el-tabs v-model="activeName" @tab-click="handleClick">
     <el-tab-pane label="选项卡1" name="tab1">这是选项卡1的内容</el-tab-pane>
     <el-tab-pane label="选项卡2" name="tab2">这是选项卡2的内容</el-tab-pane>
     <!-- 添加更多tab pane -->
   </el-tabs>

3. 设置数据和处理事件：

   data() {
     return {
       activeName: 'tab1' // 初始化激活的tab名字
     }
   },
   methods: {
     handleClick(tabName) {
       this.activeName = tabName; // 当点击新的tab时更新activeName
     }
   }

4. 对于触屏设备，用户通常会期望可以通过滑动来切换。Element UI默认提供了这种交互体验。当设备支持并且你希望启用这个功能，可以在创建`el-tabs`时设置`lazy-render`属性为`true`，它会在需要的时候渲染对应的标签页内容，提高性能。

<el-tabs lazy-render :animated=true v-model="activeName" @tab-click="handleClick">
  ...
</el-tabs>