Vue.extend构造函数的使用--实现alert方法

由于项目中经常会用到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);
      });

推荐阅读更多精彩内容

  • 人是很奇怪的生物,有时会感觉自己很伟大,有时会感觉自己很渺小,伟大的时候感觉全天下都是自己的,渺小的时候感觉自己只...
    echotao1阅读 111评论 0 0
  • 上午的上证指数,k线过前高向好,7条均线5条向好,macd黄白线突破o轴向好,可以做多,这是2017年6月22日上...
    向延炳阅读 28评论 0 1
  • 如果想在controller里面随时监听一个值的变化那就用 $watch 以上代码实现监听 name 属性值的变化...
    MakingChoice阅读 3,189评论 0 1