design.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <nc-component :data="data[index]" class="component-title-extend">
  2. <!-- 预览 -->
  3. <template slot="preview">
  4. <div class="preview-box" :style="{ backgroundColor: nc.componentBgColor,
  5. borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
  6. borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
  7. borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
  8. borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
  9. <h2>我是扩展标题组件</h2>
  10. </div>
  11. </template>
  12. <!-- 内容编辑 -->
  13. <template slot="edit-content">
  14. <template v-if="nc.lazyLoad">
  15. <div class="template-edit-title">
  16. <h3>风格设置</h3>
  17. <text-extend-style></text-extend-style>
  18. </div>
  19. </template>
  20. </template>
  21. <!-- 样式编辑 -->
  22. <template slot="edit-style">
  23. <template v-if="nc.lazyLoad">
  24. <div class="template-edit-title">
  25. <h3>标题样式</h3>
  26. </div>
  27. </template>
  28. </template>
  29. <!-- 资源 -->
  30. <template slot="resource">
  31. <js>
  32. </js>
  33. <css src="{$resource_path}/css/design.css"></css>
  34. <js src="{$resource_path}/js/design.js"></js>
  35. </template>
  36. </nc-component>