docs: add docs for v-drag.sort
Change-Id: I9a3e7cf017a9b8bb07aca8dbec324b1d85869000
This commit is contained in:
xiaodemen
GU Yiling
parent
c738f7e8ca
commit
50e1124467
126
one/docs/demo/directives/drag/sort-x.vue
Normal file
126
one/docs/demo/directives/drag/sort-x.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<article>
|
||||||
|
<section ref="itemGroup">
|
||||||
|
<h2>Axis: X（v-drag.sort.x）</h2>
|
||||||
|
<transition-group
|
||||||
|
ref="transitionGroup"
|
||||||
|
name="list"
|
||||||
|
tag="div"
|
||||||
|
class="items"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item"
|
||||||
|
v-drag.sort.x="{
|
||||||
|
name: 'mySortableButton',
|
||||||
|
containment: 'itemGroup',
|
||||||
|
callback: handleAxisXSortCallback,
|
||||||
|
debug,
|
||||||
|
align
|
||||||
|
}"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import drag from 'veui/directives/drag'
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
'须菩提',
|
||||||
|
'菩萨亦如是',
|
||||||
|
'若作是言',
|
||||||
|
'我当灭度无量众生',
|
||||||
|
'即不名菩萨',
|
||||||
|
'🍎🍎',
|
||||||
|
'🍋',
|
||||||
|
'🍉🍉🍉',
|
||||||
|
'🍓🍓',
|
||||||
|
'何以故',
|
||||||
|
'须菩提',
|
||||||
|
'无有法名为菩萨',
|
||||||
|
'是故佛说',
|
||||||
|
'一切法无我',
|
||||||
|
'无人',
|
||||||
|
'无众生',
|
||||||
|
'无寿者'
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
directives: {
|
||||||
|
drag
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
debug: false,
|
||||||
|
align: undefined,
|
||||||
|
items: items.map((item, i) => `${i}. ${item}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
handleAxisXSortCallback () {
|
||||||
|
return this.getTransitionSortCallback('items', 'transitionGroup')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTransitionSortCallback (itemsKey, transitionGroupRefKey) {
|
||||||
|
return (toIndex, fromIndex) => {
|
||||||
|
if (toIndex === fromIndex) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let promise
|
||||||
|
if (transitionGroupRefKey) {
|
||||||
|
promise = new Promise((resolve, reject) => {
|
||||||
|
let el = this.$refs[transitionGroupRefKey].$el
|
||||||
|
let handleTransitionEnd = () => {
|
||||||
|
el.removeEventListener('transitionend', handleTransitionEnd)
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
el.addEventListener('transitionend', handleTransitionEnd)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.moveItem(this[itemsKey], fromIndex, toIndex)
|
||||||
|
// 动画完了再回调成功
|
||||||
|
return promise
|
||||||
|
}
|
||||||
|
},
|
||||||
|
moveItem (items, fromIndex, toIndex) {
|
||||||
|
let item = items[fromIndex]
|
||||||
|
items.splice(fromIndex, 1)
|
||||||
|
if (toIndex > fromIndex) {
|
||||||
|
toIndex--
|
||||||
|
}
|
||||||
|
items.splice(toIndex, 0, item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped docs>
|
||||||
|
.items {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid pink;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 0 10px 8px 0;
|
||||||
|
padding: 1px 2px;
|
||||||
|
|
||||||
|
&:nth-child(3n) {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-move {
|
||||||
|
// UE 给出的动画曲线是 0.25, 0.1, 0.25, 1，就是 ease
|
||||||
|
transition: transform 200ms ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
132
one/docs/demo/directives/drag/sort-y.vue
Normal file
132
one/docs/demo/directives/drag/sort-y.vue
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<article>
|
||||||
|
<section>
|
||||||
|
<h2>Axis: Y（v-drag.sort.y）</h2>
|
||||||
|
<transition-group
|
||||||
|
ref="transitionGroup2"
|
||||||
|
name="list"
|
||||||
|
tag="ol"
|
||||||
|
class="list"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
v-for="item in items2"
|
||||||
|
:key="item"
|
||||||
|
v-drag.sort.y="{
|
||||||
|
name: 'otherSortableButton',
|
||||||
|
callback: handleAxisYSortCallback,
|
||||||
|
debug,
|
||||||
|
align
|
||||||
|
}"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</li>
|
||||||
|
</transition-group>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import drag from 'veui/directives/drag'
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
'须菩提',
|
||||||
|
'若菩萨作是言',
|
||||||
|
'我当庄严佛土',
|
||||||
|
'是不名菩萨',
|
||||||
|
'何以故',
|
||||||
|
'🦁',
|
||||||
|
'🙈🙉🙊',
|
||||||
|
'🐷🐶',
|
||||||
|
'如来说',
|
||||||
|
'庄严佛土者',
|
||||||
|
'即非庄严',
|
||||||
|
'是名庄严',
|
||||||
|
'须菩提',
|
||||||
|
'若菩萨通达无我法者'
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
directives: {
|
||||||
|
drag
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
debug: false,
|
||||||
|
align: undefined,
|
||||||
|
items2: items.map((item, i) => `${i}${item}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
handleAxisYSortCallback () {
|
||||||
|
return this.getTransitionSortCallback('items2', 'transitionGroup2')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTransitionSortCallback (itemsKey, transitionGroupRefKey) {
|
||||||
|
return (toIndex, fromIndex) => {
|
||||||
|
if (toIndex === fromIndex) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let promise
|
||||||
|
if (transitionGroupRefKey) {
|
||||||
|
promise = new Promise((resolve, reject) => {
|
||||||
|
let el = this.$refs[transitionGroupRefKey].$el
|
||||||
|
let handleTransitionEnd = () => {
|
||||||
|
el.removeEventListener('transitionend', handleTransitionEnd)
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
el.addEventListener('transitionend', handleTransitionEnd)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.moveItem(this[itemsKey], fromIndex, toIndex)
|
||||||
|
// 动画完了再回调成功
|
||||||
|
return promise
|
||||||
|
}
|
||||||
|
},
|
||||||
|
moveItem (items, fromIndex, toIndex) {
|
||||||
|
let item = items[fromIndex]
|
||||||
|
items.splice(fromIndex, 1)
|
||||||
|
if (toIndex > fromIndex) {
|
||||||
|
toIndex--
|
||||||
|
}
|
||||||
|
items.splice(toIndex, 0, item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped docs>
|
||||||
|
.item {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid pink;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 0 10px 8px 0;
|
||||||
|
padding: 1px 2px;
|
||||||
|
|
||||||
|
&:nth-child(3n) {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 0;
|
||||||
|
list-style-position: inside;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: 300px;
|
||||||
|
resize: both;
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 40%;
|
||||||
|
border-color: peachpuff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-move {
|
||||||
|
// UE 给出的动画曲线是 0.25, 0.1, 0.25, 1，就是 ease
|
||||||
|
transition: transform 200ms ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -22,6 +22,14 @@
|
|||||||
|
|
||||||
[[ demo src="/demo/directives/drag/axis.vue" ]]
|
[[ demo src="/demo/directives/drag/axis.vue" ]]
|
||||||
|
|
||||||
|
水平排序。
|
||||||
|
|
||||||
|
[[ demo src="/demo/directives/drag/sort-x.vue" ]]
|
||||||
|
|
||||||
|
垂直排序。
|
||||||
|
|
||||||
|
[[ demo src="/demo/directives/drag/sort-y.vue" ]]
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
@ -41,6 +49,7 @@
|
|||||||
| `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做变换。取值为：`x`、`y`。 |
|
| `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做变换。取值为：`x`、`y`。 |
|
||||||
| `dragstart` | `function(): Object` | `function() {}` | [^dragstart] |
|
| `dragstart` | `function(): Object` | `function() {}` | [^dragstart] |
|
||||||
| `drag` | `function(): Object` | `function() {}` | [^drag] |
|
| `drag` | `function(): Object` | `function() {}` | [^drag] |
|
||||||
|
| `disabled` | `boolean` | `false` | 动态开关该指令 |
|
||||||
| `dragend` | `function(): Object` | `function() {}` | 鼠标拖拽结束事件的回调函数。回调参数同 `drag`。 |
|
| `dragend` | `function(): Object` | `function() {}` | 鼠标拖拽结束事件的回调函数。回调参数同 `drag`。 |
|
||||||
| `ready` | `function` | `function() {}` | 指令初始化完成的回调函数，会传出一个句柄对象参数，该对象上有一个 `reset()` 方法，用于将所有目标元素重置为变换之前的样子。 |
|
| `ready` | `function` | `function() {}` | 指令初始化完成的回调函数，会传出一个句柄对象参数，该对象上有一个 `reset()` 方法，用于将所有目标元素重置为变换之前的样子。 |
|
||||||
|
|
||||||
@ -108,6 +117,31 @@
|
|||||||
<div v-drag:box1,box2></div>
|
<div v-drag:box1,box2></div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 拖拽排序（v-drag.sort）
|
||||||
|
|
||||||
|
可以通过 `v-drag.sort` 或 `v-drag="{type: 'sort', ...}"` 来实现拖拽排序
|
||||||
|
|
||||||
|
### 绑定值
|
||||||
|
|
||||||
|
类型：`Object`。
|
||||||
|
|
||||||
|
| 参数 | 类型 | 默认值 | 描述 |
|
||||||
|
| -- | -- | -- | -- |
|
||||||
|
| `name` | `string` | - | 用来标记一组项目，在这组项目中进行排序。 |
|
||||||
|
| `type` | `string` | - | 该参数指定变化的类型，拖拽排序是 `sort` 。 |
|
||||||
|
| `containment` | `string|Vue|HTMLElement|Object` | - | 参见上面的基础描述 |
|
||||||
|
| `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做排序。取值为：`x`、`y`。 |
|
||||||
|
| `callback` | `function(toIndex: number, fromIndex: number): void` | - | [^sort_callback] |
|
||||||
|
| `debug` | `boolean` | `false` | 在开发模式（process.env.NODE_ENV === 'development'）下在 DOM 上显示热区标记以方便调试。 |
|
||||||
|
|
||||||
|
^^^sort_callback
|
||||||
|
排序指令仅仅通过该回调告诉用户排序的情况，即：从原来位置（`fromIndex`）移动到新位置（`toIndex`）,用户自己应该在该回调中对数据源进行调整位置。
|
||||||
|
|
||||||
|
** 回调触发时机：当 *fromIndex* 元素的中心点拖动到热区（*toIndex* 元素尾部和 *toIndex+1* 元素首部之间的区域）中触发。**
|
||||||
|
|
||||||
|
^^^
|
||||||
|
|
||||||
## 扩展
|
## 扩展
|
||||||
|
|
||||||
可以通过继承 `BaseHandler` 扩展 `v-drag` 指令：
|
可以通过继承 `BaseHandler` 扩展 `v-drag` 指令：
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user