VUE一款适用于pc平台的简单toast

新项目要求用typescript+vue+elementui的模式来搭建pc项目,最初踩了好多坑.
产品说提示不想用element-ui的提示. 打算用toast的形式.
所以就自己写了一个pc的toast(又能结合ts) 
然后放上来和大家分享一下,

最初是自己写的一个component,
后面想着以后也方便用,就试了一下以npm包传上去.
toast源码

安装

这款toast是基于vue使用的,所以需要在vue的大环境下去安装使用.

npm i easytoast-f-vue --save

参数

1.  
   //toast文案
2.  
   text?: string;
3.  
   //持续时间(ms)
4.  
   duration?: number;
5.  
   //蒙层背景色(支持直接写色号,rgb,rgba,英文单词)
6.  
   background?: string;
7.  
   //toast背景色
8.  
   toastBackground?: string;
9.  
   //toast文字颜色
10.  
    textColor?: string;
11.  
    //toast文字排列(适用于当出现文字太长出现换行)
12.  
    textAlign?: textAlign;
13.  
    //toast的最大宽度(默认为400px)
14.  
    max?: number;
15.  
    //支持html输入(预留允许输入html串)
16.  
    content?: string;

• 默认的duration是2s
• 默认的字体颜色是白色,toast背景是rgba(0,0,0,.5)
• 如果使用html片段,设置的text参数和textColor参数和textAlign参数和max参数会失效.
• 如果使用html片段,会校验是否有输入 script标签和a标签

使用

在入口的main.js或者main.ts中,

1.  
   import myToast from 'easytoast-f-vue';
2.  
   Vue.use(myToast);

然后在具体需要使用的页面中,

1.  
   //普通的文字toast
2.  
   this.$ftoast({
3.  
   text: 'TOAST',
4.  
   background: 'rgba(0, 0, 0, .5)',
5.  
   textColor: 'pink',
6.  
   toastBackground: 'rgba(255, 255, 255, 1)'
7.  
   })
8.  
    
9.  
   //html式的toast
10.  
    this.$ftoast({
11.  
    text: 'TOAST',
12.  
    background: 'rgba(0, 0, 0, .5)',
13.  
    textColor: 'pink',
14.  
    toastBackground: 'rgba(255, 255, 255, 1)',
15.  
    content: '<div class="t"><p class="r">红色的字</p><p>蓝色的字</p></div>'
16.  
    })

普通的toast

html的toast (我发现如果html的toast要使用图片资源,需要放在静态文件夹,这种固定路径的才能识别到)

---

发npm包

顺便讲讲怎么简单发npm包

• 首先先到官网注册一下账号 npm官网
• 创建一个文件夹,然后打开终端在此处进行 npm init 的操作.
• 里面会涉及到(name, version, 等等的信息填写) 不断的下一步即可.
• init完会生成一个package.json的文件 (和我们cli出来的package.json可以共用)

1. 此处要注意一下. main这个参数是指一个路径, 当别人import你这个包的时候,的入口文件是哪个.
2. 如果涉及到typescript的types(d.ts文件时), 要在package.json里面增加一个 "typings"参数路径,引用向对应的d.ts即可
3. 所有东西都可以自行在package.json里面修改.

• 然后把相关的代码自行拷贝到这个文件夹中.
• 操作完执行 npm login 进行登录操作.
• 登录完毕后 执行 npm publish 就可以发布了.
• 后续的更新操作是遵循这样的规则.

1. 有分3种形式 npm version (patch, minor, major)
2. patch是指小补丁 从 1.0.0 更新为 1.0.1
3. minor是指小改动 从 1.0.0 更新为 1.1.0
4. major是指大改动 从 1.0.0 更新为 2.0.0
5. 选择完对应的进行 npm version ** 然后再执行一次 npm publish 即可.