tangyouge / vue3-progress

☘ A vue3 component of progress bar the custom colors are supported 一款 vue3 进度条组件 支持自定义喜欢的颜色
https://vue3-progress.netlify.app
MIT License
27 stars 1 forks source link

How to access $progress inside <script setup></script> #10

Open kdbagwe opened 1 year ago

kdbagwe commented 1 year ago

How can I access this.$progress inside method as this keyword is not available inside ???

Nezertiam commented 1 year ago

Hey! I know it might be late, but after looking deeper, I found you can access it with two different ways. I personnally prefer the second one which i think is easier to reuse.

GetCurrentInstance function

<script setup lang="ts">
// in AnyComponent.vue
import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()

const progress = app?.appContext.config.globalProperties.$progress
</script>

By providing the $progress property

// in main.ts or main.js
import { createApp } from 'vue'
import Vue3Progress from "vue3-progress"

const app = createApp(App)

app.use(router)
  .use(Vue3Progress)
  .provide('progressbar', app.config.globalProperties.$progress)
  .mount('#app')

At this point, you can just inject the property in every component you wish to use it:

<script setup lang="ts">
// in AnyComponent.vue
import { inject } from 'vue'

const progress = inject('progressbar')
</script>
kdbagwe commented 1 year ago

Thanks for the response. Even I had found similar approach on the internet

On Fri, Jan 20, 2023 at 3:00 PM Mawyn NHEK @.***> wrote:

Hey ! I know I might be late, but after looking deeper, I found you can access it with two different ways. I personnally prefer the second one which i think is easier to reuse. GetCurrentInstance function

By providing the $progress property

// in main.ts or main.js import { createApp } from 'vue' import Vue3Progress from "vue3-progress"

const app = createApp(App)

app.use(router) .use(Vue3Progress) .provide('progressbar', app.config.globalProperties.$progress) .mount('#app')

At this point, you can just inject the property in every component you wish to use it:

— Reply to this email directly, view it on GitHub https://github.com/tangyouge/vue3-progress/issues/10#issuecomment-1398128856, or unsubscribe https://github.com/notifications/unsubscribe-auth/AICMZ3ILFLHT4APEDKR6NYTWTJLJPANCNFSM6AAAAAASVRSF5Y . You are receiving this because you authored the thread.Message ID: @.***>