vue-grid-layout添加占位符辅助线样式

示例

CSS样式代码

 .vue-grid-item.vue-grid-placeholder {
		background: var(--theme-mono-a500);
		border-radius: 8px;
		position: relative;
 
		&::before {
			content: '';
			width: calc(100% + 160px);
			height: 100%;
			position: absolute;
			top: 0;
			left: -81px;
			border-top: 2px solid var(--theme-mono-a500);
			border-bottom: 2px solid var(--theme-mono-a500);
		}
 
		&::after {
			content: '';
			width: 100%;
			height: calc(100% + 160px);
			position: absolute;
			top: -81px;
			left: 0;
			border-left: 2px solid var(--theme-mono-a500);
			border-right: 2px solid var(--theme-mono-a500);
		}
	}

posted @ 2024-05-15 16:09 Felix_Openmind 阅读(100) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3 vue-grid-layout布局添加右键事件

· 如何一次将样式应用于多个类？

· grid 布局 css

· CSS Grid布局

· Vue Grid Layout -️ 适用Vue.js的栅格布局系统（自定义页面）

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

vue-grid-layout添加占位符辅助线样式

示例

CSS样式代码

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	.vue-grid-item.vue-grid-placeholder {
	background: var(--theme-mono-a500);
	border-radius: 8px;
	position: relative;

	&::before {
	content: '';
	width: calc(100% + 160px);
	height: 100%;
	position: absolute;
	top: 0;
	left: -81px;
	border-top: 2px solid var(--theme-mono-a500);
	border-bottom: 2px solid var(--theme-mono-a500);
	}

	&::after {
	content: '';
	width: 100%;
	height: calc(100% + 160px);
	position: absolute;
	top: -81px;
	left: 0;
	border-left: 2px solid var(--theme-mono-a500);
	border-right: 2px solid var(--theme-mono-a500);
	}
	}