英文:
Update vue2 option API component to vue 3
问题
Here is the translated content from the code you provided:
<script lang="ts">
export default {
let uuid = 0;
this.$el.querySelector("input").innerHTML = "#scroll-sync-template";
data() {
return {
topNode: null
}
},
beforeCreate() {
this.uuid = uuid.toString();
uuid += 1;
},
mounted() {
let parent = this.$parent
while (parent) {
this.topNode = parent
parent = this.topNode.$parent
}
const vue = this;
this.topNode.$on('scroll-sync', function(data) {
if (data.emitter === vue.uuid) {
return
}
const {
scrollTop,
scrollHeight,
clientHeight,
barHeight
} = data
const scrollTopOffset = scrollHeight - clientHeight
vue.$el.onscroll = null
if (scrollTopOffset > barHeight) {
vue.$el.scrollTop = scrollTop;
}
window.requestAnimationFrame(() => {
vue.$el.onscroll = vue.handleScroll
})
})
this.$el.onscroll = this.handleScroll
},
methods: {
handleScroll: function(e) {
const vue = this
window.requestAnimationFrame(() => {
const {
scrollTop,
scrollHeight,
clientHeight,
offsetHeight
} = e.target
this.topNode.$emit('scroll-sync', {
scrollTop,
scrollHeight,
clientHeight,
barHeight: offsetHeight - clientHeight,
emitter: vue.uuid
})
})
}
}
}
</script>
<template>
<div class="scroll-sync-container">
<slot></slot>
</div>
</template>
<style>
.scroll-sync-container {
height: 100%;
width: 100%;
position: relative;
overflow: auto;
}
</style>
Please note that I have translated the code, but it's important to review and test it thoroughly, as updating from Vue 2 JavaScript to Vue 3 TypeScript may involve more than just translation, and there could be other adjustments needed for compatibility.
英文:
I need to update a component from vue 2-javascript to vue 3 typescript any approach on how can I achieve this?, I watched many tutorials but it seems its more complex than I thought, here is the code:
<script lang="ts">
export default{
let uuid = 0;
this.$el.querySelector("input").innerHTML = "#scroll-sync-template"
data() {
return {
topNode: null
}
},
beforeCreate() {
this.uuid = uuid.toString();
uuid += 1;
},
mounted() {
let parent = this.$parent
while (parent) {
this.topNode = parent
parent = this.topNode.$parent
}
const vue = this;
this.topNode.$on('scroll-sync', function(data) {
if (data.emitter === vue.uuid) {
return
}
const {
scrollTop,
scrollHeight,
clientHeight,
barHeight
} = data
const scrollTopOffset = scrollHeight - clientHeight
vue.$el.onscroll = null
if (scrollTopOffset > barHeight) {
vue.$el.scrollTop = scrollTop;
}
window.requestAnimationFrame(() => {
vue.$el.onscroll = vue.handleScroll
})
})
this.$el.onscroll = this.handleScroll
},
methods: {
handleScroll: function(e) {
const vue = this
window.requestAnimationFrame(() => {
const {
scrollTop,
scrollHeight,
clientHeight,
offsetHeight
} = e.target
this.topNode.$emit('scroll-sync', {
scrollTop,
scrollHeight,
clientHeight,
barHeight: offsetHeight - clientHeight,
emitter: vue.uuid
})
})
}
}
}
</script>
<template>
<div class="scroll-sync-container">
<slot></slot>
</div>
</template>
<style>
.scroll-sync-container {
height: 100%;
width: 100%;
position: relative;
overflow: auto;
}
</style>
I tried to update a vue 2 in javascript document but it result in a locked road, I added the template part as the style tag.
答案1
得分: 0
I tried to do it but I thinks it's not gonna work on the '$on' :
我尝试过,但我认为它在'$on'上不会起作用:
You can still type your topNode if you want with 'ComponentPublicInstance' from 'vue' but you will have an error on the $on. Maybe the solution is to use addEventListener or a substitute.
如果你仍然想为topNode添加类型,请使用'vue'中的'ComponentPublicInstance',但在$on上可能会出错。也许解决方案是使用addEventListener或替代方法。
If you want to migrate to Composition API don't hesitate to ask, and I think it could solve some problems
如果您想迁移到Composition API,请随时提问,我认为它可以解决一些问题 :)
Hope it helps you!
希望这有所帮助!
英文:
I tried to do it but I thinks it's not gonna work on the '$on' :
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data: () => {
return {
topNode: null as any | null,
uuid: 0,
};
},
beforeCreate(): void {
this.$el.querySelector('input').innerHTML = '#scroll-sync-template';
this.uuid += 1;
},
mounted(): void {
let parent = this.$parent;
while (parent) {
this.topNode = parent;
parent = this.topNode.$parent;
}
// eslint-disable-next-line @typescript-eslint/no-this-alias
const vue = this;
if (this.topNode) {
this.topNode.$on('scroll-sync', function (data: any) {
if (data.emitter === vue.uuid) {
return;
}
const { scrollTop, scrollHeight, clientHeight, barHeight } = data;
const scrollTopOffset = scrollHeight - clientHeight;
vue.$el.onscroll = null;
if (scrollTopOffset > barHeight) {
vue.$el.scrollTop = scrollTop;
}
window.requestAnimationFrame(() => {
vue.$el.onscroll = vue.handleScroll;
});
});
this.$el.onscroll = this.handleScroll;
}
},
methods: {
handleScroll: function (e: any) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const vue = this;
window.requestAnimationFrame(() => {
const { scrollTop, scrollHeight, clientHeight, offsetHeight } = e.target;
if (this.topNode) {
this.topNode.$emit('scroll-sync', {
scrollTop,
scrollHeight,
clientHeight,
barHeight: offsetHeight - clientHeight,
emitter: vue.uuid,
});
}
});
},
},
});
</script>
You can still type your topNode if you want with 'ComponentPublicInstance' from 'vue' but you will have an error on the $on. Maybe the solution is to use addEventListener or a substitute.
If you want to migrate to Composition API don't hesitate to ask, and i think it could solve some problems
Hope it helps you !
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论