在线打印
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 

59 строки
1.3 KiB

  1. <template>
  2. <div class="tag-box">
  3. <el-tag
  4. v-for="(layer,index) in layers"
  5. :key="index"
  6. :closable="layer === activeElement?true:false"
  7. size="small"
  8. :type="layer === activeElement?'':'info'"
  9. @click="(e) => {activeLayer(e, layer)}"
  10. @close="(e) => {dele(e, layer)}"
  11. >{{ layer.title }}</el-tag>
  12. </div>
  13. </template>
  14. <script>
  15. import { cumulativeOffset, checkInView } from '../../utils/offset'
  16. export default {
  17. computed: {
  18. // 已添加的组件
  19. layers() {
  20. return this.$vptd.state.page.tempItems
  21. },
  22. activeElement() {
  23. return this.$vptd.state.activeElement
  24. },
  25. },
  26. methods: {
  27. activeLayer(e, item) {
  28. this.$vptd.commit('select', {
  29. uuid: item.uuid,
  30. })
  31. let viewport = document.querySelector('#viewport')
  32. if (viewport) {
  33. let target = viewport.querySelector(`[data-uuid='${item.uuid}']`)
  34. if (target && !checkInView(target)) {
  35. viewport.scrollTop = cumulativeOffset(target).top - 50
  36. }
  37. } else {
  38. console.error('未找到 "#viewport" 的节点')
  39. }
  40. },
  41. // 删除元件
  42. dele(e, item) {
  43. this.$vptd.commit('delete', item.uuid)
  44. },
  45. },
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. .tag-box {
  50. .el-tag {
  51. margin-bottom: 10px;
  52. margin-right: 10px;
  53. }
  54. }
  55. </style>