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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/90976.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023.8.14论文阅读

文章目录 ESPNet: Efficient Spatial Pyramid of Dilated Convolutions for Semantic Segmentation摘要本文方法实验结果 DeepFusion: Lidar-Camera Deep Fusion for Multi-Modal 3D Object Detection摘要本文方法实验结果 ESPNet: Efficient Spatial Pyramid of Dilated Convo…

一、Kubernetes介绍与集群架构

Kubernetes介绍与集群架构 一、认识容器编排工具 docker machine 主要用于准备docker host现已弃用建议使用docker desktop docker compose Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。使用 Compose&#xff0c;您可以使用 YAML 文件来配置应用程序的服务。…

STM32定时器TIM控制

一、CubeMX的设置 1、新建工程&#xff0c;进行基本配置 2、配置定时器TIM2 1&#xff09;定时器计算公式&#xff1a;&#xff08;以下两条公式相同&#xff09; Tout ((ARR1) * PSC1)) / Tclk TimeOut ((Prescaler 1) * (Period 1)) / TimeClockFren Tout TimeOut&…

一生一芯3——ubuntu下显示器扩展

刚进ubuntu时不知道如何完成屏幕扩展&#xff0c;查阅后发现是显卡驱动问题&#xff0c;这里需要调整内置显示器的驱动 打开附加驱动 选择显卡驱动如上&#xff08;其他没试过&#xff09; 应用更改 -> 下载后重启 重启完成后扩展显示器上就有显示了 在设置中调整显示屏顺…

电商3D产品渲染简明教程

3D 渲染让动作电影看起来更酷&#xff0c;让建筑设计变得栩栩如生&#xff0c;现在还可以帮助营销人员推广他们的产品。 从最新的《阿凡达》电影到 Spotify 的上一次营销活动&#xff0c;3D 的应用让一切变得更加美好。 在营销领域&#xff0c;3D 产品渲染可帮助品牌创建产品的…

2023-08-15 linux mipi 屏幕调试:有一个屏幕开机时候不显示,开机后按power 按键休眠唤醒就可以显示。原因是reset gpio 被复用

一、现象&#xff1a;今天更新了一个新版本的buildroot linux sdk &#xff0c;调试两个mipi 屏幕&#xff0c;这两个屏幕之前在其他的sdk都调好了的&#xff0c;所有直接把配置搬过来。但是有一个屏幕可以正常显示&#xff0c;有一个屏幕开机时候不显示&#xff0c;开机后按po…

银河麒麟安装php7.1.33

银河麒麟V10兼容CentOS 8 安装过程与CentOS类似。 TencentOS3.1安装PHPNginxredis测试系统_乐大师的博客-CSDN博客 可以参考之前我写的文章。 不过有2个细节不同&#xff0c;下面说下。 问题1&#xff1a;编译错误提示“error:off_t undefined” 解决方法&#xff1a; 编…

运维监控学习笔记7

Zabbix的安装&#xff1a; 1、基础环境准备&#xff1a; 安装zabbix的yum源&#xff0c;阿里的yum源提供了zabbix3.0。 rpm -ivh http://mirrors.aliyun.com/zabbix/zabbix/3.0/rhel/7/x86_64/zabbix-release-3.0-1.el7.noarch.rpm 这个文件就是生成了一个zabbix.repo 2、安…

华为开源自研AI框架昇思MindSpore应用案例:基于MindSpore框架的UNet-2D案例实现

目录 一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例 二、环境准备与数据读取三、模型解析Transformer基本原理Attention模块 Transformer EncoderViT模型的输入整体构建ViT 四、模型训练与推理模型训练模型验证模型推理 近些年&#xff0c;随着基于自注意&…

UI设计师个人工作感悟5篇

UI设计师个人工作感悟一 工作一年了&#xff0c;结合我自身谈谈UI设计的重要性。现在主流的论坛建站程序有两种 Phpwind 和Discuz(Phpwind被阿里巴巴收购 Discuz被腾讯收购这两个论坛程序都是开源免费的)&#xff0c;利用这两种程序我都分别建立过论坛&#xff0c;我第一次用的…

