摘要：一款簡單的適用于端的并且匹配的模式效果是默認在屏幕的垂直居中位置新項目要求用的模式來搭建項目最初踩了好多坑產品說提示不想用的提示打算用的形式所以就自己寫了一個的又能結合然后放上來和大家分享一下最初是自己寫的一個后面想著以后也方便用就試了

一款簡單的適用于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 即可.