mirror of https://github.com/ElemeFE/element
Chore: delete unused file (#11641)
hetech
杨奕
parent
23a2e8d9ee
commit
85e562185e
|
|
@ -1,54 +0,0 @@
|
||||||
const SYNC_HOOK_PROP = '$v-sync';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* v-sync directive
|
|
||||||
*
|
|
||||||
* Usage:
|
|
||||||
* v-sync:component-prop="context prop name"
|
|
||||||
*
|
|
||||||
* If your want to sync component's prop "visible" to context prop "myVisible", use like this:
|
|
||||||
* v-sync:visible="myVisible"
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
bind(el, binding, vnode) {
|
|
||||||
const context = vnode.context;
|
|
||||||
const component = vnode.child;
|
|
||||||
const expression = binding.expression;
|
|
||||||
const prop = binding.arg;
|
|
||||||
|
|
||||||
if (!expression || !prop) {
|
|
||||||
console.warn('v-sync should specify arg & expression, for example: v-sync:visible="myVisible"');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!component || !component.$watch) {
|
|
||||||
console.warn('v-sync is only available on Vue Component');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const unwatchContext = context.$watch(expression, (val) => {
|
|
||||||
component[prop] = val;
|
|
||||||
});
|
|
||||||
|
|
||||||
const unwatchComponent = component.$watch(prop, (val) => {
|
|
||||||
context[expression] = val;
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.defineProperty(component, SYNC_HOOK_PROP, {
|
|
||||||
value: {
|
|
||||||
unwatchContext,
|
|
||||||
unwatchComponent
|
|
||||||
},
|
|
||||||
enumerable: false
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
unbind(el, binding, vnode) {
|
|
||||||
const component = vnode.child;
|
|
||||||
if (component && component[SYNC_HOOK_PROP]) {
|
|
||||||
const { unwatchContext, unwatchComponent } = component[SYNC_HOOK_PROP];
|
|
||||||
unwatchContext && unwatchContext();
|
|
||||||
unwatchComponent && unwatchComponent();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,163 +0,0 @@
|
||||||
import { createVue, triggerEvent } from '../util';
|
|
||||||
import Sync from 'element-ui/src/utils/sync';
|
|
||||||
|
|
||||||
const Test = {
|
|
||||||
template: `<div class="sync-test" v-show="visible">
|
|
||||||
<button @click="visible = false">Hide</button>
|
|
||||||
A test component.
|
|
||||||
</div>`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('Sync', () => {
|
|
||||||
it('should not throw when use incorrectly', () => {
|
|
||||||
sinon.stub(window.console, 'warn');
|
|
||||||
|
|
||||||
createVue({
|
|
||||||
template: `
|
|
||||||
<test v-sync>
|
|
||||||
</test>
|
|
||||||
`,
|
|
||||||
components: { Test },
|
|
||||||
directives: { Sync },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
myVisible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(window.console.warn.callCount).to.equal(1);
|
|
||||||
|
|
||||||
createVue({
|
|
||||||
template: `
|
|
||||||
<test v-sync:visible>
|
|
||||||
</test>
|
|
||||||
`,
|
|
||||||
components: { Test },
|
|
||||||
directives: { Sync },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
myVisible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(window.console.warn.callCount).to.equal(2);
|
|
||||||
|
|
||||||
createVue({
|
|
||||||
template: `
|
|
||||||
<test v-sync.visible>
|
|
||||||
</test>
|
|
||||||
`,
|
|
||||||
components: { Test },
|
|
||||||
directives: { Sync },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
myVisible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(window.console.warn.callCount).to.equal(3);
|
|
||||||
|
|
||||||
createVue({
|
|
||||||
template: `
|
|
||||||
<div v-sync:visible="myVisible">
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
components: { Test },
|
|
||||||
directives: { Sync },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
myVisible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(window.console.warn.callCount).to.equal(4);
|
|
||||||
|
|
||||||
window.console.warn.restore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('context variable should change when inner component variable change', (done) => {
|
|
||||||
const vm = createVue({
|
|
||||||
template: `
|
|
||||||
<test v-sync:visible="myVisible">
|
|
||||||
</test>
|
|
||||||
`,
|
|
||||||
components: { Test },
|
|
||||||
directives: { Sync },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
myVisible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
|
|
||||||
triggerEvent(vm.$el.querySelector('.sync-test button'), 'click', {});
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(vm.myVisible).to.be.false;
|
|
||||||
done();
|
|
||||||
}, 10);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('inner component variable should change when context variable change', (done) => {
|
|
||||||
const vm = createVue({
|
|
||||||
template: `
|
|
||||||
<test ref="test" v-sync:visible="myVisible">
|
|
||||||
</test>
|
|
||||||
`,
|
|
||||||
components: { Test },
|
|
||||||
directives: { Sync },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
myVisible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
|
|
||||||
vm.myVisible = false;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(vm.$refs.test.visible).to.be.false;
|
|
||||||
expect(vm.$refs.test.$el.style.display).to.equal('none');
|
|
||||||
done();
|
|
||||||
}, 10);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should unwatch expression after destroy', () => {
|
|
||||||
const vm = createVue({
|
|
||||||
template: `
|
|
||||||
<test ref="test" v-sync:visible="myVisible" v-if="createTest">
|
|
||||||
</test>
|
|
||||||
`,
|
|
||||||
components: { Test },
|
|
||||||
directives: { Sync },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
myVisible: true,
|
|
||||||
createTest: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const beforeBindCount = vm._watchers.length;
|
|
||||||
vm.createTest = true;
|
|
||||||
const delay = 50;
|
|
||||||
setTimeout(() => {
|
|
||||||
const afterBindCount = vm._watchers.length;
|
|
||||||
expect(afterBindCount).to.be.equal(beforeBindCount + 1);
|
|
||||||
|
|
||||||
vm.createTest = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
const afterDestroyCount = vm._watchers.length;
|
|
||||||
expect(afterDestroyCount).to.be.equal(beforeBindCount);
|
|
||||||
}, delay);
|
|
||||||
}, delay);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue