Tipp: Notieren Sie die Bedürfnisse und Lösungen, die Sie bei der Arbeit gefunden haben
Artikelverzeichnis
Vorwort
Vorher habe ich nie verstanden, wofür Vue.extend() verwendet wird und wie man es verwendet. Nachdem ich mir einige Videos angesehen und es mit der Vue-Dokumentation kombiniert habe, habe ich ein kurzes Verständnis davon und einige einfache Anwendungen da stimmt etwas nicht.
Zur Erläuterung werde ich Gerüste verwenden, um ein Vue2-Projekt zu generieren.
提示:以下是本篇文章正文内容,下面案例可供参考
1. Verzeichnisstruktur
2. Code
1. Erstellen Sie die Datei m-Toast.vue
<template>
<div class="message">
<div class="text">{
{
text }}</div>
</div>
</template>
<script>
export default {
name: 'm-Toast',
props: {
text: {
type: String,
default: ''
},
},
mounted () {
this.timer = setTimeout(() => {
this.$destroy()
clearTimeout(this.timer);
}, 2000)
},
destroyed () {
clearTimeout(this.timer);
document.body.removeChild(this.$el)
},
methods: {
},
}
</script>
<style scoped>
.message {
min-width: 380px;
background-color: #f0f9eb;
color: #67c23a;
position: fixed;
padding: 15px 15px 15px 20px;
top: 20px;
left: 50%;
z-index: 2022;
font-size: 14px;
transform: translate(-50%, 0);
}
.text {
overflow: hidden;
align-items: center;
}
</style>
2. Erstellen Sie die Datei global.js
import Vue from "vue";
import Toast from "./components/m-Toast.vue";
/** 创建 Toast对应的Vue子类(构造器)
* 结合vue文档 和 视频,
* extends 的参数可以通过导入一个写好的组件
* 或者 是函数 ,例如:
* {
* template: '<div class="message">
* <div class="text">{
{ text }}</div>
* </div>',
* data: function () {
* return {
* text: '测试',
* }
* }
* }
* 下面我选择通过导入组件的方法,因为方便使用样式,结构更明了
*/
let ToastSubclass = Vue.extend(Toast)
// 全局挂载到原型上方便调用
Vue.prototype.$toast = function (text) {
// 创建实例
let ToastConstructor = new ToastSubclass({
// 就是在调用组件的时候,给组件传递属性值
propsData: {
text
}
});
/** 挂载(渲染组件)
* 使用 $mount() 但不传挂载点,返回一个完整的 Vue 组件实例
*/
ToastConstructor.$mount()
// 把渲染后的真实DOM插入到BODY中即可
document.body.appendChild(ToastConstructor.$el)
}
3. Importieren Sie die Datei global.js in die Datei main.js
import Vue from 'vue'
import App from './App.vue'
// 导入 global.js 文件
import './global.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
4. Komponenten, die mit globalen Methoden in der App.vue-Datei erstellt wurden
<template>
<div id="app">
<button @click="config">按钮</button>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
count: 0
}
},
mounted () {
},
methods: {
config () {
this.$toast(`测试${
this.count++}`)
}
}
}
</script>
<style></style>