共计 1705 个字符，预计需要花费 5 分钟才能阅读完成。
一款简单的适用于 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: ‘<div class=”t”><p class=”r”> 红色的字 </p><p> 蓝色的字 </p></div>’
})
普通的 toast
html 的 toast (我发现如果 html 的 toast 要使用图片资源, 需要放在静态文件夹, 这种固定路径的才能识别到)
发 npm 包
顺便讲讲怎么简单发 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 即可.
