函数调用方式引用组件

传统意义上弹窗组件是可以直接import导入定义引用的，今天我们来用函数调用的方式实现弹窗组件,首先先封装弹窗组件写好样式。

1、定义一个tosat.js文件，引入vue，并且引入弹窗组件，先创建组件对象构造函数

2、在toast.js文件中定义一个函数，new一个函数实例，一般是直接找不到渲染dom的，通常会使用$mount找，new ToastCtor().$mount()

3、将new的实例赋值，.$el里面就是要渲染的组件，

4、将要渲染的弹窗组件放在页面的最后，函数控制弹窗的显隐

toast.js

import Vue from 'vue'
// 引入组件
import Toast from './toast.vue'
​
const ToastCtor = Vue.extend(Toast)// 创建组件对象函数
​
export function showToast (content, delay) {
  const toastComp = new ToastCtor().$mount()
  document.body.appendChild(toastComp.$el)// 找到渲染的组件渲染在页面的最后
  toastComp.show(content)
  setTimeout(() => {
    toastComp.hide()
    toastComp.$el.parentNode.removeChild(toastComp.$el)
  }, delay)
}

​

toast.vue

<template>
  <div class="box" v-show="isShow">
    <div class="conent">{{ message }}</div>
  </div>
</template>
​
<script>
export default {
  data () {
    return {
      message: '默认内容',
      isShow: false
    }
  },
  methods: {
    show (conent) {
      this.isShow = true
      this.message = conent
    },
    hide () {
      this.isShow = false
    }
  }
}
</script>
​
<style lang="less" scoped>
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 10px;
}
.conent {
  // padding: 10px;
  // display: inline-block;
}
</style>

​

index.vue

<template>
  <div>
    <!-- 函数调用方式引用组件 -->
    <h1>函数调用方式引用组件</h1>
    <!-- <Toast></Toast> -->
    <el-button @click="handelClick">按钮</el-button>
  </div>
</template>
​
<script>
import { showToast } from './companents/toast.js'
// import Toast from  './companents/toast.vue'
export default {
  // components: {
  //   Toast
  // },
  methods: {
    handelClick () {
      showToast('自定义组件', 500)
    }
  }
}
</script>
​
<style>
</style>