C++入门篇7---string类

所谓的string类&#xff0c;其实就是我们所说的字符串&#xff0c;本质和c语言中的字符串数组一样&#xff0c;但是为了更符合C面向对象的特性&#xff0c;特地将它写成了一个单独的类&#xff0c;方便我们的使用 对其定义有兴趣的可以去看string类的文档介绍&#xff0c;这里…

Rabbitmq延迟消息

目录 一、延迟消息1.基于死信实现延迟消息1.1 消息的TTL&#xff08;Time To Live&#xff09;1.2 死信交换机 Dead Letter Exchanges1.3 代码实现 2.基于延迟插件实现延迟消息2.1 插件安装2.2 代码实现 3.基于延迟插件封装消息 一、延迟消息 延迟消息有两种实现方案&#xff…

微软杀入Web3:打造基于区块链的AI产品

作者&#xff1a;秦晋 2023年1月&#xff0c;微软向 ChatGPT 创建者 OpenAI 投资 100 亿美元&#xff0c;在AI业界引发格外关注。此举也让微软在AI的战略探索上提前取得有利位置。 2023年3月&#xff0c;微软软件工程师 Albacore 披露微软正在为Edge 浏览器测试内置的非托管加密…

全新 – Amazon EC2 M1 Mac 实例

去年&#xff0c;在 re: Invent 2021 大会期间&#xff0c;我写了一篇博客文章&#xff0c;宣布推出 EC2 M1 Mac 实例的预览版。我知道你们当中许多人请求访问预览版&#xff0c;我们尽了最大努力&#xff0c;却无法让所有人满意。不过&#xff0c;大家现在已经无需等待了。我很…

LeNet中文翻译

Gradient-Based Learning Applied to Document Recognition 基于梯度的学习应用于文档识别 摘要 使用反向传播算法训练的多层神经网络构成了成功的基于梯度的学习技术的最佳示例。给定适当的网络架构&#xff0c;基于梯度的学习算法可用于合成复杂的决策表面&#xff0c;该决策…

C++ STL priority_queue

目录 一.认识priority_queue 二. priority_queue的使用 三.仿函数 1.什么是仿函数 2.控制大小堆 3.TopK问题 四.模拟实现priority_queue 1.priority_queue的主要接口框架 2.堆的向上调整算法 3.堆的向下调整算法 4.仿函数控制大小堆 五.priority_queue模拟实现整体代码和测…

用js快速生成一个简单的css原子库 例如: .mr-18 .pl-18

第三方css原子库的缺点 比如 tailwindcss&#xff0c;有学习成本最开始写的时候效率可能还没有我们自己手写效率高&#xff0c;需要配置&#xff0c;会有原始样式被覆盖的问题&#xff1b;总之就是一个字重 自己搓的优点 学习成本低灵活不会有副作用 <!DOCTYPE html>…

Redis详解

Redis 简介 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的高性能键值对存储数据库&#xff0c;最初由 Salvatore Sanfilippo 开发&#xff0c;它在内存中存储数据&#xff0c;并提供了持久化功能&#xff0c;可以将数据保存到磁盘中&#xff0c;是一种N…

Stephen Wolfram:那么…ChatGPT 在做什么,为什么它有效呢?

So … What Is ChatGPT Doing, and Why Does It Work? 那么…ChatGPT在做什么&#xff0c;为什么它有效呢&#xff1f; The basic concept of ChatGPT is at some level rather simple. Start from a huge sample of human-created text from the web, books, etc. Then train…

阿里云内容审核服务使用(图片审核)

说明&#xff1a;在项目中&#xff0c;我们经常会对用户上传的内容&#xff08;如文字、图片&#xff09;等资源内容进行审核&#xff0c;审核包括两方面&#xff0c;一方面是内容与描述不符&#xff0c;一方面是违反法律法规。本文介绍使用阿里提供的内容审核服务&#xff0c;…