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能夠共用)

1. 此處要注意一下. main這個參數是指一個路徑, 當別人import你這個包的時候,的入口文件是哪一個.
2. 若是涉及到typescript的types(d.ts文件時), 要在package.json裏面增長一個 "typings"參數路徑,引用向對應的d.ts便可
3. 全部東西均可以自行在package.json裏面修改.

• 而後把相關的代碼自行拷貝到這個文件夾中.
• 操做完執行 npm login 進行登陸操做.
• 登陸完畢後 執行 npm publish 就能夠發佈了.
• 後續的更新操做是遵循這樣的規則.

1. 有分3種形式 npm version (patch, minor, major)
2. patch是指小補丁 從 1.0.0 更新爲 1.0.1
3. minor是指小改動 從 1.0.0 更新爲 1.1.0
4. major是指大改動 從 1.0.0 更新爲 2.0.0
5. 選擇完對應的進行 npm version ** 而後再執行一次 npm publish 便可.