1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- <template>
- <div class="com-list" v-if="coms.length>0">
- <div class="com-list-title">模块管理</div>
- <div class="com-items">
- <draggable v-model="coms" @update="datadragEnd" :options="{animation:200}" style="width:100%;">
- <template v-for="(it,index) in coms">
- <div :key="index" class="com-item" draggable>
- <div class="icon"><svg-icon icon-class='dashBoard1' /></div>
- <div class="name" @click="onSetActive(index)">{{it.name}}</div>
- <div class="remove" v-if="type!=='document'" @click="onRemove(index)"><svg-icon style="cursor: pointer;" icon-class="delete" /></div>
- </div>
- </template>
- </draggable>
- </div>
- </div>
- </template>
- <script>
- import draggable from 'vuedraggable'
- export default {
- name: "comList",
- emits: ['onRemove','onRebuild','onSetActive'],
- components: {
- draggable
- },
- props: {
- coms: {
- type: Array,
- default: [],
- },
- },
- data() {
- return {
- type:''
- }
- },
- mounted(){
- this.type=this.$route.query.type
- },
- methods: {
- async datadragEnd(event) {
- event.preventDefault();
- let item=this.coms;
- this.$emit("onRebuild",item);
- },
- onSetActive(e){
- this.$emit("onSetActive",e);
- },
- onRemove(e) {
- this.$emit("onRemove", e);
- },
- }
- }
- </script>
- <style lang="scss">
- @import './index.scss';
- </style>
|