vue esview 控制元件拖拽問題（二）Vue.directiove自定義命令
阿新 • • 發佈：2018-12-21
控制元件拖拽問題（二）
initDropEvents是繫結在bind中的（droppable.js）
而這個droppable是在install_derictive.js中定義的定義命令，
Vue.directive(‘droppable’,droppable)
Vue.directive(‘editable’,editable)
這兩個自定義命令在main.js中被執行：
import installDirective from “./plugin/install_directive”//don’t delete,let vue install
理論上我們應該看到v-droppable 和v-editable這些自定義命令在程式中的使用呼叫，但是沒有。
我們看到在後臺呼叫getRichPage中
getRichPage.call(this, this.pageSoulId, (data) => {
this.opModel = data
let ancestorSoul = parse(data.pageSoul)
addRenderFn(ancestorSoul)
resetUid(ancestorSoul.maxUid)
saveSoul()
this.setSoul(ancestorSoul)
walkSoul(ancestorSoul, (soul) => {
resetSoul(soul)
從後臺得到的getRichPage的code是這樣定義的：
<div{model}>{slot}</div>
exports.desc = ‘拖拽安置面板’;
exports.allow = [];
exports.template= <Div{model} {slotName}>{slot}</Div>
exports.model = {
style: {
type: ‘json’,
value:{},
desc: ‘value’
}
};
exports.script = function () {
};
exports.render = function (createElement) {
const context = this
const store = createElement.store
if(!context.initScript){
context.initScript=true
}
return createElement(‘Div’, {
style:context.model.style.value,
domProps: {
controlConfig: this
},
directives: [
{
name: ‘droppable’
}
],
‘class’: {
‘soul-drop-panel’: true
},
nativeOn: {
click: function (e) {
store.commit(‘dragModule/clear’, e)
}
}
}, context.children.map(function (child) {
return child.render(createElement)
}))
}”
這個程式碼中定義了dropPanel的render函式，並creatElement，在el中定義了自定義函式droppable：
directives: [
{
name: ‘droppable’
}
也就是說在dropPanel中定義了自定義函式droppable，droppable bind了onDrop等函式，但是為什麼onDragEnd和OnDropOver等函式都不響應呢，只響應dragStart？
function initDropEvents(drag) {
drag.ondragenter = onDragEnter
drag.ondragover = onDragOver
drag.ondrop = onDrop
drag.ondragleave = onDragLeave
}