使用Vue.extend来动态创建Toast组件

作者: 小枫枫

临枫的项目经历分享给你们啦~

扫码交朋友

标签:

特别声明:文章有少部分为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

目录结构:

# |-- public                              
# |-- src                           
# |  --  |  -- components
# |  --  |  --  |-- Toast
# |  --  |  --  |  --  | --  Toast.js
# |  --  |  --  |  --  | --  Toast.vue
# |-- App.vue
# |-- main.js

 

先写一个Toast组件   Toast.vue

<template>
  <div class="Toast" :class="type" v-if="showToast">
    {{ message }}
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.Toast {
  position: fixed;
  left: 50%;
  top: 50%;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  animation: show-toast 0.2s;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

@keyframes show-toast {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.success {
  color: #67c23a;
  background: rgb(225, 243, 216);
}

.warning {
  color: #e6a23c;
  background: rgb(250, 236, 216);
}

.fail {
  color: #f56c6c;
  background: rgb(253, 226, 226);
}
</style>

 

Toast.js

 

import Vue from 'vue';
import Toast from './Toast.vue'//引入Toast组件
const ToastComponent = Vue.extend(Toast);//这样延伸出来的 可以如同new Vue({})一样玩
/**
 * params: showToast Boolean 是否显示toast
 * params: type String       toast提示类型 共normal success,fail,warning
 * params: message String    toast消息
 * params: duration Number   toast显示时间
 * */
function $Toast(message, duration = 3000, type = "normal", showToast = true) {
    const ToastDom = new ToastComponent({
        name: "Toast",
        el: document.createElement("div"),//将Toast组件放在一个div容器里
        data() {//这边创建了data 组件那边就不需要data了
            return {
                message: message,
                type: type,
                showToast: showToast
            }
        }
    })
    document.body.appendChild(ToastDom.$el);//使用原生方法插入到body中
    setTimeout(() => {
        ToastDom.showToast = false;//显示几秒后消失
    }, duration);
}
function initToast() {
    //挂在到this上全局可使用
    Vue.prototype.$Toast = $Toast
}
export default initToast;

 

main.js

 

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import Toast from './components/Toast/Toast.js';//引入就Toast.js
Vue.use(Toast);

new Vue({
  render: h => h(App),
}).$mount('#app')

 

项目中使用:

this.$Toast("成功弹出✔", 3000,"success");

 

 

 

源码下载 :

Demo.zip

本文最后更新于2021-5-8,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏

作者: 小枫枫, 转载或复制请以 超链接形式 并注明出处 小枫枫不疯喔
原文地址: 《使用Vue.extend来动态创建Toast组件》 发布于2021-5-8

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