对于上面那种情况,如果要转成vuedraggable的话,首先要设置他跟,但是el-sollapse上的数据怎么办呢?就要通过component-data配置了: <draggabletag="el-collapse":list="list":component-data="collapseComponentData"><el-collapse-itemv-for="item in list":key="item.id":title="item.title":name="item.id">...
import draggablefrom"vuedraggable";constmessage =["vue.draggable","draggable","component","for","vue.js 2.0","based","on","Sortablejs"]; exportdefault{ name:"hello", components: { draggable }, data() {return{ list: message.map((name, index)=>{return{ name, order: index +1,fixed:...
复制 <draggable element="el-collapse":list="list":component-data="getComponentData()"><el-collapse-item v-for="e in list":title="e.title":name="e.name":key="e.name">{{e.description}}</el-collapse-item></draggable> 代码语言:javascript 复制 methods:{handleChange(){console.log('chang...
1 . 下载 文档传送门 npm i vuedraggable 2 . 在需要的页面引入(也可全局引入看自己需求) 按需引入 importVuedraggablefrom'vuedraggable'exportdefault{components:{Vuedraggable}} 全局引入 // main.jsimportdraggablefrom'vuedraggable'Vue.component('draggable',draggable) ...
componentData Type:Object Required:false Default:null This props is used to pass additional information to child component declared bytag props. Value: props: props to be passed to the child component attrs: attrs to be passed to the child component ...
It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component. See alsocomponentDataif you need to set props or event to the created component. clone Type:Function ...
See also componentData if you need to set props or event to the created component. clone Type: Function Required: false Default: (original) => { return original;} Function called on the source component to clone element when clone option is true. The unique argument is the viewModel element...
import Draggable, {DraggableCore} from 'react-draggable'; import React from 'react-dom' function MyDraggableComponent() { const eventHandler = (e, data) => { console.log('Event Type', e.type); console.log({e, data}); } return ( <Draggable defaultPosition={{x: 0, y: 0}} on...
Component { eventLogger = (e: MouseEvent, data: Object) => { console.log('Event: ', e); console.log('Data: ', data); }; render() { return ( <Draggable axis="x" handle=".handle" defaultPosition={{x: 0, y: 0}} position={null} grid={[25, 25]} scale={1} onStart={...
componentData# Object,默认值:null# 用来结合UI组件的,可以理解为代理了UI组件的定制信息 包含两项:props和on props用来代理UI组件需要绑定的属性(:) on用来代理UI组件需要绑定的事件(@) <draggable element="el-collapse" :list="list" :component-data="getComponentData()"> <el-collapse-item v-for...