perf[el-dragDialog]: add dragDialog callback function
This commit is contained in:
parent
320e941d9a
commit
9ba1ea6933
|
@ -1,5 +1,5 @@
|
||||||
export default{
|
export default{
|
||||||
bind(el, binding) {
|
bind(el, binding, vnode) {
|
||||||
const dialogHeaderEl = el.querySelector('.el-dialog__header')
|
const dialogHeaderEl = el.querySelector('.el-dialog__header')
|
||||||
const dragDom = el.querySelector('.el-dialog')
|
const dragDom = el.querySelector('.el-dialog')
|
||||||
dialogHeaderEl.style.cssText += ';cursor:move;'
|
dialogHeaderEl.style.cssText += ';cursor:move;'
|
||||||
|
@ -63,6 +63,9 @@ export default{
|
||||||
|
|
||||||
// 移动当前元素
|
// 移动当前元素
|
||||||
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
|
||||||
|
|
||||||
|
// emit onDrag event
|
||||||
|
vnode.child.$emit('dragDialog')
|
||||||
}
|
}
|
||||||
|
|
||||||
document.onmouseup = function(e) {
|
document.onmouseup = function(e) {
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="components-container">
|
<div class="components-container">
|
||||||
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
|
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
|
||||||
<el-dialog v-el-drag-dialog title="Shipping address" :visible.sync="dialogTableVisible">
|
<el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="Shipping address" :visible.sync="dialogTableVisible">
|
||||||
|
<el-select ref="select" v-model="value" placeholder="请选择">
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
<el-table :data="gridData">
|
<el-table :data="gridData">
|
||||||
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
||||||
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
||||||
|
@ -20,6 +24,13 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dialogTableVisible: false,
|
dialogTableVisible: false,
|
||||||
|
options: [
|
||||||
|
{ value: '选项1', label: '黄金糕' },
|
||||||
|
{ value: '选项2', label: '双皮奶' },
|
||||||
|
{ value: '选项3', label: '蚵仔煎' },
|
||||||
|
{ value: '选项4', label: '龙须面' }
|
||||||
|
],
|
||||||
|
value: '',
|
||||||
gridData: [{
|
gridData: [{
|
||||||
date: '2016-05-02',
|
date: '2016-05-02',
|
||||||
name: 'John Smith',
|
name: 'John Smith',
|
||||||
|
@ -38,6 +49,12 @@ export default {
|
||||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// v-el-drag-dialog onDrag callback function
|
||||||
|
handleDrag() {
|
||||||
|
this.$refs.select.blur()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue