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