perf[el-dragDialog]: add dragDialog callback function

This commit is contained in:
Pan 2018-06-01 10:38:27 +08:00
parent 320e941d9a
commit 9ba1ea6933
2 changed files with 22 additions and 2 deletions

View file

@ -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) {

View file

@ -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>