Vue.extend 编写 Toast

2022-02-09 22:32:43 阅读：182 来源： 互联网

标签：Toast toast Vue extend content vue message toastComp

home.vue

<template>
  <div>
    <el-button @click="toToast"> 显示 </el-button>
  </div>
</template>

<script>
import { showToast } from "./toast.js";
export default {
  methods: {
    toToast() {
      showToast("测试", 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

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.toShow(content)
    setTimeout(() => {
        toastComp.toClose()
        toastComp.$el.parentNode.removeChild(toastComp.$el) 
    }, delay);
}

toast.vue

<template>
  <!-- <div class="toast" v-if="show">{{message}}</div> -->
  <div class="toast" v-show="show">{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message:'',
    };
  },
  methods: {
    toShow(content) {
        this.message=content
      this.show = true;
    },
    toClose() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  top: 10px;
  left: 50%;
  padding: 10px 20px;
  background: rgba(22, 21, 21, 0.658);
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  min-width: 80px;
  text-align: center;
}
</style>

标签：Toast,toast,Vue,extend,content,vue,message,toastComp
来源： https://www.cnblogs.com/7c89/p/15877077.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue.extend 编写 Toast