feat: add v-tooltip, fix sort demo, replace custom blocks with <veui-alert>
This commit is contained in:
Justineo
@@ -1,28 +1,24 @@
|
||||
<template>
|
||||
<article>
|
||||
<section ref="itemGroup">
|
||||
<h2>Axis: X（v-drag.sort.x）</h2>
|
||||
<transition-group
|
||||
ref="transitionGroup"
|
||||
name="list"
|
||||
tag="div"
|
||||
class="items"
|
||||
<transition-group
|
||||
ref="group"
|
||||
name="list"
|
||||
tag="div"
|
||||
class="items"
|
||||
>
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
v-drag.sort.x="{
|
||||
name: 'words',
|
||||
containment: 'group',
|
||||
sort: sortCallback,
|
||||
}"
|
||||
class="item"
|
||||
>
|
||||
<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>
|
||||
{{ item }}
|
||||
</div>
|
||||
</transition-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
@@ -30,25 +26,7 @@
|
||||
<script>
|
||||
import drag from 'veui/directives/drag'
|
||||
|
||||
const items = [
|
||||
'须菩提',
|
||||
'菩萨亦如是',
|
||||
'若作是言',
|
||||
'我当灭度无量众生',
|
||||
'即不名菩萨',
|
||||
'🍎🍎',
|
||||
'🍋',
|
||||
'🍉🍉🍉',
|
||||
'🍓🍓',
|
||||
'何以故',
|
||||
'须菩提',
|
||||
'无有法名为菩萨',
|
||||
'是故佛说',
|
||||
'一切法无我',
|
||||
'无人',
|
||||
'无众生',
|
||||
'无寿者'
|
||||
]
|
||||
const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
@@ -56,51 +34,21 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
debug: false,
|
||||
align: undefined,
|
||||
items: items.map((item, i) => `${i}. ${item}`)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
handleAxisXSortCallback () {
|
||||
return this.getTransitionSortCallback('items', 'transitionGroup')
|
||||
items
|
||||
}
|
||||
},
|
||||
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) {
|
||||
sortCallback (fromIndex, toIndex) {
|
||||
let items = this.items
|
||||
let item = items[fromIndex]
|
||||
items.splice(fromIndex, 1)
|
||||
if (toIndex > fromIndex) {
|
||||
toIndex--
|
||||
}
|
||||
items.splice(toIndex, 0, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
<style lang="less" scoped>
|
||||
.items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -113,16 +61,9 @@ export default {
|
||||
border-radius: 3px;
|
||||
margin: 0 10px 8px 0;
|
||||
padding: 1px 2px;
|
||||
|
||||
&:nth-child(3n) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.list-move {
|
||||
// 动画曲线是 0.25, 0.1, 0.25, 1，就是 ease
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,31 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h2>Axis: Y（v-drag.sort.y）</h2>
|
||||
<transition-group
|
||||
ref="transitionGroup2"
|
||||
name="list"
|
||||
tag="ol"
|
||||
class="list"
|
||||
<transition-group
|
||||
ref="group"
|
||||
name="list"
|
||||
tag="div"
|
||||
class="items"
|
||||
>
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
v-drag.sort.y="{
|
||||
name: 'words',
|
||||
containment: 'group',
|
||||
sort: sortCallback,
|
||||
}"
|
||||
class="item"
|
||||
>
|
||||
<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>
|
||||
{{ item }}
|
||||
</div>
|
||||
</transition-group>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drag from 'veui/directives/drag'
|
||||
|
||||
const items = [
|
||||
'须菩提',
|
||||
'若菩萨作是言',
|
||||
'我当庄严佛土',
|
||||
'是不名菩萨',
|
||||
'何以故',
|
||||
'🦁',
|
||||
'🙈🙉🙊',
|
||||
'🐷🐶',
|
||||
'如来说',
|
||||
'庄严佛土者',
|
||||
'即非庄严',
|
||||
'是名庄严',
|
||||
'须菩提',
|
||||
'若菩萨通达无我法者'
|
||||
]
|
||||
const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
@@ -52,64 +33,30 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
debug: false,
|
||||
align: undefined,
|
||||
items2: items.map((item, i) => `${i}${item}`)
|
||||
items
|
||||
}
|
||||
},
|
||||
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) {
|
||||
sortCallback (fromIndex, toIndex) {
|
||||
let items = this.items
|
||||
let item = items[fromIndex]
|
||||
items.splice(fromIndex, 1)
|
||||
if (toIndex > fromIndex) {
|
||||
toIndex--
|
||||
}
|
||||
items.splice(toIndex, 0, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
<style lang="less" scoped>
|
||||
.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 {
|
||||
.items {
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
display: flex;
|
||||
@@ -117,18 +64,14 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
height: 300px;
|
||||
resize: both;
|
||||
overflow: scroll;
|
||||
|
||||
.item {
|
||||
width: 40%;
|
||||
width: 20%;
|
||||
border-color: peachpuff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.list-move {
|
||||
// 动画曲线是 0.25, 0.1, 0.25, 1，就是 ease
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
46
one/docs/demo/directives/tooltip.vue
Normal file
46
one/docs/demo/directives/tooltip.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
v-tooltip="'Preview'"
|
||||
ui="icon"
|
||||
>
|
||||
<veui-icon name="zoom-in"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="'Upload'"
|
||||
ui="icon"
|
||||
>
|
||||
<veui-icon name="upload"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="'Remove'"
|
||||
ui="icon"
|
||||
>
|
||||
<veui-icon name="trash"/>
|
||||
</veui-button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Icon } from 'veui'
|
||||
import tooltip from 'veui/directives/tooltip'
|
||||
import 'veui-theme-dls-icons/zoom-in'
|
||||
import 'veui-theme-dls-icons/upload'
|
||||
import 'veui-theme-dls-icons/trash'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
directives: {
|
||||
tooltip
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button + .veui-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -6,27 +6,27 @@
|
||||
|
||||
## 示例
|
||||
|
||||
拖动元素。
|
||||
### 拖动元素
|
||||
|
||||
[[ demo src="/demo/directives/drag/base.vue" ]]
|
||||
|
||||
在指定元素区域内拖动。
|
||||
### 在指定元素区域内拖动
|
||||
|
||||
[[ demo src="/demo/directives/drag/containment.vue" ]]
|
||||
|
||||
拖动多个元素。
|
||||
### 拖动多个元素
|
||||
|
||||
[[ demo src="/demo/directives/drag/targets.vue" ]]
|
||||
|
||||
限制拖动方向。
|
||||
### 限制拖动方向。
|
||||
|
||||
[[ demo src="/demo/directives/drag/axis.vue" ]]
|
||||
|
||||
水平排序。
|
||||
### 水平排序
|
||||
|
||||
[[ demo src="/demo/directives/drag/sort-x.vue" ]]
|
||||
|
||||
垂直排序。
|
||||
### 垂直排序
|
||||
|
||||
[[ demo src="/demo/directives/drag/sort-y.vue" ]]
|
||||
|
||||
|
||||
@@ -10,6 +10,8 @@ VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验
|
||||
|
||||
## 示例
|
||||
|
||||
[[ demo src="/demo/directives/tooltip.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
:::tip
|
||||
|
||||
Reference in New Issue
Block a user