vue点击页面按钮或选项 在tag栏出现

本文介绍如何在Vue项目中实现特定页面的跳转及路由配置,并通过设置菜单隐藏属性来优化用户体验。主要内容包括:编写跳转后的Vue页面、设置路由菜单隐藏、注册到routerindex.js文件中以及如何进行带参数的跳转。

1、编写跳转后的vue页面

2、编写路由,且菜单隐藏

import Layout from '@/views/layout/Layout'

const userTagRouter = {
  path: '/userTag',
  component: Layout,
  redirect: '/userTag/userTag',
  name: 'UserTag',
  meta: { title: 'UserTag', icon: 'peoples', roles: ['SUPERMANAGER', 'SUPER', 'ADMIN', 'OPERATOR', 'PROMOTER', 'COMPOS'] },
  hidden: true,  //菜单隐藏
  children: [
    {
      path: '/test/:id',
      name: 'test',
      component: () => import('@/views/test'),
      meta: { title: 'test', icon: 'user', roles: ['SUPERMANAGER', 'SUPER', 'ADMIN', 'OPERATOR', 'PROMOTER', 'COMPOS'] },
      hidden: true //菜单隐藏
    },

  ]
}
export default userTagRouter

3、注册到router index.js中

4、带参数跳转。注意使其唯一,不然不能多次打开同一页面

 initTest(data){
        this.$router.push({ path: `/Test/${data}`,params:{id:data} })
      },
Vue 3 中使用 **Element Plus** 的 `<CheckboxGroup>` ,若想让复选框的选项显示为 **按钮风格(button type)**,就像 `<RadioGroup type="button">` 那样美观,你可以通过以下方式实现: --- ### ✅ 正确方法:使用 `el-checkbox` 的 `border` 结合样式模拟按钮 虽然 `CheckboxGroup` 本身没有直接的 `type="button"` 属性(不像 Radio),但 `el-checkbox` 支持 `border` 和自定义类来实现 **按钮式外观**。 --- ## ✅ 方法一:使用 `border` + 自定义样式(推荐) ```vue <template> <CheckboxGroup v-model="checkedList" class="checkbox-button-group"> <Checkbox label="1" border class="checkbox-btn">科技型中小企业</Checkbox> <Checkbox label="2" border class="checkbox-btn">高新技术企业</Checkbox> <Checkbox label="3" border class="checkbox-btn">专精特新企业</Checkbox> <Checkbox label="4" border class="checkbox-btn">规上企业</Checkbox> </CheckboxGroup> </template> <script setup> import { ref } from 'vue' import { CheckboxGroup, Checkbox } from 'element-plus' const checkedList = ref(['1']) // 默认选中 </script> <style scoped> /* 所有带 border 的 checkbox 统一样式调整 */ .checkbox-button-group >>> .checkbox-btn .el-checkbox__label { padding: 8px 16px; margin: 4px; border-radius: 4px; border: 1px solid #dcdfe6; background-color: #f4f4f5; color: #606266; cursor: pointer; transition: all 0.3s; } /* 选中状态样式 */ .checkbox-button-group >>> .checkbox-btn.is-checked .el-checkbox__label { background-color: #409eff; border-color: #409eff; color: #ffffff; } /* hover 效果 */ .checkbox-button-group >>> .checkbox-btn .el-checkbox__label:hover { border-color: #409eff; } </style> ``` > ✅ 效果:看起来像一组可多选的按钮,无 ✔ 图标干扰,点击切换颜色。 --- ## ✅ 方法:完全隐藏 checkbox,只保留 label 按钮(极致美化) 如果你希望 **彻底去掉前面的小方框和对号**,只保留纯文本按钮效果,可以用 CSS 隐藏原生结构。 ```vue <template> <CheckboxGroup v-model="checkedList" class="tag-style-group"> <Checkbox label="1" class="tag-item">科技型中小企业</Checkbox> <Checkbox label="2" class="tag-item">高新技术企业</Checkbox> <Checkbox label="3" class="tag-item">专精特新企业</Checkbox> <Checkbox label="4" class="tag-item">规上企业</Checkbox> </CheckboxGroup> </template> <style scoped> /* 隐藏所有 checkbox 入框(包括边框和✔) */ .tag-style-group >>> .el-checkbox__input { display: none !important; } /* 标签样式 */ .tag-style-group >>> .el-checkbox__label { padding: 8px 16px; margin: 4px; border: 1px solid #dcdfe6; border-radius: 4px; background-color: #f4f4f5; color: #606266; cursor: pointer; transition: all 0.3s ease; } /* 选中状态 */ .tag-style-group >>> .el-checkbox.is-checked .el-checkbox__label { background-color: #409eff; border-color: #409eff; color: #fff; } /* hover 提示 */ .tag-style-group >>> .el-checkbox__label:hover { border-color: #409eff; } </style> ``` > ✅ 效果:完全像标签/按钮组,支持多选,视觉上媲美 Radio 按钮。 --- ## 🔁 对比 Radio 按钮风格 | 特性 | `<RadioGroup type="button">` | `<CheckboxGroup>` + 上述样式 | |------|-------------------------------|-------------------------------| | 是否单选 | ✅ 是 | ❌ 否(可多选) | | 是否有图标 | ❌ 无 | ✅ 可隐藏 | | 是否按钮风格 | ✅ 是 | ✅ 可模拟 | | 使用场景 | 单选按钮组 | 多选按钮组 | 👉 所以: > 🎯 如果你需要 **多选 + 按钮样式** → 推荐使用 **方法(隐藏 input)** --- ## 💡 注意事项(Vue 3 + Element Plus) - 使用 `>>>` 可能不生效?改用 `::v-deep`: ```scss ::v-deep(.el-checkbox__input) { display: none; } ``` - 确保引入了组件: ```js import { CheckboxGroup, Checkbox } from 'element-plus' ``` ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值