当前位置: 首页 > 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>
http://www.lryc.cn/news/533343.html

相关文章:

  • OC-Block
  • 关于知识蒸馏的概念原理以及常见方法
  • C++轻量级桌面GUI库FLTK
  • C++20导出模块及使用
  • PID 算法简介(C语言)
  • Java中的继承及相关概念
  • 语言月赛 202308【小粉兔做麻辣兔头】题解(AC)
  • 云原生后端|实践?
  • GrassWebProxy
  • 6.Python函数:函数定义、函数的类型、函数参数、函数返回值、函数嵌套、局部变量、全局变量、递归函数、匿名函数
  • 青少年编程与数学 02-008 Pyhon语言编程基础 22课题、类的定义和使用
  • CosyVoice /F5-TTS /GPT-SoVITS /Fish-Speech 开源语音克隆与文本转语音(TTS)项目的对比整理
  • MySQL基于binlog和gtid主从搭建方案
  • 5 计算机网络
  • Vim跳转文件及文件行结束符EOL
  • 智能理解 PPT 内容,快速生成讲解视频
  • 【鸿蒙开发】第二十四章 AI - Core Speech Kit(基础语音服务)
  • Java/Kotlin双语革命性ORM框架Jimmer(一)——介绍与简单使用
  • 番外02:前端八股文面试题-CSS篇
  • Redis Copilot:基于Redis为AI打造的副驾工具
  • JavaScript遍历对象的7种方式
  • 如何避免NACK重传风暴
  • 并发工具CountDownLatch、CyclicBarrier、Semaphore
  • 十二. Redis 集群操作配置(超详细配图,配截图详细说明)
  • 网络工程师 (26)TCP/IP体系结构
  • TensorFlow域对抗训练DANN神经网络分析MNIST与Blobs数据集梯度反转层提升目标域适应能力可视化...
  • 保姆级教程--DeepSeek部署
  • 机器学习之心的创作纪念日
  • VeryReport和FastReport两款报表软件深度分析对比
  • libtorch的c++,加载*.pth