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: '<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 即可.
vue-typescript-toast (一款适用于pc平台的简单toast)相关推荐
- 一款适用于搭建内部培训平台的系统,开源了!
本项目系统是是一款适用于搭建内部培训平台的开源系统,企业培训方案,致力于为更多企业机构搭建私有化内部培训平台. 基于 Java + MySQL 开发,采用前后端分离模式,前台采用 React18 为核 ...
- 盘点13 款适用于 Windows PC的强大屏幕截图工具,您可能没有用过
您是否厌倦了在 Windows PC 上使用相同的旧屏幕截图工具?如果是这样,那么你很幸运!在这篇文章中,我们将介绍适用于 Windows PC 的 13 款屏幕截图工具. 从免费的轻型工具到具有强大 ...
- Lotus.Engine.Simulation.v5.06f 1CD(PC平台上用于模拟发动机运行表现的一款软件)
Lotus Engineering Software产品: Lotus.Base.Engine.Analysis.Tools.v4.02g 1CD(发动机制造前的理论性研究分析工具) Lotus.Co ...
- UWP平台和PC平台有什么区别
UWP平台和PC平台有什么区别 什么是UWP平台 定义不同 运行不同 起源不同 转载链接 什么是UWP平台 Universal Windows Platform(UWP)直译过来就是通用Win ...
- github snap android,GitHub - albuer/heapsnap: HeapSnap 是一个定位内存泄露的工具,适用于Android平台。...
HeapSnap 1.HeapSnap 是什么 HeapSnap 是一个定位内存泄露的工具,适用于Android平台. 主要特性如下: 对系统负载低 不需要修改目标进程的源代码 支持Andoroid上 ...
- windows商店_Windows 10商店迎来重大改变,PC平台游戏计划公布
UWP应用是微软推出Windows 10之后寄予厚望的全新格式应用,UWP最大的特点是可以跨平台使用,无论在手机.平板还是PC上,都可以自适应屏幕大小与操作方式,非常便捷. 不过自从Windows P ...
- xbox无线适配器驱动_雷蛇推出两款适用于新 Xbox 的游戏耳机:Kaira、Kaira Pro
IT之家11月6日消息 除 Razer Book 13 外,雷蛇还发布了两款适用于 Xbox Series S|X 的电竞耳机产品, Kaira Pro 还能配合 PC 以及移动设备使用. Kaira ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- 适用于 PC 的最佳 Android 操作系统(2022 版)
想知道您是否可以在 PC 上使用 Android 操作系统? 好吧,您来对了 Internet 上的位置. 您当然可以在您的 PC 上运行 Android. 我们已经尝试并测试了一些适用于 PC 的最 ...
最新文章
- 萨默尔机器人_沣东新城王寺街道《民法典》企业宣传活动走进西安萨默尔科技...
- 安装server 2012 时提示输入的密码不满足网络或组管理员设置的密码复杂度
- 从动力学角度看优化算法SGD:一些小启示
- ubuntu16.04 远程控制win10
- zoj3806Incircle and Circumcircle
- 【Python CheckiO 题解】Probably Dice
- java计算时间差距_硬计算和软计算之间的差异
- android 键盘 自动消失,android 软键盘 回到键 消失事件 监听
- Java 蓝桥杯 时间转换
- docker版mysql的使用和配置(2)——docker版mysql的dockerfile
- 《位置大数据隐私管理》—— 1.5 典型的位置隐私保护技术
- 佰马DTU连接远程服务器操作教程
- 华泰证券 python 自动交易软件_有哪些能做自动交易的软件?
- JSX、JSX的介绍、JSX特点、JSX的语法、XML基本语法
- c++ 运算符重载(简单易懂)
- 好玩的Ipaddian
- 通过集成腾讯 IM 来浅尝一下.net 6 的 MINI API
- 正易判讀 6-4 韓長庚 著
- 微信团队分享:微信支付代码重构带来的移动端软件架构上的思考
- win10 windows文件查找通配符