当前位置: 首页 > news >正文

Vue2 -- 自定义单选内容的单选框组件

自定义单选内容的单选框组件

之前做的一个项目,在项目中有一个关于人员权限分配的功能,给人员指定各个模块的权限信息,分为

  • write 可写权限
  • read 可读权限
  • none 没有权限

项目要求画面中只显示 W R 两个按钮控制指定权限信息,都不选择的时候权限为 none

<!-- 
==============================================================================
HTML5
==============================================================================
--><template><div class="checkboxs"><label v-for="(dataItem, i) in dataList" :key="i"><input:id="permissionPhase.slice(0, 1).toUpperCase() + permissionPhase.slice(1) + '_' + dataItem.value.toLowerCase()"type="button"name="permissionCheckbox"class="checkbox":class="permissionPhaseState ? (dataItem.isSelect ? (isDisabled ? dataItem.classname + ' not-checked' : dataItem.classname) : '') : 'not-select'":disabled="isDisabled":value="dataItem.value"@click="handleSetPermission(dataItem)"/></label></div>
</template><!--
==============================================================================
JavaScript:Vue.js
==============================================================================
--><script>
export default {name: 'PermissionCheckbox',props: {isDisabled: {type: Boolean,default: false},permissionItem: {type: Array,default: () => []},permissionPhase: {type: String,default: ''},permissionPhaseState: {type: Boolean,default: false}},data() {return {dataList: [{ permissionName: 'write', isSelect: false, value: 'W', classname: 'focus_W' },{ permissionName: 'read', isSelect: false, value: 'R', classname: 'focus_R' },],}},mounted() {this.dataList.forEach(item => {if(item.permissionName === this.permissionItem[0]) {item.isSelect = true} else {item.isSelect = false}})},watch: {permissionItem(newVal) {this.dataList.forEach(item => {if(item.permissionName === newVal[0]) {item.isSelect = true} else {item.isSelect = false}})}},computed: {permission() {if(this.dataList[0].isSelect) {return this.dataList[0].permissionName} else if(this.dataList[1].isSelect) {return this.dataList[1].permissionName} else {return 'none'}}},methods: {handleSetPermission(dataItem) {this.dataList.forEach(item => {if(item.permissionName === dataItem.permissionName) {item.isSelect = !item.isSelect} else {item.isSelect = false}})if(this.permission !== '') {this.$emit('click-button-permission', this.permission)}}}
}
</script><!--
==============================================================================
CSS3
==============================================================================
--><style scoped>
.checkboxs {display: flex;justify-content: space-evenly;align-items: center;height: 28px;
}.checkbox {cursor: pointer;box-sizing: border-box;width: 20px;height: 20px;line-height: 20px;outline: none;border: 0;border-radius: 4px;background-color: #cad6e8;text-align: center;padding: 0;font-size: 14px;font-weight: 700;color: #fff;
}.focus_W {font-weight: 700;box-sizing: border-box;background-color: #ed7a06;border: 0;color: white;box-shadow: 0px 3px 3px rgba(237, 122, 6, .3);
}.focus_R {font-weight: 700;box-sizing: border-box;background-color: #c0cb22;border: 0;color: white;box-shadow: 0px 3px 3px rgba(178, 188, 49, .3);
}.not-checked {cursor: not-allowed;font-weight: 700;box-sizing: border-box;border: 0;color: white;
}.not-select {cursor: not-allowed;font-weight: 700;box-sizing: border-box;border: 0;color: white;
}
</style>

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章:

Vue2 -- 自定义单选内容的单选框组件

自定义单选内容的单选框组件 之前做的一个项目&#xff0c;在项目中有一个关于人员权限分配的功能&#xff0c;给人员指定各个模块的权限信息&#xff0c;分为 write 可写权限read 可读权限none 没有权限 项目要求画面中只显示 W R 两个按钮控制指定权限信息&#xff0c;都不…...

让PyTorch训练速度更快,你需要掌握这17种方法

掌握这 17 种方法&#xff0c;用最省力的方式&#xff0c;加速你的 Pytorch 深度学习训练。近日&#xff0c;Reddit 上一个帖子热度爆表。主题内容是关于怎样加速 PyTorch 训练。原文作者是来自苏黎世联邦理工学院的计算机科学硕士生 LORENZ KUHN&#xff0c;文章向我们介绍了在…...

LeetCode-309. 最佳买卖股票时机含冷冻期

目录题目思路动态规划题目来源 309. 最佳买卖股票时机含冷冻期 题目思路 每天最多只可能有三种状态中的一种 0表示当前处于买入状态(持有股票) 1表示当前处于卖出状态(不持有股票) 2表示当前处于冷冻状态 设dp[i][j]表示i - 1天状态为j时所拥有的最大现金 dp[i][0] Math.ma…...

AUTOSAR知识点Com(七):CANSM初认知

目录 1、概述 2、CanSM主要做什么 2.1、CAN控制器状态管理 2.2、CAN收发器状态管理 2.3、Busoff检测 1、概述 CANSM&#xff08;Controller Area Network State Manager&#xff09;是AUTOSAR&#xff08;Automotive Open System Architecture&#xff09;标准中的一个模块…...

递归:斐波那契数列、递归实现指数型枚举、递归实现排列型枚举

递归&#xff1a;O(2^n) 调用自己 例题及代码模板&#xff1a; 斐波那契数列 输入一个整数 n &#xff0c;求斐波那契数列的第 n 项。 假定从 0 开始&#xff0c;第 0 项为 0。 数据范围 0≤n≤39 样例 输入整数 n5 返回 5 #include <iostream> #include <cstring&g…...

oracle模糊查询时字段内容包含下划线的解决办法

