cloud-ui.vusion
Version:
Vusion Cloud UI
183 lines (182 loc) • 6.57 kB
YAML
- name: f-draggable
title: 拖拽
attrs:
- name: value
type: any
default: null
description: 需要传递的值
- name: transfer
type: string, Element
options:
- clone
- self
default: clone
description: 拖拽时的移动元素。可选值:`'clone'`表示拖拽时拖起自身的一个拷贝,`'self'`表示拖拽时拖起自身,也可以直接传入一个元素,或者用slot来设置。
- name: immediate
type: boolean
default: false
description: 是否在鼠标按下时立即拖拽。默认为`false`,是为了防止鼠标单击等事件频繁触发拖拽操作。
- name: disabled
type: boolean
default: false
description: 是否禁用
- name: constraint
type: function
default: ...
description: 拖拽时移动路径的约束函数。需要传入一个对象,至少要包含:`startLeft`、`startTop`、`dragX`、`dragY`几个字段
slots:
- concept: Slot
name: default
description: 插入需要拖拽的元素,仅一个。
- concept: Slot
name: transfer
description: 自定义的移动元素。
events:
- name: dragstart
description: 拖拽开始时触发
params:
- name: $event.originVM
type: VueComponent
description: 拖拽源,为当前的`<f-draggable>`
- name: $event.sourceEl
type: Element
description: 拖拽起始元素
- name: $event.transferEl
type: Element
description: 拖拽移动元素
- name: $event.value
type: any
description: 需要传递的值
- name: $event.screenX
type: number
description: 鼠标指针相对于屏幕的水平坐标
- name: $event.screenY
type: number
description: 鼠标指针相对于屏幕的垂直坐标
- name: $event.clientX
type: number
description: 鼠标指针相对于浏览器的水平坐标
- name: $event.clientY
type: number
description: 鼠标指针相对于浏览器的垂直坐标
- name: $event.pageX
type: number
description: 鼠标指针相对于页面的水平坐标
- name: $event.pageY
type: number
description: 鼠标指针相对于页面的垂直坐标
- name: $event.startX
type: number
description: 拖拽开始时鼠标指针的水平坐标
- name: $event.startY
type: number
description: 拖拽开始时鼠标指针的垂直坐标
- name: $event.dragX
type: number
description: 拖拽时鼠标指针相对于起始坐标的水平位移
- name: $event.dragY
type: number
description: 拖拽时鼠标指针相对于起始坐标的垂直位移
- name: $event.startLeft
type: number
description: 拖拽开始时代理元素的left值
- name: $event.startTop
type: number
description: 拖拽开始时代理元素的top值
- name: $event.left
type: number
description: 拖拽时代理元素的left值
- name: $event.top
type: number
description: 拖拽时代理元素的top值
- name: $event.preventDefault
type: Function
description: 阻止拖拽流程
- name: senderVM
type: FDraggable
description: 发送事件实例
- name: drag
description: 正在拖拽时触发
params:
- name: $event.originVM
type: VueComponent
description: 拖拽源,为当前的`<f-draggable>`
- name: $event.sourceEl
type: Element
description: 拖拽起始元素
- name: $event.transferEl
type: Element
description: 拖拽移动元素
- name: $event.value
type: any
description: 需要传递的值
- name: $event.screenX
type: number
description: 鼠标指针相对于屏幕的水平坐标
- name: $event.screenY
type: number
description: 鼠标指针相对于屏幕的垂直坐标
- name: $event.clientX
type: number
description: 鼠标指针相对于浏览器的水平坐标
- name: $event.clientY
type: number
description: 鼠标指针相对于浏览器的垂直坐标
- name: $event.pageX
type: number
description: 鼠标指针相对于页面的水平坐标
- name: $event.pageY
type: number
description: 鼠标指针相对于页面的垂直坐标
- name: $event.startX
type: number
description: 拖拽开始时鼠标指针的水平坐标
- name: $event.startY
type: number
description: 拖拽开始时鼠标指针的垂直坐标
- name: $event.dragX
type: number
description: 拖拽时鼠标指针相对于起始坐标的水平位移
- name: $event.dragY
type: number
description: 拖拽时鼠标指针相对于起始坐标的垂直位移
- name: $event.startLeft
type: number
description: 拖拽开始时代理元素的left值
- name: $event.startTop
type: number
description: 拖拽开始时代理元素的top值
- name: $event.left
type: number
description: 拖拽时代理元素的left值
- name: $event.top
type: number
description: 拖拽时代理元素的top值
- name: $event.preventDefault
type: Function
description: 阻止拖拽流程
- name: senderVM
type: FDraggable
description: 发送事件实例
- name: dragend
description: 拖拽结束时触发
params:
- name: $event.originVM
type: VueComponent
description: 拖拽源,为当前的`<f-draggable>`
- name: $event.sourceEl
type: Element
description: 拖拽起始元素
- name: $event.transferEl
type: Element
description: 拖拽移动元素
- name: $event.value
type: any
description: 需要传递的值
- name: senderVM
type: FDraggable
description: 发送事件实例
methods:
- name: cancel
description: 取消拖拽。
params: []