私はVue.jsを使い始めており、Nuxt.jsを使用しています。コンポーネント(スナックバー)を作成し、このコンポーネント内に、色とテキストの2つのパラメーターを渡して機能するメソッド「showSnackbar」を作成しました。したがって、showSnackbar(color、text)を呼び出すと、表示されます。
しかし、私はこのメソッドをページから呼び出したいと思います。このスナックバーを一部のページで使用したいので、常に同じコードを記述したくないので、コンポーネントを作成することにしました。しかし、このコンポーネント内のメソッドをページから呼び出すことはできません。
そのため、ページからコンポーネントメソッドを呼び出すことは可能かどうか疑問に思います(もちろん、コンポーネントをインポートします)
それを行うにはいくつかの方法があるかもしれません、私はプラグインを作成します。
次に<snackbar/>
、配置用のコンポーネントと、呼び出しメソッドを呼び出すためのグローバルAPIの両方があります。this.$snackbar.open({someOptions: '...'})
例えば:
にフォルダを作成し./plugins/snackbar
、次の場所に配置します。
./plugins/snackbar/index.js
import Vue from "vue";
import snackbar from "~/plugins/snackbar/snackbar";
Vue.use(snackbar);
これはnuxt.config.js
、をグローバルにロードするためのものです。これは次のようになります:
...
/*
** Plugins to load before mounting the App
** Doc: https://nuxtjs.org/guide/plugins
*/
plugins: ["~/plugins/snackbar/index.js"],
...
わかりました、今作成します
./plugins/snackbar/snackbar.js
これは、コンポーネントの状態を保持し、イベントプロキシとして機能するプラグインです。
import snackbar from "~/plugins/snackbar/snackbar.vue";
const Plugin = {
install(Vue, options = {}) {
/**
* Makes sure that plugin can be installed only once
*/
if (this.installed) {
return;
}
this.installed = true;
/**
* Create event bus
*/
this.event = new Vue();
/**
* Plugin methods
*/
Vue.prototype.$snackbar = {
show(options = {}) {
Plugin.event.$emit("show", options, true);
}
};
/**
* Registration of <snackbar/> component
*/
Vue.component("snackbar", snackbar);
}
};
export default Plugin;
そして今...
./plugins/snackbar/snackbar.vue
魔法が起こる場所...
<template>
<div>
<transition name="snackbar">
<div v-if="show" :class="['snackbar', 'box-shadow', type]">
<slot>{{ options.text }}</slot>
</div>
</transition>
<pre>options: {{ options }}</pre>
<pre>show: {{ show }}</pre>
<pre>type: {{ type }}</pre>
</div>
</template>
<script>
import snackbar from "~/plugins/snackbar/snackbar";
export default {
data: () => ({
options: {
text: "",
type: ""
},
show: false,
type: "",
timer: 0
}),
beforeMount() {
snackbar.event.$on("show", options => {
this.options = options;
this.type = options.type;
this.show = true;
this.close(this.options.closeWait || 3000);
});
},
methods: {
close(timeout) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.show = false;
}, timeout);
}
}
};
</script>
<style>
.snackbar {
min-width: 300px;
margin-left: -150px;
background-color: #F48024;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}
.snackbar.success {
background-color: rgb(71, 244, 36);
}
.snackbar.danger {
background-color: rgb(244, 36, 47);
}
.snackbar-enter-active {
animation: snackbar-in 0.8s;
}
.snackbar-leave-active {
animation: snackbar-in 0.8s reverse;
}
@keyframes snackbar-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.box-shadow {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
次に、それを使用するコンポーネント/ページ内で、を使用して配置し<snackbar/>
、次のようなメソッドを呼び出すことができます。
this.$snackbar.show({
text: "Hello, snackbar!",
type: "success"
});
上記の実用的な例はここにありますhttps://codesandbox.io/s/codesandbox-nuxt-oeo4h
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加