Radio单选框组件封装 (学习笔记)

文章目录

  • 前言
  • 一、单选框基础布局
  • 二、使用这个组件
  • 总结


前言

单选框组件的封装

一、单选框基础布局

首先要现在文件radioBtn.vue文件

<script setup lang="ts">
defineProps<{
  options: {
    label: string
    value: string | number
  }[]
  modelValue?: string | number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
}>()
const toggleItem = (value: string | number) => {
  // 触发自定义事件把数据给父组件
  emit('update:modelValue', value)
}

</script>

<template>
  <div class="radio_btn">
   <a
      class="item"
      href="javascript:;"
      v-for="item in options"
      :key="item.value"
      // 这个类自己在样式中添加就行,运用于动态高亮显示
      :class="{ active: modelValue === item.value }"
       @click="toggleItem(item.value)"
    >
      {{ item.label }}
    </a>
  </div>
</template>


<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style>

二、使用这个组件

在任意地方.vue组件中引入这个组件进行使用。
代码如下(示例):

<script setup lang="ts">
const options = [
  { label: '男', value: 1 },
  { label: '女', value: 0 }
]
const gender = ref(1)
</script>

<template>
 <radioBtn :options="options" v-model="gender"></radioBtn>
</template>

<style lang="scss" scoped></style>

最终效果:
在这里插入图片描述

总结

以上就是今天要讲的内容,本文仅仅简单介绍了单选框组件的封装,如果有其他想法可以自行修改。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【二轮征稿启动】第三届环境工程与可持续能源国际会议持续收录优质稿件

第三届环境工程与与可持续能源国际会议&#xff08;EESE 2024&#xff09;由中南林业科技大学主办&#xff0c;湖南农业大学协办&#xff0c;将于2024年12月20日-22日在湖南长沙召开。 大会邀请到国家杰出青年科学基金获得者、华中科技大学能源与动力工程学院冯光教授&#xf…

基于docker 部署redis

1、拉取镜像 docker pull redis:latest如果拉取失败可以尝试下配置镜像源&#xff0c;具体参考如下&#xff0c;目前暂可以使用 Docker切换镜像源-CSDN博客 2、创建配置文件 mkdir /usr/local/redis/conf vim redis.conf bind 0.0.0.0#protected-mode no port 6379 tcp-b…

VantUI

官网&#xff1a;Vant 4 - A lightweight, customizable Vue UI library for mobile web apps. Vant组件库&#xff1a; 基础组件 按钮、图标、布局、提示信息等 表单组件 日历、复选框、时间选择、输入框、评分等 反馈组件 弹出框、加载、下拉菜单、消息提示、下拉刷新、滚动…

C#与Sqlite数据库

1&#xff0c;一般的访问方式。 1.1&#xff0c;连接语句。 //sqlite 连接,支持相对位置&#xff0c;也支持绝对位置 Data Source../../Database/cater.db// 连接数据库&#xff0c;FailIfMissingfalse时若文件不存在会自动创建 string connStr "DataSourcetest.db;Vers…

Cout输出应用举例

Cout输出应用 在main.cpp里输入程序如下&#xff1a; #include <iostream> //使能cin(),cout(); #include <stdlib.h> //使能exit(); #include <sstream> #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和res…

LLM - 使用 Neo4j 可视化 GraphRAG 构建的 知识图谱(KG) 教程

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/142938982 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 Neo4j 是一个高性能的图形数据库,允许用户以图形的形式存储和检索数据…

input子系统中读取流程解析

往期内容 本专栏往期内容&#xff1a; input子系统的框架和重要数据结构详解-CSDN博客input device和input handler的注册以及匹配过程解析-CSDN博客 I2C子系统专栏&#xff1a; 专栏地址&#xff1a;IIC子系统_憧憬一下的博客-CSDN博客具体芯片的IIC控制器驱动程序分析&#x…

找不到包的老版本???scikit-learn,numpy,scipy等等!!

废话不多说 直接上链接了&#xff1a; https://pypi.tuna.tsinghua.edu.cn/simple/https://pypi.tuna.tsinghua.edu.cn/simple/https://pypi.tuna.tsinghua.edu.cn/simple/xxx/ 后面的这个xxx就是包的名字 大家需要什么包的版本&#xff0c;直接输进去就可以啦 举个栗子&#…

银河麒麟相关

最近安装了银河麒麟server版本&#xff0c;整理下遇到的一些小问题 1、vmware安装Kylin-Server-V10-SP3-General-Release-2303-X86_64虚拟机完成后&#xff0c;桌面窗口很小&#xff0c;安装vmwaretools后解决&#xff0c;下载地址http://softwareupdate.vmware.com/cds/vmw-de…

