Vue.extend构造函数的使用--实现alert方法
程序员文章站
2024-03-04 16:49:53
...
由于项目中经常会用到alert这种组件,这种组件一般是在js中被调用,vue中组件主要是使用了标签的形式,
现记录通过Vue.extend实现的动态组件
Vue-extend官网链接
官网案例
// 创建实例
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
alert实例开发
官网的案例还是很清楚的,现在我们给予官网的实例拓展alert组件如何开发。
我们需要新建一个目录,目录中有俩个文件index.js和main.vue
main.vue
<template>
<transition name="el-message-fade">
<div v-show="visible" class="my-msg">{{message}}</div>
</transition>
</template>
<script >
export default{
data(){
return{
message:'', //需要提示用户的内容
visible:true //线上与隐藏
}
},
methods:{
close(){
setTimeout(()=>{
this.$emit("results","test"); // 自定义方法
this.visible = false; // 隐藏元素
this.$el.remove(); // 移除DOM
},2000)
},
},
mounted() {
this.close();
}
}
</script>
index.js
import Vue from 'vue';
import main from './main.vue';
let MyAlertConstructor = Vue.extend(main);
let instance;
var MyAlert=function(message){ //自定义传入的参数
// 创建实例并且过滤参数
instance= new MyAlertConstructor({
data:{
message:message
}})
// 挂载实例
instance.$mount();
document.body.appendChild(instance.$el)
return instance;
}
export default MyAlert;
使用
import Hint from '../brick/Hint/index.js'
Hint({name : 'name'}).$on('results', (text) => {
console.log(text);
});
推荐阅读
-
Vue.extend构造函数的使用--实现alert方法
-
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
-
Laravel实现构造函数自动依赖注入的方法,laravel构造函数_PHP教程
-
在PHP中实现重载构造函数的方法
-
php使用array_search函数实现数组查找的方法
-
PHP实现通用alert函数的方法,php通用alert函数
-
php使用array_search函数实现数组查找的方法,array_search数组_PHP教程
-
JavaScript使用三种方法定义函数的实现代码分析
-
C#使用this关键字实现串联构造函数调用方法
-
Laravel实现构造函数自动依赖注入的方法