design.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <nc-component :data="data[index]" class="float-btn" data-disabled="1">
  2. <!-- 预览 -->
  3. <template slot="preview">
  4. <template v-if="nc.lazyLoad">
  5. <div class="float-btn-box border-color" data-disabled="1">
  6. <div v-for="(item,previewIndex) in nc.list" :key="previewIndex" :index="previewIndex" class="float-btn-item" data-disabled="1">
  7. <div class="img-box" data-disabled="1" v-if="!item.iconType || item.iconType == 'img'" :style="{ width : nc.imageSize + 'px',height : nc.imageSize + 'px' }">
  8. <img :src="changeImgUrl(item.imageUrl)" data-disabled="1">
  9. </div>
  10. <div class="icon-box" data-disabled="1" v-if="item.iconType && item.iconType == 'icon'" :style="{ width : nc.imageSize + 'px',height : nc.imageSize + 'px',fontSize : nc.imageSize + 'px' }">
  11. <iconfont :icon="item.icon" v-if="item.icon" :value="item.style ? item.style : ''"></iconfont>
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. </template>
  17. <!-- 内容编辑 -->
  18. <template slot="edit-content">
  19. <template v-if="nc.lazyLoad">
  20. <div class="template-edit-title">
  21. <h3>按钮位置</h3>
  22. <btn-position></btn-position>
  23. <slide :data="{ field : 'btnBottom', label : '上下偏移' }"></slide>
  24. </div>
  25. <div class="template-edit-title">
  26. <h3>图片设置</h3>
  27. <slide :data="{ field : 'imageSize', label : '图片大小', min: 40, max : 100 }"></slide>
  28. <float-btn-list></float-btn-list>
  29. </div>
  30. </template>
  31. </template>
  32. <!-- 样式编辑 -->
  33. <template slot="edit-style"></template>
  34. <!-- 资源 -->
  35. <template slot="resource">
  36. <js>
  37. var floatBtnResourcePath = "{$resource_path}"; // http路径
  38. var floatBtnRelativePath = "{$relative_path}"; // 相对路径
  39. </js>
  40. <css src="{$resource_path}/css/design.css"></css>
  41. <js src="{$resource_path}/js/design.js"></js>
  42. </template>
  43. </nc-component>