问题：设置组件的空状态
问题
你好@artf，
你建议如何给组件一个空状态？
举个例子，我有一个布局组件（比如列），应该包含子元素（比如文本组件或图片）。当该布局组件是空的时，我想在里面显示一些帮助文本，比如“在这里添加元素”，而当它有子元素时，就不应该显示。
当然，这应该只存在于视图中，而不是在输出HTML中渲染。
这是我想要创造的示例： ![图片]（https://user-images.githubusercontent.com/5224187/96303828-129c2c00-0fc9-11eb-9654-f8965f1402ef.png）
如果有其他问题解释了怎么做，抱歉，我查过没找到相关信息。
提前感谢大家！ 乔什
回答（3）
@artf 你就是那个男人！我甚至不知道有“：empty”这个选择器。如此简单，如此棒！真是令人震惊。谢谢！
我也用过类似的方法，只用 CSS 做过类似的事情 “''js const doc = 编辑。Canvas.getDocument（）; ...addType（'cc'， { 模型：{...}， 浏览量：{ init（） { ... const stl = doc.querySelector（'style#cc-id'）; 如果 （！stl） { doc.body.insertAdjacentHTML（'beforeend'， ' <style id=“cc-id”> .cc-class：empty：after { 内容：“空块”; 文本对齐：居中; 显示：方块; } </style> );...
嗨，Josh，我喜欢你的想法。
我不是专家，但这里有几点想法：
基本上我会给组件本身添加某种标志。
想法1）如果组件是某种容器（比如div），可以添加一个“<p class=”empty-message“>Drag a element here</p>”，然后当添加新组件时，可以使用编辑器事件“component：add”，检查是否有带有“empty-message”类的兄弟事件并删除它。
想法2）在组件本身添加一个“空消息”类，然后用CSS ：before/：after添加内容。然后用 JS 移除组件的父空消息类，类似于想法 1。
希望对你有帮助。
相关问答
通过相似的问题讨论继续研究。
问题 #3130
标准方法：对HTML工具栏和徽章进行轻微重构
版本： '0.15.10' 这个问题旨在验证是否有合适的方法通过自定义插件扩展当前 https://github.com/artf/grapesjs/blob/master/src/canvas/view/CanvasView.js。我们特别回顾了该文件中的“render（）”...
问题 #3083
：高亮投放区
你好@artf， 你建议如何根据可拖拽和可丢弃规则，高亮画布上选中的方块可以丢入的组件？换句话说，当用户开始从块管理器拖拽方块时，我想高亮（添加边框或内嵌框阴影）画布上可以放置的组件。这并不是为了替代掉落指示器（不确定你叫什么名字），它在拖曳时显示方块的位置，而是用来补充它。...
问题 #1513
在媒体查询下编写的重复CSS
嘿@artf项目做得很棒！ 我注意到了一些东西，并且能在本地机器上复现。任何在“媒体查询”下写的“CSS”都会被重复/应用两次。 Grapesjs 版本 - '0.14.33' 浏览器 - “版本 69.0.3497.100（官方构建）（64位）” 操作系统 - “Window...
问题 #1012
在编辑器里可以导出带有数据属性的HTML内容吗？
@artf 能否将带有“数据属性”的HTML内容导出为次序重用？ 我们在之前讨论过如何传递模型中的“数据属性” <img width=“914” alt=“截图 2018-04-06 4点07点48分” src=“https://user-images.githubuserco...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
浏览插件分类
直接跳转到市场上的插件分类页面。