vuex tab 实现tag标签 Vue VSCode Snippets插件快捷代码

亦凉 2023-06-18 10:56 33阅读 0赞

tab.js页面：

export default \{

state: \{

menu: \[\],

currentMenu: null,

tabList: \[

\{

path: '/',

name: 'home',

label: '首頁',

icon: 's-home'

\}

\]

\},

mutations: \{

selectMenu(state, value) \{

//   state.currentMenu = value

if (value.name === 'home') \{

state.currentMenu = null

\} else \{

state.currentMenu = value

let result = state.tabList.findIndex(item => item.name === value.name)

result == -1 ? state.tabList.push(value) : ''

\}

\},

closeTab(state, value) \{

let result = state.tabList.findIndex(item => item.name === value.name)

state.tabList.splice(result, 1)

\}

\},

actions: \{\},

modules: \{\}

\}

commonTab页面：

<template>

<div>

<el-tag :key="tag.name" v-for="tag in tags" :closable="tag.name !== 'home'" :disable-transitions="false" @close="handleClose(tag)">

\{ \{ tag.label \}\}

</el-tag>

</div>

</template>

<script>

import \{ mapState, mapMutations \} from 'vuex'

export default \{

computed: \{

...mapState(\{

tags: state => state.tab.tabList

\})

\},

data() \{

return \{

dynamicTags: \['标签一', '标签二', '标签三'\]

\}

\},

methods: \{

...mapMutations(\{

close: 'closeTab'

\}),

handleClose(tag) \{

// this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)

this.close(tag)

\}

\}

\}

</script>

<style lang="scss" scoped>

.el-tag + .el-tag \{

margin-left: 10px;

\}

.button-new-tag \{

margin-left: 10px;

height: 32px;

line-height: 30px;

padding-top: 0;

padding-bottom: 0;

\}

.input-new-tag \{

width: 90px;

margin-left: 10px;

vertical-align: bottom;

\}

</style>

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 vscode的Auto Rename Tag插件：修改开始标签的时候，同步修改结束标签

vscode的Auto Rename Tag插件：修改开始标签的时候，同步修改结束标签

Love The Way You Lie/ 2024年04月23日 12:47/ 0 赞/ 26 阅读

相关 vscode下载插件让vue代码高亮

目录一、概述二、解决办法 -------------------- 一、概述在vscode里面编写vue代码的时候，发现代码是灰色的，看着不舒服 ![10

- 日理万妓/ 2023年09月24日 20:10/ 0 赞/ 78 阅读

相关 vue:vscode snippets插件的快乐使用

先在vscode中安装vue vscode snippets插件具体的快捷操作如下 1. vue基本骨架 `vbase` ![在这里插入图片描述][202

水深无声/ 2023年07月07日 08:13/ 0 赞/ 163 阅读

相关 vuex tab 实现tag标签 Vue VSCode Snippets插件快捷代码

tab.js页面： export default \{ state: \{ menu: \[\], currentMenu: null,

亦凉/ 2023年06月18日 10:56/ 0 赞/ 34 阅读

相关 Vue--插件--Vuex

原文网址：[Vue--插件--Vuex\_IT利刃出鞘的博客-CSDN博客][Vue--_--Vuex_IT_-CSDN] 其他网址 > [VueJS中学习使用Vuex

ゝ一纸荒年。/ 2022年12月28日 12:33/ 0 赞/ 225 阅读

相关实用网址、vue插件、vscode插件

实用网址：蚂蚁资源网：https://www.m1zy.com/ vue手册：https://www.w3cschool.cn/aekdgs/25h8gdn

悠悠/ 2022年12月28日 09:15/ 0 赞/ 224 阅读

相关 vscode创建vue快捷代码片段

（1）打开文件首选项 —> 用户代码片段 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

迷南。/ 2022年02月03日 00:55/ 0 赞/ 521 阅读

相关 vue提示插件[vscode]

在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue，vue-beautify，vue-color，VueHelper，vertur等等。比较了

系统管理员/ 2021年12月03日 10:41/ 0 赞/ 1091 阅读

相关 vue中实现tag标签

1，安装scss插件 cnpm i node-sass sass-loader -S 2，安装element-ui cnpm i element-

ゞ浴缸里的玫瑰/ 2021年07月26日 02:29/ 0 赞/ 1022 阅读

相关 vscode tab键快捷生成元素html标签

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰半夏微凉°/ 2021年07月24日 16:25/ 0 赞/ 1145 阅读