SignalList.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <draggable
  3. :style="{
  4. left:signalListJson[0].Left+'px',
  5. top:signalListJson[0].Top+'px',
  6. width:signalListJson[0].Width + 'px',
  7. height:signalListJson[0].Height + 'px',
  8. zIndex:signalListJson[0].ZIndex,
  9. display:signalListJson[0].IsVisibility ? 'block' : 'none',
  10. fontSize:signalListJson[0].FontSize + 'px',
  11. color:`#${signalListJson[0].ForegroundStr.slice(3)}`,
  12. position:'absolute',
  13. overflow:'auto',
  14. }"
  15. class="signal_body"
  16. element="div"
  17. v-model="signalListJson[0].PreviewList"
  18. :options="dragOptions1"
  19. :move="onMove"
  20. @start="isDragging=true"
  21. @end="isDragging=false"
  22. >
  23. <!--列表项-->
  24. <div class="signal_item" v-for="item in signalListJson[0].PreviewList" :key="item.ID">
  25. <div class="signal_item_bg">
  26. <div class="signal_item_bg_body">
  27. <div class="signal_item_bg_body_space"></div>
  28. <div class="signal_item_bg_body_font">{{item.ShowName}}</div>
  29. </div>
  30. </div>
  31. </div>
  32. </draggable>
  33. </template>
  34. <script>
  35. import {mapState} from 'vuex'
  36. import draggable from 'vuedraggable'
  37. export default {
  38. components: {
  39. draggable
  40. },
  41. methods: {
  42. // 移动信号源
  43. onMove({relatedContext, draggedContext}) {
  44. const relatedElement = relatedContext.element
  45. const draggedElement = draggedContext.element
  46. return (
  47. (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
  48. )
  49. },
  50. },
  51. computed: {
  52. ...mapState(['signalListJson']),
  53. dragOptions1() {
  54. return {
  55. animation: 0,
  56. group: {
  57. name: "description",
  58. pull: 'clone',
  59. put: false
  60. },
  61. ghostClass: "ghost",
  62. }
  63. },
  64. dragOptions2() {
  65. return {
  66. animation: 0,
  67. group: "description",
  68. }
  69. },
  70. }
  71. }
  72. </script>
  73. <style scoped>
  74. </style>