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/sort-x.vue" ]]
|
||||
|
||||
垂直排序。
|
||||
|
||||
[[ demo src="/demo/directives/drag/sort-y.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
:::tip
|
||||
@ -41,6 +49,7 @@
|
||||
| `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做变换。取值为：`x`、`y`。 |
|
||||
| `dragstart` | `function(): Object` | `function() {}` | [^dragstart] |
|
||||
| `drag` | `function(): Object` | `function() {}` | [^drag] |
|
||||
| `disabled` | `boolean` | `false` | 动态开关该指令 |
|
||||
| `dragend` | `function(): Object` | `function() {}` | 鼠标拖拽结束事件的回调函数。回调参数同 `drag`。 |
|
||||
| `ready` | `function` | `function() {}` | 指令初始化完成的回调函数，会传出一个句柄对象参数，该对象上有一个 `reset()` 方法，用于将所有目标元素重置为变换之前的样子。 |
|
||||
|
||||
@ -108,6 +117,31 @@
|
||||
<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` 指令：
|
||||
|
||||
Loading…
Reference in New Issue
Block a user