533 lines
16 KiB
Vue
533 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<view class="l-drag l-class" :style="[areaStyles]" ref="dragRef" @touchstart="setDisabled">
|
|||
|
|
<movable-area class="l-drag__inner" v-if="isReset" :style="[innerStyles]">
|
|||
|
|
<slot></slot>
|
|||
|
|
<movable-view class="l-drag__ghost" v-if="isDrag && props.ghost" :animation="true" :style="[viewStyles]" direction="all" :x="ghostEl.x" :y="ghostEl.y" key="l-drag-clone">
|
|||
|
|
<slot name="ghost"></slot>
|
|||
|
|
</movable-view>
|
|||
|
|
<movable-view v-if="props.before" class="l-drag__before" disabled :animation="false" :style="[viewStyles]" :x="beforeEl.x" :y="beforeEl.y">
|
|||
|
|
<slot name="before"></slot>
|
|||
|
|
</movable-view>
|
|||
|
|
<movable-view
|
|||
|
|
v-for="(item, oindex) in cloneList" :key="item.id"
|
|||
|
|
direction="all"
|
|||
|
|
:data-oindex="oindex"
|
|||
|
|
:style="[viewStyles]"
|
|||
|
|
class="l-drag__view"
|
|||
|
|
:class="[{'l-is-active': oindex == active, 'l-is-hidden': !item.show}, item.class]"
|
|||
|
|
:x="item.x"
|
|||
|
|
:y="item.y"
|
|||
|
|
:friction="friction"
|
|||
|
|
:damping="damping"
|
|||
|
|
:animation="animation"
|
|||
|
|
:disabled="isDisabled || props.disabled"
|
|||
|
|
@touchstart="touchStart"
|
|||
|
|
@change="touchMove"
|
|||
|
|
@touchend="touchEnd"
|
|||
|
|
@touchcancel="touchEnd"
|
|||
|
|
@longpress="setDisabled"
|
|||
|
|
>
|
|||
|
|
<!-- <view v-if="props.remove" class="l-drag__remove" :style="removeStyle" data-remove="true">
|
|||
|
|
<slot name="remove" :oindex="oindex" data-remove="true" />
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <view v-if="props.handle" class="l-drag__handle" :style="handleStyle" data-handle="true">
|
|||
|
|
<slot name="handle" :oindex="oindex" :active="!isDisabled && !isDisabled && oindex == active" />
|
|||
|
|
</view> -->
|
|||
|
|
<slot name="grid" :oindex="oindex" :index="item.index" :oldindex="item.oldindex" :content="item.content" :active="!isDisabled && !isDisabled && oindex == active" />
|
|||
|
|
<view class="mask" v-if="!(isDisabled || props.disabled) && props.longpress"></view>
|
|||
|
|
</movable-view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<movable-view v-if="props.after" class="l-drag__after" disabled :animation="true" direction="all" :style="[viewStyles]" :x="afterEl.x" :y="afterEl.y">
|
|||
|
|
<slot name="after"></slot>
|
|||
|
|
</movable-view>
|
|||
|
|
</movable-area>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts">
|
|||
|
|
// @ts-nocheck
|
|||
|
|
import { computed, onMounted, ref, getCurrentInstance, watch, nextTick, reactive , triggerRef, onUnmounted, defineComponent} from "./vue";
|
|||
|
|
import DragProps from './props';
|
|||
|
|
import type {GridRect, Grid, Position} from './type'
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
const dom = weex.requireModule('dom')
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: 'l-drag',
|
|||
|
|
externalClasses: ['l-class'],
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
virtualHost: true,
|
|||
|
|
},
|
|||
|
|
props: DragProps,
|
|||
|
|
emits: ['change'],
|
|||
|
|
setup(props, {emit, expose}) {
|
|||
|
|
const res = wx.getSystemInfoSync();
|
|||
|
|
const statusHeight = res.statusBarHeight; //状态栏高度
|
|||
|
|
const cusnavbarheight = (statusHeight + 44) + "px";
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
const dragRef = ref(null)
|
|||
|
|
// #endif
|
|||
|
|
const app = getCurrentInstance()
|
|||
|
|
const isDrag = ref(false)
|
|||
|
|
const isInit = ref(false)
|
|||
|
|
const isReset = ref(true)
|
|||
|
|
const colmunId = ref(-1)
|
|||
|
|
/** 选中项原始下标 */
|
|||
|
|
const active = ref(-1)
|
|||
|
|
const maxIndex = ref(-1)
|
|||
|
|
const animation = ref(true)
|
|||
|
|
const isDisabled = ref(props.handle || props.longpress ? true: false)
|
|||
|
|
|
|||
|
|
const dragEl = reactive({
|
|||
|
|
content: null,
|
|||
|
|
/** 当前视图下标*/
|
|||
|
|
index: 0,
|
|||
|
|
/** 旧视图下标 */
|
|||
|
|
oldindex: -1,
|
|||
|
|
/** 上次原始下标 */
|
|||
|
|
lastindex: -1
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const ghostEl = reactive({
|
|||
|
|
content: null,
|
|||
|
|
x: 0,
|
|||
|
|
y: 0
|
|||
|
|
})
|
|||
|
|
const beforeEl = reactive({
|
|||
|
|
x: 0,
|
|||
|
|
y: 0
|
|||
|
|
})
|
|||
|
|
const afterEl = reactive({
|
|||
|
|
x: 0,
|
|||
|
|
y: 0
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
let gridRects = [] //ref<GridRect[]>([])
|
|||
|
|
const areaWidth = ref(0)
|
|||
|
|
const cloneList = ref<Grid[]>([])
|
|||
|
|
// 删除项时可能会减少行数影响到删除过渡动画，故增加此值在删除时保持高度不变，等动画完成后再归零
|
|||
|
|
const leaveRow = ref(0)
|
|||
|
|
const extra = computed(() => (props.before ? 1 :0) + (props.after ? 1 : 0))
|
|||
|
|
const rows = computed(() => Math.ceil( ((isInit.value ? cloneList.value.length : props.list.length) + extra.value) / props.column ))
|
|||
|
|
const gridHeight = computed(() => props.aspectRatio ? girdWidth.value / props.aspectRatio : (/rpx$/.test(`${props.gridHeight}`) ? uni.upx2px(parseInt(`${props.gridHeight}`)) : parseInt(`${props.gridHeight}`)))
|
|||
|
|
const girdWidth = computed(() => areaWidth.value / props.column)
|
|||
|
|
const viewStyles = computed(() => ({width: girdWidth.value + 'px',height: gridHeight.value + 'px'}))
|
|||
|
|
const areaStyles = computed(() => ({height: (rows.value + leaveRow.value ) * gridHeight.value + 'px'}))
|
|||
|
|
const innerStyles = computed(() => ({
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
width: areaWidth.value + 'px',
|
|||
|
|
// #endif
|
|||
|
|
height: (rows.value + props.extraRow + leaveRow.value) * gridHeight.value + 'px'}))
|
|||
|
|
|
|||
|
|
const sleep = (cb: Function, time = 1000/60) => setTimeout(cb, time)
|
|||
|
|
const createGrid = (content: any, position?:Position|null): Grid => {
|
|||
|
|
colmunId.value++
|
|||
|
|
maxIndex.value++
|
|||
|
|
const index = maxIndex.value
|
|||
|
|
const colmun = gridRects[index]
|
|||
|
|
|
|||
|
|
let x = 0
|
|||
|
|
let y = 0
|
|||
|
|
if(colmun) {
|
|||
|
|
if(props.after) {
|
|||
|
|
let nxet = gridRects[index + 1]
|
|||
|
|
if(!nxet) {
|
|||
|
|
nxet = createGridRect(gridRects.length + (props.before ? 1 : 0))
|
|||
|
|
gridRects.push(nxet)
|
|||
|
|
}
|
|||
|
|
setReset(() => setAfter(nxet))
|
|||
|
|
} else {
|
|||
|
|
setReset()
|
|||
|
|
}
|
|||
|
|
x = colmun.x
|
|||
|
|
y = colmun.y
|
|||
|
|
} else {
|
|||
|
|
const nxet = createGridRect(gridRects.length + (props.before ? 1 : 0))
|
|||
|
|
gridRects.push(nxet)
|
|||
|
|
setReset()
|
|||
|
|
x = nxet.x
|
|||
|
|
y = nxet.y
|
|||
|
|
}
|
|||
|
|
if(position) {
|
|||
|
|
x = position.x
|
|||
|
|
y = position.y
|
|||
|
|
}
|
|||
|
|
return {id: `l-drag-item-${colmunId.value}`, index, oldindex: index, content, x, y, class: '', show: true}
|
|||
|
|
}
|
|||
|
|
const setReset = (cb?: any) => {
|
|||
|
|
// const newRow = (cloneList.value.length + extra.value) % (props.column)
|
|||
|
|
if(isInit.value) {
|
|||
|
|
cb&&sleep(cb)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const setAfter = ({x, y} = {x: 0, y: 0}) => {
|
|||
|
|
if(props.after) {
|
|||
|
|
afterEl.x = x
|
|||
|
|
afterEl.y = y
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const setDisabled = (e: any, flag?: boolean= false) => {
|
|||
|
|
// e?.preventDefault()
|
|||
|
|
const type = `${e.type}`.toLowerCase()
|
|||
|
|
const {handle = props.touchHandle} = e.target.dataset
|
|||
|
|
if(props.handle && !handle) {
|
|||
|
|
isDisabled.value = true
|
|||
|
|
} else if(props.handle && handle && !props.longpress) {
|
|||
|
|
isDisabled.value = flag
|
|||
|
|
} else if(props.handle && handle && props.longpress && type.includes('longpress')) {
|
|||
|
|
isDisabled.value = false
|
|||
|
|
} else if(props.longpress && type.includes('longpress') && !props.handle) {
|
|||
|
|
isDisabled.value = false
|
|||
|
|
}
|
|||
|
|
if(type.includes('touchend') && props.longpress) {
|
|||
|
|
isDisabled.value = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const createGridRect = (i: number, last?: GridRect): GridRect => {
|
|||
|
|
let { row } = last || gridRects[gridRects.length - 1] || { row: 0 }
|
|||
|
|
const col = i % (props.column)
|
|||
|
|
const grid = (row: number, x: number, y: number):GridRect => {
|
|||
|
|
return {row, x, y, x1: x + girdWidth.value, y1: y + gridHeight.value}
|
|||
|
|
}
|
|||
|
|
if(col == 0 && i != 0) {row++}
|
|||
|
|
return grid(row, col * girdWidth.value, row * gridHeight.value)
|
|||
|
|
}
|
|||
|
|
const createGridRects = () => {
|
|||
|
|
let rects: GridRect[] = []
|
|||
|
|
const length = rows.value * props.column + extra.value
|
|||
|
|
gridRects = []
|
|||
|
|
for (var i = 0; i < length; i++) {
|
|||
|
|
const item = createGridRect(i, rects[rects.length - 1])
|
|||
|
|
rects.push(item)
|
|||
|
|
}
|
|||
|
|
if(props.before) {
|
|||
|
|
const {x, y} = rects.shift()
|
|||
|
|
beforeEl.x = x
|
|||
|
|
beforeEl.y = y
|
|||
|
|
}
|
|||
|
|
setAfter(rects[props.list.length])
|
|||
|
|
gridRects = rects as GridRect[]
|
|||
|
|
}
|
|||
|
|
const updateList = (v: any[]) => {
|
|||
|
|
cloneList.value = v.map((content) => createGrid(content))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const touchStart = (e: any) => {
|
|||
|
|
if(e.target.dataset.remove) return
|
|||
|
|
// 选中项原始下标
|
|||
|
|
const {oindex} = e.currentTarget?.dataset || e.target?.dataset || {}
|
|||
|
|
if(typeof oindex !== 'number') return
|
|||
|
|
const target = cloneList.value[oindex]
|
|||
|
|
isDrag.value = true
|
|||
|
|
// 选中项原始下标
|
|||
|
|
active.value = oindex
|
|||
|
|
// 选中项的当前下标
|
|||
|
|
dragEl.index = dragEl.oldindex = target.index
|
|||
|
|
ghostEl.x = target.x||0
|
|||
|
|
ghostEl.y = target.y||0
|
|||
|
|
dragEl.content = ghostEl.content = target.content
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const touchEnd = (e: any) => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if(e.target.dataset.remove || active.value==-1) return
|
|||
|
|
setDisabled(e, true)
|
|||
|
|
isDrag.value = false
|
|||
|
|
const isEmit = dragEl.index !== dragEl.oldindex && dragEl.oldindex > -1 // active.value !== dragEl.index
|
|||
|
|
dragEl.lastindex = active.value
|
|||
|
|
dragEl.oldindex = active.value = -1
|
|||
|
|
const last = cloneList.value[dragEl.lastindex]
|
|||
|
|
const position = gridRects[dragEl.index]
|
|||
|
|
nextTick(() => {
|
|||
|
|
last.x = position.x + 0.001
|
|||
|
|
last.y = position.y + 0.001
|
|||
|
|
sleep(() => {
|
|||
|
|
last.x = position.x
|
|||
|
|
last.y = position.y
|
|||
|
|
isEmit && emitting()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},80)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const emitting = () => {
|
|||
|
|
const clone = [...cloneList.value].sort((a, b) => a.index - b.index)//.map(item => ref(item.content))
|
|||
|
|
emit('change', clone)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const touchMove = (e: any) => {
|
|||
|
|
if(!isDrag.value) return
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
let {oindex} = e.currentTarget.dataset
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
oindex = e.currentTarget.dataset['-oindex']
|
|||
|
|
// #endif
|
|||
|
|
if(oindex != active.value) return
|
|||
|
|
const {x, y} = e.detail
|
|||
|
|
const centerX = x + girdWidth.value / 2
|
|||
|
|
const centerY = y + gridHeight.value / 2
|
|||
|
|
for (let i = 0; i < cloneList.value.length; i++) {
|
|||
|
|
const item = gridRects[i]
|
|||
|
|
if(centerX > item.x && centerX < item.x1 && centerY > item.y && centerY < item.y1) {
|
|||
|
|
ghostEl.x = item.x
|
|||
|
|
ghostEl.y = item.y
|
|||
|
|
if(dragEl.index != i) {
|
|||
|
|
_move(active.value, i)
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const getDragEl = (oindex: number) => {
|
|||
|
|
if(isDrag.value) {return dragEl}
|
|||
|
|
return cloneList.value[oindex]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 把原始数据中排序为index的项 移动到 toIndex
|
|||
|
|
* @param oindex 原始数据的下标
|
|||
|
|
* @param toIndex 视图中的下标
|
|||
|
|
* @param position 指定坐标
|
|||
|
|
*/
|
|||
|
|
const _move = (oindex: number, toIndex: number, position?: Position|null, emit: boolean = true) => {
|
|||
|
|
const length = cloneList.value.length - 1
|
|||
|
|
if(toIndex > length || toIndex < 0) return
|
|||
|
|
// 获取oIdnex在视图中的项目
|
|||
|
|
const dragEl = getDragEl(oindex)
|
|||
|
|
let speed = 0
|
|||
|
|
let start = dragEl.index
|
|||
|
|
// 比较开始index和终点index，设置方向
|
|||
|
|
if(start < toIndex) {speed = 1}
|
|||
|
|
if(start > toIndex) {speed = -1}
|
|||
|
|
if(!speed) return
|
|||
|
|
// 距离
|
|||
|
|
let distance = start - toIndex
|
|||
|
|
// 找到区间所有的项
|
|||
|
|
while(distance) {
|
|||
|
|
distance += speed
|
|||
|
|
// 目标
|
|||
|
|
const target = isDrag.value ? (dragEl.index += speed) : (start += speed)
|
|||
|
|
let targetOindex = cloneList.value.findIndex(item => item.index == target && item.content != dragEl.content)
|
|||
|
|
if (targetOindex == oindex) return
|
|||
|
|
if (targetOindex < 0) {targetOindex = cloneList.value.length - 1}
|
|||
|
|
let targetEl = cloneList.value[targetOindex]
|
|||
|
|
if(!targetEl) return;
|
|||
|
|
// 上一个index
|
|||
|
|
const lastIndex = target - speed
|
|||
|
|
const activeEl = cloneList.value[oindex]
|
|||
|
|
const rect = gridRects[lastIndex]
|
|||
|
|
targetEl.x = rect.x
|
|||
|
|
targetEl.y = rect.y
|
|||
|
|
targetEl.oldindex = targetEl.index
|
|||
|
|
targetEl.index = lastIndex
|
|||
|
|
activeEl.oldindex = activeEl.index //oIndex
|
|||
|
|
activeEl.index = toIndex
|
|||
|
|
// 到达终点，如果是拖拽则不处理
|
|||
|
|
if(!distance && !isDrag.value) {
|
|||
|
|
const rect = gridRects[toIndex]
|
|||
|
|
const {x, y} = position||rect
|
|||
|
|
activeEl.x = dragEl.x = x
|
|||
|
|
activeEl.y = dragEl.y = y
|
|||
|
|
// triggerRef(cloneList)
|
|||
|
|
if(emit) {
|
|||
|
|
emitting()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 为区分是主动调用还是内部方法
|
|||
|
|
*/
|
|||
|
|
const move = (oindex: number, toIndex: number) => {
|
|||
|
|
active.value = -1
|
|||
|
|
isDrag.value = false
|
|||
|
|
_move(oindex, toIndex)
|
|||
|
|
}
|
|||
|
|
// 临时处理 待有空再完善
|
|||
|
|
const REMOVE_TIME = 400
|
|||
|
|
let removeTimer = null
|
|||
|
|
const remove = (oindex: number) => {
|
|||
|
|
active.value = -1
|
|||
|
|
isDrag.value = false
|
|||
|
|
|
|||
|
|
clearTimeout(removeTimer)
|
|||
|
|
const item = cloneList.value[oindex]
|
|||
|
|
if(props.disabled || !item) return
|
|||
|
|
item.show = false
|
|||
|
|
const after = cloneList.value.length - 1
|
|||
|
|
_move(oindex, after, item, false)
|
|||
|
|
setAfter(gridRects[after])
|
|||
|
|
maxIndex.value--
|
|||
|
|
const _remove = (_index = oindex) => {
|
|||
|
|
// 小程序 删除会闪一下 所以先关闭动画再开启
|
|||
|
|
// animation.value = false
|
|||
|
|
const row = Math.ceil((cloneList.value.length - 1 + extra.value) / props.column)
|
|||
|
|
if( row < rows.value) {
|
|||
|
|
leaveRow.value = (rows.value - row)
|
|||
|
|
}
|
|||
|
|
cloneList.value.splice(_index, 1)[0]
|
|||
|
|
emitting()
|
|||
|
|
removeTimer = setTimeout(() => {
|
|||
|
|
leaveRow.value = 0
|
|||
|
|
}, REMOVE_TIME)
|
|||
|
|
}
|
|||
|
|
_remove()
|
|||
|
|
}
|
|||
|
|
const push = (...args: any) => {
|
|||
|
|
if(props.disabled) return
|
|||
|
|
if(Array.isArray(args)) {
|
|||
|
|
Promise.all(args.map(async item => await add(item, true))).then(emitting)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const add = (content: any, after: boolean) => {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const item = createGrid(content, after ? null : {x: -100, y:0})
|
|||
|
|
item.class = 'l-drag-enter'
|
|||
|
|
cloneList.value.push(item)
|
|||
|
|
const length = cloneList.value.length - 1
|
|||
|
|
nextTick(() => {
|
|||
|
|
sleep(() => {
|
|||
|
|
item.class = 'l-drag-leave'
|
|||
|
|
_move(length, (after ? length : 0), null, false)
|
|||
|
|
triggerRef(cloneList)
|
|||
|
|
resolve(true)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const unshift = (...args: any) => {
|
|||
|
|
if(props.disabled) return
|
|||
|
|
if(Array.isArray(args)) {
|
|||
|
|
Promise.all(args.map(async (item) => await add(item))).then(emitting)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 暂时先简单处理，待有空再完善
|
|||
|
|
const shift = () => {
|
|||
|
|
if(!cloneList.value.length) return
|
|||
|
|
remove(cloneList.value.findIndex(item => item.index == 0) || 0)
|
|||
|
|
}
|
|||
|
|
const pop = () => {
|
|||
|
|
const length = cloneList.value.length-1
|
|||
|
|
if(length < 0 ) return
|
|||
|
|
remove(cloneList.value.findIndex(item => item.index == length) || length)
|
|||
|
|
}
|
|||
|
|
// const splice = (start, count, ...context) => {
|
|||
|
|
// // 暂未实现
|
|||
|
|
// }
|
|||
|
|
const clear = () => {
|
|||
|
|
isInit.value = isDrag.value = false
|
|||
|
|
maxIndex.value = colmunId.value = active.value = -1
|
|||
|
|
cloneList.value = []
|
|||
|
|
gridRects = []
|
|||
|
|
}
|
|||
|
|
const init = () => {
|
|||
|
|
clear()
|
|||
|
|
createGridRects()
|
|||
|
|
nextTick(() => {
|
|||
|
|
updateList(props.list)
|
|||
|
|
isInit.value = true
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
let count = 0
|
|||
|
|
const getRect = () => {
|
|||
|
|
count++
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
uni.createSelectorQuery().in(app.proxy).select('.l-drag').boundingClientRect((res: UniNamespace.NodeInfo) => {
|
|||
|
|
if(res) {
|
|||
|
|
areaWidth.value = res.width || 0
|
|||
|
|
// 小程序居然无法响应式？
|
|||
|
|
init()
|
|||
|
|
}
|
|||
|
|
}).exec()
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
sleep(() => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
dom.getComponentRect(dragRef.value, (res) => {
|
|||
|
|
if(!res.size.width && count < 5) {
|
|||
|
|
getRect()
|
|||
|
|
} else {
|
|||
|
|
areaWidth.value = res.size.width || 0
|
|||
|
|
init()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
onMounted(getRect)
|
|||
|
|
onUnmounted(clear)
|
|||
|
|
watch(() => props.list, init)
|
|||
|
|
|
|||
|
|
// #ifdef VUE3
|
|||
|
|
expose({
|
|||
|
|
remove,
|
|||
|
|
// add,
|
|||
|
|
move,
|
|||
|
|
push,
|
|||
|
|
unshift,
|
|||
|
|
shift,
|
|||
|
|
pop
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
return {
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
dragRef,
|
|||
|
|
// #endif
|
|||
|
|
cloneList,
|
|||
|
|
|
|||
|
|
areaStyles,
|
|||
|
|
innerStyles,
|
|||
|
|
viewStyles,
|
|||
|
|
|
|||
|
|
setDisabled,
|
|||
|
|
isDisabled,
|
|||
|
|
isReset,
|
|||
|
|
isDrag,
|
|||
|
|
|
|||
|
|
active,
|
|||
|
|
animation,
|
|||
|
|
|
|||
|
|
afterEl,
|
|||
|
|
ghostEl,
|
|||
|
|
beforeEl,
|
|||
|
|
|
|||
|
|
touchStart,
|
|||
|
|
touchMove,
|
|||
|
|
touchEnd,
|
|||
|
|
|
|||
|
|
remove,
|
|||
|
|
// add,
|
|||
|
|
move,
|
|||
|
|
push,
|
|||
|
|
unshift,
|
|||
|
|
// shift,
|
|||
|
|
// pop,
|
|||
|
|
props
|
|||
|
|
// isDelete: props.delete,
|
|||
|
|
// ...toRefs(props)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.l-drag{
|
|||
|
|
margin-top: v-bind(cusnavbarheight);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
@import './index';
|
|||
|
|
|
|||
|
|
</style>
|