vue3 拖拽插件 vue.draggable.next

hykeda3年前Vue2925

官网地址:https://github.com/SortableJS/vue.draggable.next

安装:

npm i -S vuedraggable@next

引入插件:

import draggable from 'vuedraggable'

基础使用:

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
      <div> {{element.name}} </div>
  </template>
</draggable>

const myArray = [
    {name:'123',id:1},
    {name:'456',id:2} 
]

配置信息请看官网说明

相关文章

Vue3 Pinia持久化存储

一、Pinia持久化存储二、使用步骤1.安装插件代码如下(示例):npm i pinia-plugin-persist --save2.store/index.js代码如...

使用vite打包vue项目生成dist文件夹,部署至nginx除了index.html,其他路径都提示404错误的解决

使用vite打包vue项目生成dist文件夹,部署至nginx除了index.html,其他路径都提示404错误的解决

用vue打包生成dist文件夹,然后在本地nginx部署vue项目时只能访问默认页面,刷新和跳转页面都会出问题。原因:只访问了dist文件下的 index.html、index.htm页面,...

vite配置代理proxy实现跨域问题

最近在开发vite+vue项目时,调用接口获取服务器数据时提示接口有跨域问题,解决办法是配置代理:export default defineConfig({  //配置代理  se...

vue3中defineProps传值使用ref响应式失效详解

子组件接收父组件的传参。父组件:<template> <Son :data="data"/> </template> <s...

pinia中数据解构

在vuex中获取state中的数据可以解构的方式如下:import { mapState,mapMutations } from "vuex...

vue3中给响应式数据赋值操作,以及toRef 和 toRefs区别

最近在开发vue3时,定义了一个变量:let form = reactive({});form = res.items;这里我将接口获取到的数据直接赋给了form,这样我在表单中:<el-for...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。