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

uniapp封装组件,选中后右上角显示对号√样式(通过css实现)

效果:

blog.csdnimg.cn/b0952e5aca714ce392d478dbfaade18d.png)

一、组件封装

1、在项目根目录下创建components文件夹,自定义组件名称,我定义的是xc-button
在这里插入图片描述
2、封装组件代码

<template><view class="handle-btn"><view :class="handleIdCode == '1' ? 'select' : 'unSelect'" @click="agreeBtn">{{agreeLabel}}</view><view :class="handleIdCode == '0' ? 'select' : 'unSelect'" @click="unAgreeBtn">{{unAgreeLabel}}</view></view>
</template><script>export default {name:"xc-button",props:{handleId:{type: String,default:"",},//lable值agreeLabel: {type: String,default:"",},//lable值unAgreeLabel: {type: String,default:"",}},data() {return {handleIdCode:''};},methods:{agreeBtn(){this.handleIdCode = '1',this.$emit('agreeBtn')},unAgreeBtn(){this.handleIdCode = '0',this.$emit('unAgreeBtn')},},onLoad() {this.handleIdCode = this.handleId}}
</script><style lang="scss">
// 按钮样式	
.handle-btn{display: flex;
}
.select {position: relative;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 16rpx 32rpx;width: 120rpx;height: 56rpx;border-radius: 2px;margin: 0 10rpx;background-color: #E8F3FF;color: #5999fc;
}
.select:before {content: '';position: absolute;right: 0;top: 0;border: 24rpx solid #5999fc;border-top-color: transparent;border-left-color: transparent;transform: rotate(-90deg);}.select:after {content: '';width: 2px;height: 5px;position: absolute;right: 3px;top: 5px;border: 1px solid #fff;border-top-color: transparent;border-left-color: transparent;transform: rotate(45deg);}
.unSelect{box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 16rpx 32rpx;width: 120rpx;height: 56rpx;background: #F8F8F8;border: 0.5px solid #F8F8F8;border-radius: 2px;margin: 0 10rpx;}
</style>

二、在页面中使用组件

<template><view><xc-button agreeLabel="是"  unAgreeLabel="否" handleId="1" @agreeBtn="agreeBtn" @unAgreeBtn="unAgreeBtn"></xc-button></view>
</template><script>export default {data() {return {};},methods: {agreeBtn() {console.log('是被触发了')},unAgreeBtn() {console.log('否被触发了')},}}
</script><style lang="scss"></style>

相关文章:

uniapp封装组件,选中后右上角显示对号√样式(通过css实现)

效果&#xff1a; 一、组件封装 1、在项目根目录下创建components文件夹&#xff0c;自定义组件名称&#xff0c;我定义的是xc-button 2、封装组件代码 <template><view class"handle-btn"><view :class"handleIdCode 1 ? select : unSelec…...

华为OD面试(部分)

笔试与性格测验 一面 问题和算法题都挺简单的 二面 Java内存泄漏 算法题思路不对&#xff0c;没写完只说了下思路&#xff1a;Leetcode516. Longest Palindromic Subsequence hr面&#xff08;资面&#xff09; 最后告诉我hr面挂了。其实这不是最重要的&#xff0c;因为还…...

从零做软件开发项目系列之一综论软件项目开发

1 引言 有一个三个泥瓦匠的故事。 三个泥瓦匠在砌墙&#xff0c;一个人走过来&#xff0c;问他们在干什么。   第一个泥瓦匠没好气地说&#xff0c;你没看见吗&#xff1f;我在辛苦地砌墙呢。   第二个回答&#xff0c;我们正在建一座高楼。   第三个则洋溢着喜悦说&…...

msvcp110.dll是什么意思,msvcp110.dll丢失的解决方法

装好软件或游戏之后&#xff0c;一打开就跳出各种报错信息的情况小伙伴一定见过&#xff0c;其中缺少各种msvcp110.dll文件最常见。小伙伴们一定奇怪&#xff0c;用得好好的电脑&#xff0c;怎么会缺文件呢&#xff1f;为啥其他游戏/应用就没事呢&#xff1f;其实这些“丢失”的…...

【报错】git push --set-upstream origin XXXX重名

您在尝试将分支推送到远程仓库时遇到了错误。错误信息表明&#xff0c;由于已经存在名为 refs/heads/xingfan/demo 的文件夹&#xff0c;Git 无法创建分支 refs/heads/xingfan。 要解决此问题&#xff0c;您可以尝试重命名本地分支&#xff0c;然后将其推送到远程仓库。以下是…...

探索树算法:C语言实现二叉树与平衡树

探索树算法&#xff1a;C语言实现二叉树与平衡树 树是计算机科学中一个重要且广泛应用的数据结构&#xff0c;它在许多领域都有着重要作用。本篇博客将深入介绍两种常见的树算法&#xff1a;二叉树遍历和平衡二叉树&#xff08;AVL树&#xff09;&#xff0c;并提供在C语言中的…...

Ubuntu 20.04(服务器版)安装 Anaconda

0、Anaconda介绍 Anaconda是一个开源的Python发行版本&#xff0c;包含了包括Python、Conda、科学计算库等180多个科学包及其依赖项。因此&#xff0c;安装了Anaconda就不用再单独安装CUDA、Python等。 CUDA&#xff0c;在进行深度学习的时候&#xff0c;需要用到GPU&#xf…...

IDEA项目实践——JavaWeb简介以及Servlet编程实战

系列文章目录 IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映射、注解开发 IDEA项目实践——Spring框架简介,以及IOC注解 IDEA项目实践——Spring当…...

【Freertos基础入门】队列(queue)的使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、队列是什么&#xff1f;二、队列的操作二、示例代码总结 前言 本系列基于stm32系列单片机来使用freerots FreeRTOS是一个广泛使用的开源实时操作系统&…...

从零构建深度学习推理框架-8 卷积算子实现

其实这一次课还蛮好理解的&#xff1a; 首先将kernel展平&#xff1a; for (uint32_t g 0; g < groups; g) {std::vector<arma::fmat> kernel_matrix_arr(kernel_count_group);arma::fmat kernel_matrix_c(1, row_len * input_c_group);for (uint32_t k 0; k < k…...

【Spring Boot】JdbcTemplate数据连接模板 — JdbcTemplate入门

JdbcTemplate入门 本节从基础的部分开始介绍什么是JDBC、什么是JdbcTemplate&#xff0c;然后介绍Spring Boot项目如何使用JdbcTemplate操作数据库。 1.JdbcTemplate简介 1.1 什么是JDBC JDBC&#xff08;Java Data Base Connectivity&#xff0c;Java数据库连接&#xff0…...

视频汇聚集中存储EasyCVR平台调用iframe地址视频无法播放,该如何解决?

安防监控视频汇聚平台EasyCVR基于云边端一体化架构&#xff0c;具有强大的数据接入、处理及分发能力&#xff0c;可提供视频监控直播、云端录像、视频云存储、视频集中存储、视频存储磁盘阵列、录像检索与回看、智能告警、平台级联、云台控制、语音对讲、AI算法中台智能分析无缝…...

从今天起,重新出发

2017年的时候&#xff0c;我还是一名在校大学生&#xff0c;当时为了准备实习面试写下了第一篇学习笔记。 2018年我开始工作&#xff0c;简单记录了使用 Airflow 的踩坑记录。 一直到今天我已经是一个工作了五年的社畜&#xff0c;但是很遗憾没有把工作中的成长记录下来。 当…...

Java多态详解(1)

多态 多态的概念 所谓多态&#xff0c;通俗地讲&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 比如&#xff1a; 这一时间爆火的“现代纪录片”中&#xff0c;麦克阿瑟总是对各种“名人”有不同的评价&…...

optee读取Arm系统寄存器的模板

先写一个通用的内联函数模板,然后再通过宏控来定义各种读写函数。 (core/arch/arm/include/arm64.h)/** Templates for register read/write functions based on mrs/msr*/#define DEFINE_REG_READ_FUNC_(reg, type, asmreg) \ sta...

VSCode 使用总结

快捷键 在 Visual Studio Code (VSCode) 中&#xff0c;有许多常用的快捷键可以提高编程效率。以下是一些常见的 VSCode 编程项目快捷键&#xff1a; 编辑器操作&#xff1a; 撤销&#xff1a;Ctrl Z重做&#xff1a;Ctrl Shift Z复制&#xff1a;Ctrl C剪切&#xff1a;C…...

GuLi商城-前端基础Vue-使用Vue脚手架进行模块化开发

自己亲自实践&#xff1a; mac安装webpack webpack 简介Webpack 是一个非常流行的前端构建工具&#xff0c;它可以将多个模块&#xff08;包括CSS、JavaScript、图片等&#xff09;打包成一个或多个静态资源文件&#xff08;bundle&#xff09;&#xff0c;以便用于部署到生产…...

LeetCode450. 删除二叉搜索树中的节点

450. 删除二叉搜索树中的节点 文章目录 [450. 删除二叉搜索树中的节点](https://leetcode.cn/problems/delete-node-in-a-bst/)一、题目二、题解方法一&#xff1a;递归&#xff08;一种麻烦的方法&#xff09;方法二&#xff1a;优化后的递归 一、题目 给定一个二叉搜索树的根…...

Java动态调试技术原理及实践

文章目录 Java动态调试技术原理及实践引言故事场景一:开发调试动态调试技术简介Java Instrumentation简介动态调试技术实践案例分析场景二:线上问题排查动态调试技术实践案例分析总结Java动态调试技术原理及实践 引言 在日常的软件开发过程中,调试是一个非常重要的环节。当…...

Lua + Redis 实战代码

--[[luarocks install luasocket module socket not foundhttps://github.com/nrk/redis-lua最历害的是&#xff0c;用redis 去跑lua&#xff0c;分布式锁&#xff0c;限流&#xff0c;]]--local redis require("redis");local config{host"127.0.0.1&…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...