脚本宝典收集整理的这篇文章主要介绍了vue-typescript-toast (一款适用于pc平台的简单toast),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一款简单的适用于pc端的vue-toast/并且匹配typescript的模式.效果是默认在屏幕的垂直居中位置.
新项目要求用typescript+vue+elementui的模式来搭建pc项目,最初踩了好多坑.
产品说提示不想用element-ui的提示. 打算用toast的形式.
所以就自己写了一个pc的toast(又能结合ts)
然后放上来和大家分享一下,
最初是自己写的一个component,
后面想着以后也方便用,就试了一下以npm包传上去.
toast源码
这款toast是基于vue使用的,所以需要在vue的大环境下去安装使用.
npm i easytoast-f-vue --save
//toast文案
text?: string;
//持续时间(ms)
duration?: number;
//蒙层背景色(支持直接写色号,rgb,rgba,英文单词)
background?: string;
//toast背景色
toastBackground?: string;
//toast文字颜色
textColor?: string;
//toast文字排列(适用于当出现文字太长出现换行)
textAlign?: textAlign;
//toast的最大宽度(默认为400px)
max?: number;
//支持html输入(预留允许输入html串)
content?: string;
在入口的main.js或者main.ts中,
import myToast from 'easytoast-f-vue';
Vue.use(myToast);
然后在具体需要使用的页面中,
//普通的文字toast
this.$ftoast({
text: 'TOAST',
background: 'rgba(0, 0, 0, .5)',
textColor: 'pink',
toastBackground: 'rgba(255, 255, 255, 1)'
})
//html式的toast
this.$ftoast({
text: 'TOAST',
background: 'rgba(0, 0, 0, .5)',
textColor: 'pink',
toastBackground: 'rgba(255, 255, 255, 1)',
content: '<div class="t"><p class="r">红色的字</p><p>蓝色的字</p></div>'
})
普通的toast
html的toast (我发现如果html的toast要使用图片资源,需要放在静态文件夹,这种固定路径的才能识别到)
顺便讲讲怎么简单发npm包
以上是脚本宝典为你收集整理的vue-typescript-toast (一款适用于pc平台的简单toast)全部内容,希望文章能够帮你解决vue-typescript-toast (一款适用于pc平台的简单toast)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。