提示:记录工作中遇到的需求及解决办法
文章目录
- 前言
- 一、目录结构
- 二、代码
-
-
- [1. 创建 m-Toast.vue 文件](#1. 创建 m-Toast.vue 文件)
- [2. 创建 global.js 文件](#2. 创建 global.js 文件)
- [3. 在 main.js 文件中导入 global.js 文件](#3. 在 main.js 文件中导入 global.js 文件)
- [4. 在 App.vue 文件中使用 全局方法创建的 组件](#4. 在 App.vue 文件中使用 全局方法创建的 组件)
-
前言
在此之前一直不明白Vue.extend( )干什么用的,如何使用,看了一些视频,再结合vue文档,浅浅的理解了一些,以及一些简单的应用,如有不对请指出。
我将使用脚手架生成一个vue2项目来解释。
提示:以下是本篇文章正文内容,下面案例可供参考
一、目录结构
二、代码
1. 创建 m-Toast.vue 文件
js
<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. 创建 global.js 文件
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. 在 main.js 文件中导入 global.js 文件
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. 在 App.vue 文件中使用 全局方法创建的 组件
js
<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>