Skip to content

Instantly share code, notes, and snippets.

@NoelDeMartin NoelDeMartin/Freezable.vue
Last active Jun 17, 2019

Embed
What would you like to do?
Vue Freezable
<script>
let instancesCount = 0;
const rendersCache = {};
// See live example: https://x3t7g.codesandbox.io/
export default {
props: {
tag: {
type: String,
default: "div"
},
frozen: {
type: Boolean,
default: false
},
frozenProps: {
type: Object,
default: () => {}
}
},
data() {
return {
uuid: instancesCount++
};
},
destroyed() {
delete rendersCache[this.uuid];
},
methods: {
renderChildren(h, children) {
return h(this.tag, {}, children);
}
},
render(h) {
if (this.frozen) {
return this.renderChildren(h, rendersCache[this.uuid] || []);
}
rendersCache[this.uuid] = this.$scopedSlots.default
? this.$scopedSlots.default(this.frozenProps)
: this.$slots.default;
return this.renderChildren(h, rendersCache[this.uuid] || []);
}
};
</script>
@NoelDeMartin

This comment has been minimized.

Copy link
Owner Author

commented Jun 17, 2019

Example without freezable:
freezable-off

Example with freezable:
freezable-on

See a live example here: https://codesandbox.io/s/vue-freezable-x3t7g

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.