<Tabs type="card" size="small" @on-click="changeTab" style="height: 799px; width: 1240px" tab-position="left"> <TabPane name="central" label="中心资讯"> <central ref="central" /> </TabPane> <TabPane name="forum" label="厦门金融司法协同论坛"> <forum ref="forum" /> </TabPane> <TabPane name="guidanc" label="厦门金融司法案例与指引"> <guidanc ref="guidanc" /> </TabPane> <TabPane name="conour" label="荣誉墙"> <conour ref="conour" /> </TabPane> </Tabs>
时间: 2023-12-05 22:48:38 浏览: 34
这段代码使用了 element-ui 库中的 Tabs 组件,在页面上呈现了一个选项卡式的导航。每个选项卡对应一个不同的组件,包括中心资讯、厦门金融司法协同论坛、厦门金融司法案例与指引和荣誉墙。当用户点击不同的选项卡时,会触发一个名为 changeTab 的方法。同时,选项卡导航栏被设置在左侧,呈现竖直排列的效果。
相关问题
<el-tab-pane label="全部" name="first" ><div slot="label" @click="backright" style="width: 70px; text-align: center" > 全部 </div></el-tab-pane > <el-tab-pane label="本月" name="second" ><div slot="label" @click="backright" style="width: 70px; text-align: center" > 本月 </div></el-tab-pane > <el-tab-pane label="本学期" name="third" ><div slot="label" @click="backright" style="width: 70px; text-align: center" > 本学期 </div></el-tab-pane > <el-tab-pane label="自定义" name="fourth" ><div slot="label" @click="toggleLeft" style="width: 70px; text-align: center" > 自定义 </div></el-tab-pane > </el-tabs> 优化以上代码
以下是优化后的代码:
```
<el-tabs v-model="activeTab">
<el-tab-pane label="全部" name="first">
<div slot="label" @click="backright" style="width: 70px; text-align: center">全部</div>
</el-tab-pane>
<el-tab-pane label="本月" name="second">
<div slot="label" @click="backright" style="width: 70px; text-align: center">本月</div>
</el-tab-pane>
<el-tab-pane label="本学期" name="third">
<div slot="label" @click="backright" style="width: 70px; text-align: center">本学期</div>
</el-tab-pane>
<el-tab-pane label="自定义" name="fourth">
<div slot="label" @click="toggleLeft" style="width: 70px; text-align: center">自定义</div>
</el-tab-pane>
</el-tabs>
```
针对优化的细节说明:
1. 将每个 `el-tab-pane` 标签都独立成一行,使代码更加清晰易懂。
2. 在 `el-tabs` 标签上添加 `v-model` 属性,使其能够实时绑定到当前选中的标签页。
3. 将 `div` 标签的 `slot` 属性移动到标签上,使得代码更加简洁。
4. 将 `style` 样式移动到 `style` 标签或者外部 CSS 文件中,使得代码更加简洁易维护。
简写以下代码<el-tabs v-model="activeTab"> <el-tab-pane label="全部" name="first"> <div slot="label" @click="backright" style="width: 70px; text-align: center">全部</div> </el-tab-pane> <el-tab-pane label="本月" name="second"> <div slot="label" @click="backright" style="width: 70px; text-align: center">本月</div> </el-tab-pane> <el-tab-pane label="本学期" name="third"> <div slot="label" @click="backright" style="width: 70px; text-align: center">本学期</div> </el-tab-pane> <el-tab-pane label="自定义" name="fourth"> <div slot="label" @click="toggleLeft" style="width: 70px; text-align: center">自定义</div> </el-tab-pane></el-tabs>
以下是简写后的代码:
```
<el-tabs v-model="activeTab">
<el-tab-pane label="全部" name="first" @click="backright">全部</el-tab-pane>
<el-tab-pane label="本月" name="second" @click="backright">本月</el-tab-pane>
<el-tab-pane label="本学期" name="third" @click="backright">本学期</el-tab-pane>
<el-tab-pane label="自定义" name="fourth" @click="toggleLeft">自定义</el-tab-pane>
</el-tabs>
```
针对简写的细节说明:
1. 将 `click` 事件监听器移动到 `el-tab-pane` 标签上,使代码更加简洁。
2. 将 `div` 标签删除,将标签页的文本直接写在 `el-tab-pane` 标签中,使代码更加简洁易读。
3. 将 `style` 样式移动到 `style` 标签或者外部 CSS 文件中,使得代码更加简洁易维护。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)