将vue2选项API组件更新为vue 3。

huangapple go评论62阅读模式
英文:

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:

&lt;script lang=&quot;ts&quot;&gt;
export default{
let uuid = 0;
this.$el.querySelector(&quot;input&quot;).innerHTML = &quot;#scroll-sync-template&quot;
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(&#39;scroll-sync&#39;, function(data) {
if (data.emitter === vue.uuid) {
return
}
const {
scrollTop,
scrollHeight,
clientHeight,
barHeight
} = data
const scrollTopOffset = scrollHeight - clientHeight
vue.$el.onscroll = null
if (scrollTopOffset &gt; barHeight) {
vue.$el.scrollTop = scrollTop;
}
window.requestAnimationFrame(() =&gt; {
vue.$el.onscroll = vue.handleScroll
})
})
this.$el.onscroll = this.handleScroll
},
methods: {
handleScroll: function(e) {
const vue = this
window.requestAnimationFrame(() =&gt; {
const {
scrollTop,
scrollHeight,
clientHeight,
offsetHeight
} = e.target
this.topNode.$emit(&#39;scroll-sync&#39;, {
scrollTop,
scrollHeight,
clientHeight,
barHeight: offsetHeight - clientHeight,
emitter: vue.uuid
})
})
}
}
}
&lt;/script&gt;
&lt;template&gt;
&lt;div class=&quot;scroll-sync-container&quot;&gt;
&lt;slot&gt;&lt;/slot&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;style&gt;
.scroll-sync-container {
height: 100%;
width: 100%;
position: relative;
overflow: auto;
}
&lt;/style&gt;

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 将vue2选项API组件更新为vue 3。

如果您想迁移到Composition API,请随时提问,我认为它可以解决一些问题 :)

Hope it helps you!

希望这有所帮助!
英文:

I tried to do it but I thinks it's not gonna work on the '$on' :

&lt;script lang=&quot;ts&quot;&gt;
import { defineComponent } from &#39;vue&#39;;
export default defineComponent({
data: () =&gt; {
return {
topNode: null as any | null,
uuid: 0,
};
},
beforeCreate(): void {
this.$el.querySelector(&#39;input&#39;).innerHTML = &#39;#scroll-sync-template&#39;;
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(&#39;scroll-sync&#39;, 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 &gt; barHeight) {
vue.$el.scrollTop = scrollTop;
}
window.requestAnimationFrame(() =&gt; {
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(() =&gt; {
const { scrollTop, scrollHeight, clientHeight, offsetHeight } = e.target;
if (this.topNode) {
this.topNode.$emit(&#39;scroll-sync&#39;, {
scrollTop,
scrollHeight,
clientHeight,
barHeight: offsetHeight - clientHeight,
emitter: vue.uuid,
});
}
});
},
},
});
&lt;/script&gt;

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 将vue2选项API组件更新为vue 3。

Hope it helps you !

huangapple
  • 本文由 发表于 2023年4月17日 15:03:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76032461.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定