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;

默认的duration是2s

默认的字体颜色是白色,toast背景是rgba(0,0,0,.5)

如果使用html片段,设置的text参数和textColor参数和textAlign参数和max参数会失效.

如果使用html片段,会校验是否有输入 script标签和a标签

在入口的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: "
红色的字
蓝色的字
"
})

普通的toast

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

顺便讲讲怎么简单发npm包

首先先到官网注册一下账号 npm官网

创建一个文件夹,然后打开终端在此处进行 npm init 的操作.

里面会涉及到(name, version, 等等的信息填写) 不断的下一步即可.

init完会生成一个package.json的文件 (和我们cli出来的package.json可以共用)

此处要注意一下. main这个参数是指一个路径, 当别人import你这个包的时候,的入口文件是哪个.

如果涉及到typescript的types(d.ts文件时), 要在package.json里面增加一个 "typings"参数路径,引用向对应的d.ts即可

所有东西都可以自行在package.json里面修改.

然后把相关的代码自行拷贝到这个文件夹中.

操作完执行 npm login 进行登录操作.

登录完毕后 执行 npm publish 就可以发布了.

后续的更新操作是遵循这样的规则.

有分3种形式 npm version (patch, minor, major)

patch是指小补丁 从 1.0.0 更新为 1.0.1

minor是指小改动 从 1.0.0 更新为 1.1.0

major是指大改动 从 1.0.0 更新为 2.0.0

选择完对应的进行 npm version ** 然后再执行一次 npm publish 即可.