<p>제가 시도한 것은 사용자 정의 구성 요소와 Toast의 일부 Vuetify 구성 요소를 사용한 vue-toastification이었습니다. <code>npm create vuetify@latest</code>를 사용하여 저장소를 생성하고 <code>npm i vue-toastification@latest</code> 라이브러리를 설치했습니다. 그런 다음 플러그인을 사용했습니다: </p> <pre class="lang-js Prettyprint-override"><code>// main.ts //토스트화 "vue-toastification"에서 토스트 가져오기, { POSITION }; import "vue-toastification/dist/index.css"; const app = createApp(앱); const 옵션 = { shareAppContext: true, // https://github.com/Maronato/vue-toastification#access-global-comComponents-and-plugins-inside-toasts에서 위치: POSITION.BOTTOM_CENTER, }; 등록플러그인(앱); app.use(토스트, 옵션); <p>그런 다음 다음 코드를 사용하여 toast를 호출해 보았습니다. </p> <pre class="lang-js Prettyprint-override"><code>// store/error.ts "vue-toastification"에서 import { useToast }를;; "@/comComponents/MyComponent.vue"에서 MyComponent를 가져옵니다. const 토스트 = useToast(); 내보내기 const useErrorStore = DefineStore("error", () => { 함수 위치 오류() { 토스트(MyComponent); } }); <p>내 구성요소: </p> <pre class="lang-js Prettyprint-override"><code>// Components/MyComponent.vue <템플릿> <div class="컨테이너"> <v-컨테이너> <v-행> <v-col> 경고 예 </v-col> <v-col> <v-btn @click="새로고침">새로고침</v-btn> </v-col> </v-row> </v-컨테이너> </div> </템플릿> <스크립트 설정 lang="ts"> 함수 다시 로드() { if (창 유형 !== "정의되지 않음") { window.location.reload(); } } </스크립트> <p>我从App.vue文件中调사용처：</p> <pre class="lang-js Prettyprint-override"><code>// App.vue <템플릿> <v-앱> <v-메인> <v-btn @click="loc">위치 오류</v-btn> </v-메인> </v-앱> </템플릿> <스크립트 설정 lang="ts"> "./store/error"에서 import { useErrorStore }를; const errorStore = useErrorStore(); 함수 loc() { errorStore.locationError(); } </스크립트> <p>但是는 运行时，当我点击按钮时，我得到以下错误：</p> <pre class="brush:php;toolbar:false;">[Vue 경고]: 삽입 "Symbol(vuetify:defaults)" 찾을 수 없습니다. <VContainer> <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > <VtToast key="_default00"에서 position="하단 중앙" 드래그 가능=true ... > <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > <VtTransition 전환="Vue-Toastification__bounce" class="Vue-Toastification__컨테이너 하단 중앙" > <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _comComponent: {…}, _props: null, _container: div#app, _context: {…}, …} position="하단 -센터'' > [Vue 경고]: 설정 기능 실행 중 처리되지 않은 오류 <VContainer> <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > <VtToast key="_default00"에서 position="하단 중앙" 드래그 가능=true ... > <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > <VtTransition 전환="Vue-Toastification__bounce" class="Vue-Toastification__컨테이너 하단 중앙" > <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _comComponent: {…}, _props: null, _container: div#app, _context: {…}, …}position="하단 중앙" > [Vue 경고]: 스케줄러 플러시 실행 중 처리되지 않은 오류가 발생했습니다. 이는 Vue 내부 버그일 가능성이 높습니다. https://new-issue.vuejs.org/?repo=vuejs/core에서 문제를 열어주세요. <VContainer> <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > <VtToast key="_default00"에서 position="하단 중앙" 드래그 가능=true ... > <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > <VtTransition 전환="Vue-Toastification__bounce" class="Vue-Toastification__컨테이너 하단 중앙" > <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _comComponent: {…}, _props: null, _container: div#app, _context: {…}, …} position="하단 -센터'' > 포착되지 않은(약속 있음) 오류: [Vuetify] 기본 인스턴스를 찾을 수 없습니다. injectDefaults에서 (defaults.ts:28:24) 설정 시(defineComponent.tsx:118:24) callWithErrorHandling에서(runtime-core.esm-bundler.js:158:18) setupStatefulComponent(runtime-core.esm-bundler.js:7236:25)에서 setupComponent에서 (runtime-core.esm-bundler.js:7197:36) mountComponent에서(runtime-core.esm-bundler.js:5599:7) processComponent에서(runtime-core.esm-bundler.js:5565:9) 패치 시(runtime-core.esm-bundler.js:5040:11) mountChildren에서(runtime-core.esm-bundler.js:5284:7) mountElement(runtime-core.esm-bundler.js:5191:7)</pre> <p>저는 Vuetify를 이용하고 있나요? </p> <p>저는 여기에서 다른 회사에 있습니다.</p>