封装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';
	// 定义 props
	const 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';
	// 定义 props
	const 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>
相关推荐
Ronin3058 分钟前
【C++】类型转换
开发语言·c++
mrbone1124 分钟前
Git-git worktree的使用
开发语言·c++·git·cmake·worktree·gitab
浪裡遊35 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
真实的菜42 分钟前
JVM类加载系统详解:深入理解Java类的生命周期
java·开发语言·jvm
代码讲故事1 小时前
多种方法实现golang中实现对http的响应内容生成图片
开发语言·chrome·http·golang·图片·快照·截图
虾球xz2 小时前
CppCon 2018 学习:EFFECTIVE REPLACEMENT OF DYNAMIC POLYMORPHISM WITH std::variant
开发语言·c++·学习
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
Allen_LVyingbo2 小时前
Python常用医疗AI库以及案例解析(2025年版、上)
开发语言·人工智能·python·学习·健康医疗
小哈龙2 小时前
裸仓库 + Git Bash 搭建 本地 Git 服务端与客户端
开发语言·git·bash
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript