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

一款簡(jiǎn)單的適用于pc端的vue-toast/并且匹配typescript的模式.效果是默認(rèn)在屏幕的垂直居中位置.

新項(xiàng)目要求用typescript+vue+elementui的模式來(lái)搭建pc項(xiàng)目,最初踩了好多坑.
產(chǎn)品說(shuō)提示不想用element-ui的提示. 打算用toast的形式.
所以就自己寫了一個(gè)pc的toast(又能結(jié)合ts)
然后放上來(lái)和大家分享一下,

最初是自己寫的一個(gè)component,
后面想著以后也方便用,就試了一下以npm包傳上去.
toast源碼

這款toast是基于vue使用的,所以需要在vue的大環(huán)境下去安裝使用.

npm i easytoast-f-vue --save

  //toast文案
  text?: string;
  //持續(xù)時(shí)間(ms)
  duration?: number;
  //蒙層背景色(支持直接寫色號(hào),rgb,rgba,英文單詞)
  background?: string;
  //toast背景色
  toastBackground?: string;
  //toast文字顏色
  textColor?: string;
  //toast文字排列(適用于當(dāng)出現(xiàn)文字太長(zhǎng)出現(xiàn)換行)
  textAlign?: textAlign;
  //toast的最大寬度(默認(rèn)為400px)
  max?: number;
  //支持html輸入(預(yù)留允許輸入html串)
  content?: string;

默認(rèn)的duration是2s

默認(rèn)的字體顏色是白色,toast背景是rgba(0,0,0,.5)

如果使用html片段,設(shè)置的text參數(shù)和textColor參數(shù)和textAlign參數(shù)和max參數(shù)會(huì)失效.

如果使用html片段,會(huì)校驗(yàn)是否有輸入 script標(biāo)簽和a標(biāo)簽

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

import myToast from "easytoast-f-vue";
Vue.use(myToast);

然后在具體需要使用的頁(yè)面中,

//普通的文字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: "
紅色的字
藍(lán)色的字
"
})

普通的toast

html的toast (我發(fā)現(xiàn)如果html的toast要使用圖片資源,需要放在靜態(tài)文件夾,這種固定路徑的才能識(shí)別到)

順便講講怎么簡(jiǎn)單發(fā)npm包

首先先到官網(wǎng)注冊(cè)一下賬號(hào) npm官網(wǎng)

創(chuàng)建一個(gè)文件夾,然后打開終端在此處進(jìn)行 npm init 的操作.

里面會(huì)涉及到(name, version, 等等的信息填寫) 不斷的下一步即可.

init完會(huì)生成一個(gè)package.json的文件 (和我們cli出來(lái)的package.json可以共用)

此處要注意一下. main這個(gè)參數(shù)是指一個(gè)路徑, 當(dāng)別人import你這個(gè)包的時(shí)候,的入口文件是哪個(gè).

如果涉及到typescript的types(d.ts文件時(shí)), 要在package.json里面增加一個(gè) "typings"參數(shù)路徑,引用向?qū)?yīng)的d.ts即可

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

然后把相關(guān)的代碼自行拷貝到這個(gè)文件夾中.

操作完執(zhí)行 npm login 進(jìn)行登錄操作.

登錄完畢后 執(zhí)行 npm publish 就可以發(fā)布了.

后續(xù)的更新操作是遵循這樣的規(guī)則.

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

patch是指小補(bǔ)丁 從 1.0.0 更新為 1.0.1

minor是指小改動(dòng) 從 1.0.0 更新為 1.1.0

major是指大改動(dòng) 從 1.0.0 更新為 2.0.0

選擇完對(duì)應(yīng)的進(jìn)行 npm version ** 然后再執(zhí)行一次 npm publish 即可.