听见文本的魅力:AI 与未来的语音交互

AI 与未来的语音交互 引言什么是文本转语音&#xff08;TTS&#xff09;&#xff1f;当前 TTS 技术现状国内海外文本转语音能力调研文本转语音能力说明多情感风格SSML语音合成标记语言 未来趋势 引言 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;文本转…

全流程演示:如何从0到1构建分布式GPU计算环境

【温馨提示&#xff1a;本篇文章涉及较多代码&#xff0c;请移步至wx公号星融元Asterfusion&#xff0c;发送关键词“分布式”获取完整版及Q&A】 随着AI、大模型的快速发展&#xff0c;传统的集中式计算已无法应对激增的数据处理需求&#xff0c;而分布式计算是指将一个计…

VTK的学习方法-第一类型应用

相信很多做研究的人都在使用VTK&#xff0c;其实VTK的学习分成两类。一类就是使用VTK中现有的算法来完成自己的工作&#xff0c;比如数据的显示和渲染。另外一类是需要继承里面的算法类&#xff0c;自己根据自己的需求来重新写一个算法。 对于第一种类型的应用&#xff0c;不要…

E43.【C语言】练习:传值调用和传址调用混淆点解释

1.问题 阅读下列代码,在Function函数返回前,px的值会因malloc的返回值而发生改变吗? #include <stdlib.h> void Function(int* ptr) {ptr (int*)malloc(sizeof(int)); }int main() {int* px NULL;Function(px);return 0; }2.分析 VS2022进入调试模式,下断点在retur…

利用客户端导入有关联的业务数据(DBeaver+sql)

前言 最近有点坑&#xff0c;麻辣烫的活落手上了&#xff0c;上个迭代除了自己的开发任务&#xff0c;还有处理接手的工作。然后节后问题又多&#xff0c;还有前1个迭代没有测试的模块本迭代测试&#xff0c;烦死了。 这次这个数据处理的活&#xff0c;以后希望可以交出…

Android 判断手机放置的方向

#1024程序员节&#xff5c;征文# 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 需求 老板&#xff1a;我有个手持终端&#xff0c;不能让他倒了&#xff0c;当他倒或者倾斜的时候要发出报警&#xff1b; 程序猿&#xff1a;我这..... 老板…

uniapp 常用的地区行业各种多选多选,支持回显,复制粘贴可使用

uniapp 常用的地区行业各种多选多选&#xff0c;支持回显 必须导入uni-popup 弹出层 该组件 1.目前项目开发中使用到这类似挺多的&#xff0c;记录一下&#xff0c;方便以后是使用 2.使用前提&#xff0c;目前不做无限级&#xff0c;只支持二维数组&#xff0c;模板里只循环了两…

GitLab+Jenkins 实现 Webhook 自动化触发构建

在持续集成和持续部署&#xff08;CI/CD&#xff09;过程中&#xff0c;如何实现代码提交后自动触发构建&#xff1f;今天&#xff0c;我们将通过GitLab与Jenkins的集成&#xff0c;利用Webhook实现自动化触发构建&#xff0c;为你的开发流程注入高效能量&#xff01; 在每次代…

从零开始:AI制作PPT工具大比拼

现在真的万物皆可AI了&#xff0c;甚至是令人头疼的PPT&#xff0c;也可以直接用AI来搞定了。作为一个PPT新手&#xff0c;我最近对AI制作PPT这个话题产生了浓厚的兴趣。我决定亲自试一试市面上几款热门的AI制作PPT工具&#xff1a;笔灵AIPPT、轻竹PPT、博思白板AIPPT和KimiAI。…

GPT-4o 和 GPT-4 Turbo 模型之间的对比

GPT-4o 和 GPT-4 Turbo 之间的对比 备注 要弄 AI &#xff0c;不同模型之间的对比就比较重要。 GPT-4o 是 GPT-4 Turbo 的升级版本&#xff0c;能够提供比 GPT-4 Turbo 更多的内容和信息&#xff0c;但成功相对来说更高一些。 第三方引用 在 2024 年 5 月 13 日&#xff0…

kaggle在线训练深度学习模型

kaggle https://www.kaggle.com/ code 通过jupyter notebook上传代码&#xff0c;执行训练 dataset 支持手动上传本地资源文件到input /kaggle/input&#xff0c;dataset通过input访问&#xff0c;input目录是只读的 /kaggle/working&#xff0c;保存文件到working&#…