码迷,mamicode.com
首页 > 其他好文 > 详细

使用extend动态渲染组件

时间:2020-06-12 14:33:40      阅读:51      评论:0      收藏:0      [点我收藏+]

标签:app   fixed   imp   渲染   内容   默认   vue   style   new   

在项目中实现类似于this.$toast(‘信息‘)的组件动态渲染,使用extend构造器动态添加到页面再消失。

toast.vue中写组件的样式代码

<template>
  <div class="container">
    <div class="msgBox" v-if="show">{{msg}}</div>
  </div>
</template>
<script>
export default {
  props:{
//注意:这里一定要注释掉msg,因为msg内容是通过后面函数的参数传递过来的,但是会优先拿default的值,发生错误
// msg:{ // type:String, // default:‘hello‘ // } } } </script> <style scoped> .msgBox{ position: fixed; top:50%; left:50%; padding:5px 20px; border-radius: 3px; background: red; color:white; } .container{ width:100%; height:100%; } </style>

在components文件夹下的toast文件夹中的toast.js:

import toast from "./toast"
import Vue from "vue"

let toastDemo=Vue.extend(toast);

function sendToast(msg,duration=2000){
  let demo=new toastDemo({
    el:document.createElement("div"),
    data(){
      return{
        msg:msg,
        show:true
      }
    }
  })
  document.body.appendChild(demo.$el)
  setTimeout(()=>{
    demo.show=false
  },duration)
}

export default sendToast

在main.js中将其添加到Vue原型对象:

import Vue from "vue"
import toast from "@/components/toast/toast.js"

Vue.prototype.$toast=toast

在组件中使用:

<button @click="sendMsg">显示toast</button>

methods:{
 sendMsg(){
   this.$toast(‘可以显示啦!‘,3000);
   //第二个参数可以写显示时长,由于在函数中有默认值,也可以省略
 }
}

使用extend动态渲染组件

标签:app   fixed   imp   渲染   内容   默认   vue   style   new   

原文地址:https://www.cnblogs.com/qingsui/p/13099023.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!