在 Vue.js 中，命令式组件通常是指通过 JavaScript 动态创建和管理的组件，而不是通过模板声明式地使用。命令式组件的封装通常用于实现一些动态的、临时的 UI 元素，比如 Toast 提示、Modal 对话框等。
下面是一个简单的命令式 Toast 组件的封装示例：
1. 创建 Toast 组件
首先，创建一个 `Toast.vue` 组件文件：
vue
{{ message }}
<script>
export default {
data() {
return {
visible: false,
message: '',
duration: 3000
};
},
methods: {
show(message, duration = 3000) {
this.message = message;
this.duration = duration;
this.visible = true;
setTimeout(() => {
this.visible = false;
}, this.duration);
}
}
};
</script>
2. 创建命令式 API
接下来，创建一个 `toast.js` 文件，用于封装命令式 API：
javascript
// toast.js
import Vue from 'vue';
import Toast from './Toast.vue';
const ToastConstructor = Vue.extend(Toast);
let toastInstance = null;
function showToast(message, duration = 3000) {
if (!toastInstance) {
toastInstance = new ToastConstructor({
el: document.createElement('div')
});
document.body.appendChild(toastInstance.$el);
}
toastInstance.show(message, duration);
}
export default {
install(Vue) {
Vue.prototype.$toast = showToast;
}
};
3. 在 Vue 应用中安装插件
在 `main.js` 中安装并使用这个插件：
javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import toast from './toast';
Vue.config.productionTip = false;
Vue.use(toast);
new Vue({
render: h => h(App),
}).$mount('app');
4. 在组件中使用命令式 Toast
现在你可以在任何 Vue 组件中使用 `this.$toast` 来显示 Toast 提示：
vue
<script>
export default {
methods: {
showToast() {
this.$toast('This is a toast message!');
}
}
};
</script>
总结
通过这种方式，你可以将命令式组件的逻辑封装在一个独立的插件中，使得在 Vue 应用中可以方便地通过 `this.$toast` 来调用。这种方式非常适合用于实现一些全局的、动态的 UI 组件。