前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >toast 弹窗 内容获取_javascript弹出框

toast 弹窗 内容获取_javascript弹出框

作者头像
全栈程序员站长
发布2022-11-08 19:21:20
6010
发布2022-11-08 19:21:20
举报

大家好,又见面了,我是你们的朋友全栈君。

使用js封装一个全局Toast提示弹窗组件,不使用UI库

代码语言:javascript
复制
export const Toast = { 

data() { 

return { 

}
},
mounted() { 

},
methods: { 

// Toast 消息提示
toast(obj) { 

let { 
 text, duration, img } = obj || { 
};
// obj 为字符串
typeof obj === 'string' && (text = obj);
var toast = document.createElement("div");
let imgDom = document.createElement("img"); // 图片
let textDom = document.createElement("p");  // 提示文案
textDom.innerHTML = text || '';
imgDom.src = img;
imgDom.style.cssText = "width:50px;";
toast.style.cssText =
"font-size: 16px;color: rgb(255, 255, 255);background-color: rgba(0, 0, 0, 0.6);padding: 10px 15px;margin: 0 0 0 -60px;border-radius: 4px;position: fixed;top: 50%;left: 50%;width: 130px;text-align: center;";
img && toast.appendChild(imgDom);
toast.appendChild(textDom);
obj && document.body.appendChild(toast);
setTimeout(function () { 

var d = 0.5;
toast.style.transition ="transform " + d + "s ease-in, opacity " + d + "s ease-in";
toast.style.webkitTransition ="-webkit-transform " + d + "s ease-in, opacity " + d + "s ease-in";
toast.style.opacity = "0";
setTimeout(function() { 

obj && document.body.removeChild(toast);
}, d * 1000);
}, duration || 3000);
}
},
}

使用:这里我是用vue的mixins混入的方式

代码语言:javascript
复制
// 引入
import { 
Toast} from '../../../components/mixins/toast';
mixins: [Toast],
// 调用
this.toast('暂无消息'); // 直接传字符串
this.toast({ 
text:'暂无消息', duration: 2000, img: '图片路径'}); // 支持对象形式,自定义图片,文案,过渡时间

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022年9月25日 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档