最近项目中遇到一个关于模糊查询问题。表tabA中的字段name的值有下划线的情况&#xff0c;在模糊查询时发现查询的记录不对。 表的结构 表名&#xff1a;tabA id name sex 1 test_601 1 2 test_602 2 3 test16 1 4 t…...

C++:explicit关键字

C中的explicit关键字只能用于修饰只有一个参数的类构造函数&#xff0c;它的作用是表明该构造函数是显示的&#xff0c;而非隐式的&#xff0c;跟它相对应的另一个关键字是implicit&#xff0c;意思是隐藏的&#xff0c;类构造函数默认情况下即声明为implicit(隐式)。那么显示声…...

【C5】bmc wtd,post

文章目录1.bmc_wtd_cpld&#xff1a;syscpld.c中wd_en和wd_kick节点对应寄存器&#xff0c;crontab&#xff0c;FUNCNAME2.AST芯片WDT切换主备&#xff1a;BMC用WDT2作为主备切换的控制器2.1 AC后读取&#xff1a;bmc处于主primary flash&#xff08;设完后&#xff1a;实际主&…...

200.Spark(七):SparkSQL项目实战

一、启动环境 需要启动mysql,hadoop,hive,spark。并且能让spark连接上hive(上一章有讲) #启动mysql,并登录,密码123456 sudo systemctl start mysqld mysql -uroot -p#启动hive cd /opt/module/ myhadoop.sh start#查看启动情况 jpsall#启动hive cd /opt/module/hive/…...

区块链系统:挖矿原理

在比特币的P2P网络中&#xff0c;有一类节点&#xff0c;它们时刻不停地进行计算&#xff0c;试图把新的交易打包成新的区块并附加到区块链上&#xff0c;这类节点就是矿工。因为每打包一个新的区块&#xff0c;打包该区块的矿工就可以获得一笔比特币作为奖励。所以&#xff0c…...

【博弈】【清华冬令营2018模拟】取石子

写完敢说全网没有这么详细的题解了。 注意&#xff1a;题解长是为了方便理解&#xff0c;所以读起来速度应该很快。 题目描述 有 nnn 堆石子&#xff0c;第 iii 堆有 xix_ixi​ 个。 AliceAliceAlice 和 BobBobBob 轮流去石子&#xff08;先后手未定&#xff09;&#xff0c; …...

嵌入式:BSP的理解

BSP概念总结BSP定义BSP的特点BSP的主要工作BSP在嵌入式系统和Windowsx系统中的不同BSP和PC机主板上的BIOS区别BSP与 HAL关系嵌入式计算机系统主要由 硬件层&#xff0c;中间层&#xff0c;系统软件层和应用软件层四层组成。硬件层&#xff1a;包含CPU&#xff0c;存储器(SDRAM&…...

Linux主机Tcpdump使用-centos实例

1、安装前系统信息 ifconfig查看系统网络接口情况。这里可以看到3个interface&#xff0c;ens160是正常使用的网口&#xff0c;lo是主机的loopback地址127.0.0.1。另外&#xff0c;由于centos安装在虚拟主机上&#xff0c;virbr0是KVM默认创建的一个Bridge,其作用是为连接其上的…...

线性DP——AcWing 898. 数字三角形、AcWing 895. 最长上升子序列

AcWing 898. 数字三角形 1.题目 898. 数字三角形 2.思路 DP问题首先考虑状态转移方程&#xff0c;定义一个集合f ( i , j) &#xff0c;表示从第一个数字&#xff08;1,1&#xff09;走到第 i行&#xff0c;第 j列&#xff08;i , j&#xff09;的所有方案的集合&#xff0c…...

SpringMVC

SpringMVC配置 引入Maven依赖 &#xff08;springmvc&#xff09;web.xml配置DispatcherServlet配置 applicationContext 的 MVC 标记开发Controller控制器 几点注意事项&#xff1a; 在web.xml中 配置<load-on-startup> 0 </load-on-startup> 会自动创建Spring…...

C++模板基础(二)

函数模板&#xff08;二&#xff09; ● 模板实参的类型推导 – 如果函数模板在实例化时没有显式指定模板实参&#xff0c;那么系统会尝试进行推导 template<typename T> void fun(T input, T input2) {std::cout << input << \t << input2 << …...

什么是linux内核态、用户态?

目录标题为什么需要区分内核空间与用户空间内核态与用户态如何从用户空间进入内核空间整体结构为什么需要区分内核空间与用户空间 在 CPU 的所有指令中&#xff0c;有些指令是非常危险的&#xff0c;如果错用&#xff0c;将导致系统崩溃&#xff0c;比如清内存、设置时钟等。如…...

day8—选择题

文章目录1.Test.main() 函数执行后的输出是&#xff08;D&#xff09;2. JUnit主要用来完成什么&#xff08;D&#xff09;3.下列选项中关于Java中super关键字的说法正确的是&#xff08;A&#xff09;1.Test.main() 函数执行后的输出是&#xff08;D&#xff09; public clas…...

ngx错误日志error_log配置

ngx之error_log 日志配置格式&#xff1a; 常见的错误日志级别 错误日志可配置位置 关闭error_log配置 设置debug 日志级别的前提&#xff1a; ngx之error_log 日志配置格式&#xff1a; error_log 存放路径 日志级别 例&#xff1a; error_log /usr/local/log…...

1.11、自动化

自动化 一、java 手机自动化 首先new DesertCapabilities&#xff08;这是一个类&#xff09; setCapability – 设置信息 获取appium的驱动对象 new AppiumDriver – 本机IP地址:端口号/wd/hub,前面的设置值信息 driver.findElementById() – 通过id找位置 click() – 点击 &…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...