自学内容网 自学内容网

vue中使用ts

在这里插入图片描述

ts文件

export function dadess(){
console.log("dade6666")
}

export function dade369(){
console.log(66666)
}

使用

<template>
  <div style="display: flex;">
    <div style="width: 20%; border: 1px solid #000;">
      <draggable group="people" v-model="list1" :clone="cloneFromList1" style="height: 100vh;">
        <div v-for="item in list1" :key="item.id">{{item.name}}</div>
      </draggable>
    </div>
    <div style="width: 60%;">
      <draggable group="people" v-model="list2" style="height: 100vh;">
        <div v-for="item in list2" :key="item.id">{{item.name}}</div>
      </draggable>
    </div>
    <div style="width: 20%; border: 1px solid #000;height: 100vh;">
      8888
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import { dadess,dade369 } from'./index.ts';
export default {
  components: { draggable },
  data() {
    return {
      list1: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Alice' }
      ],
      list2: [
        { id: 3, name: 'Bob' },
        { id: 4, name: 'Eve' }
      ]
    };
  },
  mounted(){
  dadess()
  },
  methods: {
    cloneFromList1(item) {
      // 克隆并返回一个新的对象
      return {...item };
    }
  }
};
</script>

原文地址:https://blog.csdn.net/qq_34631220/article/details/142899302

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!