index.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <div class="com-list" v-if="coms.length>0">
  3. <div class="com-list-title">模块管理</div>
  4. <div class="com-items">
  5. <draggable v-model="coms" @update="datadragEnd" :options="{animation:200}" style="width:100%;">
  6. <template v-for="(it,index) in coms">
  7. <div :key="index" class="com-item" draggable>
  8. <div class="icon"><svg-icon icon-class='dashBoard1' /></div>
  9. <div class="name" @click="onSetActive(index)">{{it.name}}</div>
  10. <div class="remove" v-if="type!=='document'" @click="onRemove(index)"><svg-icon style="cursor: pointer;" icon-class="delete" /></div>
  11. </div>
  12. </template>
  13. </draggable>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. import draggable from 'vuedraggable'
  19. export default {
  20. name: "comList",
  21. emits: ['onRemove','onRebuild','onSetActive'],
  22. components: {
  23. draggable
  24. },
  25. props: {
  26. coms: {
  27. type: Array,
  28. default: [],
  29. },
  30. },
  31. data() {
  32. return {
  33. type:''
  34. }
  35. },
  36. mounted(){
  37. this.type=this.$route.query.type
  38. },
  39. methods: {
  40. async datadragEnd(event) {
  41. event.preventDefault();
  42. let item=this.coms;
  43. this.$emit("onRebuild",item);
  44. },
  45. onSetActive(e){
  46. this.$emit("onSetActive",e);
  47. },
  48. onRemove(e) {
  49. this.$emit("onRemove", e);
  50. },
  51. }
  52. }
  53. </script>
  54. <style lang="scss">
  55. @import './index.scss';
  56. </style>