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

封装descriptions组件,描述,灵活

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

1、组件1,dade-descriptions.vue

<template><table><tbody><slot></slot></tbody>  </table>
</template><script>
</script><style scoped>table {width: 100%;border-collapse: collapse;table-layout: fixed; /* 设置表格布局为固定 */}
</style>

2、组件2,dade-descriptions-item.vue

<template><th :style="'width:'+width+'px'">{{label}}</th><td :colspan="colspan"><slot></slot></td>
</template><script setup>import { defineProps } from 'vue';// 定义 propsconst props = defineProps({label: {type: String,default: ''},colspan:{type: String,default: '1' },width:{type: String,default: '100' }});
</script><style scoped>th,td {border: 1px solid rgba(239, 239, 245, 1);padding: 0px 4px 0px 0px;}th {/* width: 100px; */text-align: left;background-color:rgba(250, 250, 252, 1);padding: 4px 8px;}
</style>

3、组件3,dade-input

<template><input class="dade-input" style="width: 100%;" :type="type" :placeholder="placeholder" :disabled="disabled"/>
</template><script setup>import { defineProps } from 'vue';// 定义 propsconst props = defineProps({placeholder: {type: String,default: ''},type:{type: String,default: 'text' },disabled:{type: Boolean,default: false }});
</script><style scoped>.dade-input{border: none;outline: none;padding: 4px 8px;border: 1px solid transparent;margin: 2px;}.dade-input:hover {border: 0.5px solid #1ab362c7;margin: 2px;-webkit-box-shadow: 0 0.1px 0px 0 #1ab362c7;box-shadow: 0 0.1px 1.5px 0 #1ab362c7;}.dade-input:focus {border: 0.5px solid #1ab362c7;margin: 2px;-webkit-box-shadow: 0 0.1px 0px 0 #1ab362c7;box-shadow: 0 0.1px 3px 0 #1ab362c7;}
</style>

4、全局注册

import './assets/main.css'
import naive from 'naive-ui'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import dadeInput from './common/dade-input.vue'
import dadeDescriptions from './common/descriptions/dade-descriptions.vue'
import dadeDescriptionsItem from './common/descriptions/dade-descriptions-item.vue'const app = createApp(App)
app.use(naive)
app.use(router)
// 使用 app.component() 注册全局组件
app.component('dade-input', dadeInput)
app.component('dade-descriptions', dadeDescriptions)
app.component('dade-descriptions-item', dadeDescriptionsItem)app.mount('#app')

5、使用

<template><div><div style="margin-top:10px;width: 100%;"><dade-descriptions><tr><dade-descriptions-item label="大得001" width="100"><dade-input placeholder="大得" disabled="true"></dade-input></dade-descriptions-item><dade-descriptions-item label="大得001" width="100"><div style="padding: 4px 8px;">22</div></dade-descriptions-item><dade-descriptions-item label="大得001" width="150"><div style="padding: 4px 8px;">22</div></dade-descriptions-item><dade-descriptions-item label="大得001"><div style="padding: 4px 8px;">22</div></dade-descriptions-item></tr><tr><dade-descriptions-item label="大得001"><dade-input placeholder="大得"></dade-input></dade-descriptions-item><dade-descriptions-item label="大得001" colspan="5"><dade-input placeholder="大得"></dade-input></dade-descriptions-item></tr><tr><dade-descriptions-item label="大得001" colspan="7"><dade-input placeholder="大得"></dade-input></dade-descriptions-item></tr></dade-descriptions></div></div>
</template><script setup>
</script><style scoped></style>

相关文章:

封装descriptions组件,描述,灵活

效果 1、组件1&#xff0c;dade-descriptions.vue <template><table><tbody><slot></slot></tbody> </table> </template><script> </script><style scoped>table {width: 100%;border-collapse: coll…...

OC-Block

关于OC中的block作为属性时&#xff0c;为什么要要用copy修饰 property (nonatomic, copy) void (^completionBlock)(void);很多文章包括AI都会给出类似结论 Block 默认分配在栈上&#xff0c;如果没有 copy&#xff0c;当方法退出后&#xff0c;Block 会被销毁。使用 copy 修…...

关于知识蒸馏的概念原理以及常见方法

1. 概念与原理 知识蒸馏的基本定义 知识蒸馏(Knowledge Distillation) 是一种将模型压缩与迁移学习结合的技术:它利用预先训练好的大模型(通常参数量大、精度高、计算开销大)指导一个更轻量(参数量小、推理速度快)的学生模型进行训练,从而在保持模型精度的同时显著减少…...

C++轻量级桌面GUI库FLTK

C轻量级桌面GUI库FLTK Screenshots - Fast Light Toolkit (FLTK) 这里写个备忘录,可以参考一下....

C++20导出模块及使用

1.模块声明 .ixx文件为导入模块文件 math_operations.ixx export module math_operations;//模块导出 //导出命名空间 export namespace math_ {//导出命名空间中函数int add(int a, int b);int sub(int a, int b);int mul(int a, int b);int div(int a, int b); } .cppm文件…...

PID 算法简介(C语言)

一、简介: PID是比例、积分、微分三个环节的组合,用来进行反馈控制。每个部分都有对应的系数,也就是Kp、Ki、Kd。PID 算法实现这三个部分的计算,然后综合起来得到控制输出。 二、PID控制器结构体: PID控制器结构体:包含PID参数(Kp, Ki, Kd);存储积分项和上一次误差;…...

Java中的继承及相关概念

在 Java 中&#xff0c;继承是一种允许一个类继承另一个类的特性。通过继承&#xff0c;子类可以获取父类的属性和方法&#xff0c;这有助于减少代码冗余并提高代码的可维护性。以下是关于文件内容的相关分析和知识点总结&#xff1a; 一、继承的核心概念 1.继承的语法 Java …...

语言月赛 202308【小粉兔做麻辣兔头】题解(AC)

》》》点我查看「视频」详解》》》 [语言月赛 202308] 小粉兔做麻辣兔头 题目描述 粉兔喜欢吃麻辣兔头&#xff0c;麻辣兔头的辣度分为若干级&#xff0c;用数字表示&#xff0c;数字越大&#xff0c;兔头越辣。为了庆祝粉兔专题赛 #1 的顺利举行&#xff0c;粉兔要做一些麻…...

云原生后端|实践?

云原生&#xff08;Cloud Native&#xff09;是一种构建和运行应用程序的方法&#xff0c;它充分利用云计算的优势&#xff0c;包括弹性、可扩展性、高可用性和自动化运维。云原生后端开发通常涉及微服务架构、容器化、持续集成/持续部署&#xff08;CI/CD&#xff09;、服务网…...

GrassWebProxy

GrassWebProxy第一版&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Net.Sockets; using System.Net; using System.Text; using System.Threading; using System.Threading.Tasks; using System.IO; using Newtonsoft.Json;…...

6.Python函数:函数定义、函数的类型、函数参数、函数返回值、函数嵌套、局部变量、全局变量、递归函数、匿名函数

1. 函数定义 Python函数通过def关键字定义。一个函数通常包括函数名、参数列表和函数体。 def greet(name):return f"Hello, {name}!"2. 函数的类型 Python中的函数主要有以下几种类型&#xff1a; 普通函数&#xff1a;具有明确的输入参数和返回值。递归函数&am…...

青少年编程与数学 02-008 Pyhon语言编程基础 22课题、类的定义和使用

青少年编程与数学 02-008 Pyhon语言编程基础 22课题、类的定义和使用 一、类类的定义和使用示例 二、定义1. 类定义语法2. 属性和方法3. 构造器和初始化4. 实例化5. 类变量和实例变量6. 类方法和静态方法7. 继承8. 多态总结 三、使用1. 创建类的实例2. 访问属性3. 调用方法4. 修…...

CosyVoice /F5-TTS /GPT-SoVITS /Fish-Speech 开源语音克隆与文本转语音(TTS)项目的对比整理

四个主流开源语音克隆与文本转语音&#xff08;TTS&#xff09;项目的对比整理&#xff0c;基于公开资料与实测反馈总结&#xff1a; 项目CosyVoice F5-TTS GPT-SoVITS Fish-Speech 核心技术双向流式语音合成&#xff0c;支持离线与流式一体化建模基于流匹配的ConvNeXt文本表示…...

MySQL基于binlog和gtid主从搭建方案

MySQL基于binlog和gtid主从搭建方案 一.主库配置 1.1 确认 binlog 是否开启 SHOW VARIABLES LIKE %log_bin%; 1.2 创建日志目录并设置权限 mkdir -p /opt/mysql/log_bin chown -R mysql:mysql /usr/local/mysql chmod -R 755 /usr/local/mysql 1.3 修改 my.cnf 配置文件 …...

5 计算机网络

5 计算机网络 5.1 OSI/RM七层模型 5.2 TCP/IP协议簇 5.2.1:常见协议基础 一、 TCP是可靠的&#xff0c;效率低的&#xff1b; 1.HTTP协议端口默认80&#xff0c;HTTPSSL之后成为HTTPS协议默认端口443。 2.对于0~1023一般是默认的公共端口不需要注册&#xff0c;1024以后的则需…...

Vim跳转文件及文件行结束符EOL

跳转文件 gf 从当前窗口打开那个文件的内容&#xff0c;操作方式&#xff1a;让光标停在文件名上&#xff0c;输入gf。 Ctrlo 从打开的文件返回之前的窗口 Ctrlwf 可以在分割的窗口打开跳转的文件&#xff0c;不过在我的实验不是次次都成功。 统一行尾格式 文本文件里存放的…...

智能理解 PPT 内容,快速生成讲解视频

当我们想根据一版 PPT 制作出相对应的解锁视频时&#xff0c;从撰写解锁词&#xff0c;录制音频到剪辑视频&#xff0c;每一个环节都需要投入大量的时间和精力&#xff0c;本方案将依托于阿里云函数计算 FC 和百炼模型服务&#xff0c;实现从 PPT 到视频的全自动转换&#xff0…...

【鸿蒙开发】第二十四章 AI - Core Speech Kit(基础语音服务)

目录 1 简介 1.1 场景介绍 1.2 约束与限制 2 文本转语音 2.1 场景介绍 2.2 约束与限制 2.3 开发步骤 2.4 设置播报策略 2.4.1 设置单词播报方式 2.4.2 设置数字播报策略 2.4.3 插入静音停顿 2.4.4 指定汉字发音 2.5 开发实例 3 语音识别 3.1 场景介绍 3.2 约束…...

Java/Kotlin双语革命性ORM框架Jimmer(一)——介绍与简单使用

概览 Jimmer是一个Java/Kotlin双语框架 包含一个革命性的ORM 以此ORM为基础打造了一套综合性方案解决方案&#xff0c;包括 DTO语言 更全面更强大的缓存机制&#xff0c;以及高度自动化的缓存一致性 更强大客户端文档和代码生成能力&#xff0c;包括Jimmer独创的远程异常 …...

番外02:前端八股文面试题-CSS篇

一&#xff1a;CSS基础 1&#xff1a;CSS选择器及其优先级 2&#xff1a;display的属性值及其作用 属性值作用none元素不显示&#xff0c;并且会从文档流中移除block块类型&#xff0c;默认元素为父元素宽度&#xff0c;可设置宽高&#xff0c;换行显示inline行内元素类型&a…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...