摘要：組件監(jiān)聽(tīng)自定義事件。組件觸發(fā)自定義事件。生命周期鉤子函數(shù)，后組件的所有的事件監(jiān)聽(tīng)器會(huì)被移除。技術(shù)點(diǎn)總結(jié)組件設(shè)計(jì)的思想包括單數(shù)據(jù)流事件中心，核心是組件通信。完善給彈出日期面板和關(guān)閉日期面板增加組件自定義事件即調(diào)用觸發(fā)和事件。

預(yù)覽

組件庫(kù)官網(wǎng)
github地址
如果喜歡各位小哥哥小姐姐給個(gè)小星星鼓勵(lì)一下哈， 請(qǐng)勿在生產(chǎn)環(huán)境中使用，供學(xué)習(xí)&交流~~

完整項(xiàng)目目錄結(jié)構(gòu)

git clone到本地安裝依賴后，執(zhí)行npm run serve進(jìn)行本地組件庫(kù)開(kāi)發(fā)，npm run docs:dev進(jìn)行組件庫(kù)官網(wǎng)開(kāi)發(fā)。一般在src/demo.vue進(jìn)行單個(gè)組件測(cè)試通過(guò)后，再引入到.vuepress/components中放入組件庫(kù)官網(wǎng)。

├─docs               // vuepress開(kāi)發(fā)目錄
│  ├─.vuepress
│  │  ├─components   // 在markdown中可以使用的vue組件
│  │  ├─dist         // vuepress打包目錄
│  │  │  ├─assets
│  │  │  │  ├─css
│  │  │  │  ├─img
│  │  │  │  └─js
│  │  │  ├─components
│  │  │  │  ├─basic
│  │  │  │  ├─form
│  │  │  │  ├─navigation
│  │  │  │  ├─notice
│  │  │  │  └─other
│  │  │  └─guide
│  │  │
│  │  ├─config.js    // vurepess配置修改入口,包括左邊sidebar,右上方nav導(dǎo)航菜單,favicon等
│  │  ├─style.style  // 覆蓋vuerpress默認(rèn)主題樣式
│  │  └─public       //公共資源入口，如favicon
│  ├─static
│  │  ├─img
│  │  └─js
│  └─views          // vuepress視圖文件，格式是markdown
│      ├─components
│      │  ├─basic
│      │  ├─form
│      │  ├─navigation
│      │  ├─notice
│      │  └─other
│      ├─design
│      │  └─color
│      └─guide
├─src              // 組件庫(kù)源碼目錄
│  ├─button
│  ├─cascader
│  ├─collapse
│  ├─container
│  ├─datepicker
│  ├─form
│  ├─icon
│  ├─layout
│  ├─notice
│  ├─plugins
│  ├─slide
│  ├─tab  
│  ├─step
│  ├─sticky
│  └─index.js    // 組件庫(kù)源碼組件入口文件,執(zhí)行npm run build的目標(biāo)文件
├─package.json   // 與npm發(fā)布相關(guān)，記錄版本號(hào)，包入口文件地址

學(xué)習(xí)組件庫(kù)制作會(huì)收獲

學(xué)習(xí)組件封裝技能，良好的接口設(shè)計(jì), 掌握組件設(shè)計(jì)套路

夯實(shí)js/css基礎(chǔ)

深入對(duì)vue的理解

制作流程

組件設(shè)計(jì)/開(kāi)發(fā)

發(fā)布npm

制作官網(wǎng)展示

組件設(shè)計(jì)/開(kāi)發(fā)

頻繁涉及到的vue api包括

$children ： 獲取當(dāng)前組件子組件。

$parent： 獲取當(dāng)前組件父組件。

$options: 用于當(dāng)前 Vue 實(shí)例的初始化選項(xiàng), 可以用此選項(xiàng)獲得組件的name。

$refs： 一個(gè)對(duì)象，持有注冊(cè)過(guò) ref 特性 的所有 DOM 元素和組件實(shí)例。

$el: Vue 實(shí)例使用的根 DOM 元素。

provide & inject ：這對(duì)選項(xiàng)需要一起使用，允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴,注意不是響應(yīng)式的。注入的對(duì)象可以是個(gè)vue實(shí)例的eventBus。

$on： 組件監(jiān)聽(tīng)自定義事件。

$emit： 組件觸發(fā)自定義事件。

.sync：語(yǔ)法糖，單向數(shù)據(jù)流中，父組件監(jiān)聽(tīng)到子組件修改props的意圖后父組件修改傳入的props，用了.sync不需要顯式在父組件監(jiān)聽(tīng)組件內(nèi)部觸發(fā)的自定義事件去修改值, 父組件只要寫(xiě):x.sync="bindValue", 注意此時(shí)子組件觸發(fā)的事件必須是"update:x"此語(yǔ)法糖才生效。

updated 生命周期鉤子函數(shù)，由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子, 在父子組件通信可能用到。

beforeDestoryed/ destory 生命周期鉤子函數(shù)，destory后組件的所有的事件監(jiān)聽(tīng)器會(huì)被移除。注意:如果是自己在組件內(nèi)部對(duì)dom增加了事件監(jiān)聽(tīng)，組件銷(xiāo)毀的時(shí)候需要自己手動(dòng)接觸自己另外添加上去的監(jiān)聽(tīng)程序。而且組件銷(xiāo)毀，dom元素還被保留在頁(yè)面，需要手動(dòng)清除，可以調(diào)用原生js api, node.remove()清除dom節(jié)點(diǎn)。

原生js api包括：

target.addEventListener(type, listener[, useCapture])/removeEventListener 由于這是 DOM2 規(guī)范的基本內(nèi)容，幾乎所有瀏覽器都支持這個(gè)，而且不需要特殊的跨瀏覽器兼容代碼。

Node.contains()返回的是一個(gè)布爾值，來(lái)表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn)。多用于事件監(jiān)聽(tīng)判斷是否點(diǎn)擊了目標(biāo)區(qū)域。

window.scrollY 獲取文檔垂直方向的滾動(dòng)距離。

Element?.get?Bounding?Client?Rect() 返回元素的大小及其相對(duì)于視口的位置，返回一個(gè)對(duì)象，包括width/height/left/right/top/bottom。多用于計(jì)算定位。

技術(shù)點(diǎn)總結(jié)

組件設(shè)計(jì)的思想包括單數(shù)據(jù)流/ eventBus事件中心，核心是組件通信。

單數(shù)據(jù)流: 數(shù)據(jù)的改變是單向的，即通過(guò)props的方式，只能讓父組件來(lái)修改數(shù)據(jù)，子組件不能主動(dòng)修改props。這樣的例子如在collapse/tab/slide組件中，讓父組件來(lái)控制選中的值。單向數(shù)據(jù)流的思想讓數(shù)據(jù)修改更好設(shè)計(jì)，邏輯更加清晰。

vue插件開(kāi)發(fā)：什么時(shí)候用插件開(kāi)發(fā)");

在原有的popover組件上開(kāi)發(fā)
點(diǎn)擊一個(gè)元素A(輸入框)后可以彈出元素B（日期面板）

生成日期面板
生成7*6=42個(gè)日期，6行是為了確保一個(gè)月都能在面板上完整顯示。這里計(jì)算最方便的做法是用時(shí)間戳，計(jì)算出這個(gè)月第一天時(shí)間戳和這一天周幾，就可以一次性計(jì)算出這42個(gè)日期。不用算上個(gè)月下個(gè)月分三段算，這樣的問(wèn)題是還要考慮邊界情況，如剛好出現(xiàn)上一年下一年等，麻煩容易出bug。這42個(gè)日期我們?cè)赾omputed用visibleDays表示。

visibleDays () {
   let { year, month } = this.display
   let defaultObj = new Date(year, month, 28)
   var curMonthFirstDay = helper.getMonthFirstDay(defaultObj)
   var curMonthFirstDayDay = helper.getDay(curMonthFirstDay) === 0 ? 7 : helper.getDay(curMonthFirstDay)
   let x = curMonthFirstDayDay - 1 // 前面需要補(bǔ)多少位
   var arr = []
   for (let i = 0; i < 42; i++) {
     arr.push(new Date(curMonthFirstDay.getTime() + (-x + i) * 3600 * 24 * 1000))
   }
   return arr
 },

props接受value, 類(lèi)型是date
日期面板上的日期渲染的時(shí)候加上一個(gè)計(jì)算的class, 分別加上"today","selected-date","available","prev-month","next-month"，進(jìn)行樣式上的區(qū)分

實(shí)現(xiàn)選中日期
告訴父組件修改數(shù)據(jù)意圖讓父組件修改傳入的props，對(duì)應(yīng)使用我們組件的時(shí)候使用, 這里的基礎(chǔ)知識(shí)是組件上的v-model是個(gè)語(yǔ)法糖，v-model="x"會(huì)被解析成:value="a" @input="a=$event"。同時(shí)面板上輸入框顯示的數(shù)據(jù)也要跟著變化，所以這里用計(jì)算屬性，如在computed中用formattedValue表示。

 formattedValue: {
     return this.value instanceof Date ? helper.getFormatDate(this.value) : ""
 }

實(shí)現(xiàn)點(diǎn)擊上一年/月，下一年/月
我們需要知道當(dāng)前展示的是哪一年哪一個(gè)月，這個(gè)數(shù)據(jù)是組件內(nèi)部維護(hù)的，所以在data申明一個(gè)display對(duì)象

display: {
     year: (this.value && this.value.getFullYear()) || new Date().getFullYear(),
     month: (this.value && this.value.getMonth()) || new Date().getMonth()
   }

點(diǎn)擊的時(shí)候即修改display對(duì)象的year/month，因?yàn)関isibleDays也是計(jì)算屬性，依賴display對(duì)象，所以點(diǎn)擊上一年/月，下一年/月，渲染的日期也跟著變。

實(shí)現(xiàn)選擇年
年面板的制作，生成12個(gè)年，點(diǎn)擊第1（12）個(gè)年渲染出上（下）12個(gè)年。這里只需要給渲染出來(lái)的年的第一個(gè)和最后一個(gè)dom元素綁定事件，事件監(jiān)聽(tīng)程序傳入當(dāng)前點(diǎn)擊的元素的值，即可計(jì)算出上或下一個(gè)12年。 同理點(diǎn)擊年的時(shí)候用$emit通知父組件修改value

實(shí)現(xiàn)選擇月
直接寫(xiě)死12個(gè)月份，同理點(diǎn)擊月的時(shí)候用$emit通知父組件修改value

增加住面板上【今天】和【清空】的按鈕
點(diǎn)擊的時(shí)候用$emit通知父組件修改value，new Date()和""

細(xì)節(jié)處理
用戶選中完日期后要關(guān)閉面板 用戶選了年后點(diǎn)擊周?chē)瞻讌^(qū)域日期面板關(guān)閉，第二次點(diǎn)擊進(jìn)來(lái)應(yīng)該默認(rèn)展示日面板

用戶可以修改輸入框里面的值，需要判斷有效性
有效的話$emit通知父組件改值，無(wú)效的話當(dāng)失去焦點(diǎn)的時(shí)候變回原來(lái)的值，這里需要用原生js去給input修改value。注意這里直接改formattedValue的話無(wú)效，雖然輸入框的值綁定了:value="formattedValue",但是因?yàn)閒ormattedValue是計(jì)算屬性，依賴于this.value，在用戶輸入無(wú)效值的情況下this.value不會(huì)改變，因此界面不會(huì)被更新，所以需要手動(dòng)改value的值。

setValueManually ($event) {
   if (!helper.isValidDate($event)) {
     this.$refs.inputWrapper.$refs.input.value = this.isDate(this.value) ? helper.getFormatDate(this.value) : ""
     return
   }
   this.$emit("input", new Date($event))
 }

完善
給彈出日期面板和關(guān)閉日期面板增加組件自定義事件, 即調(diào)用$emit觸發(fā)"showDatepicker"和"closeDatepicker"事件。

發(fā)布npm

使用vue cli3 的庫(kù)模式打包代碼，修改package.json 中的"build": "vue-cli-service build --target lib --name sakura src/index.js"，打包后輸出umd構(gòu)建版本, 參考vue cli。 什么是umd? 統(tǒng)一模塊定義，可以兼容common.js(node端規(guī)范)/ AMD(瀏覽器端規(guī)范)/ ES6(node端不完全支持)等多種模塊化方案，確保代碼在各種環(huán)境下能被運(yùn)行。

File                     Size                     Gzipped

dist/sakura.umd.min.js    13.28 kb                 8.42 kb
dist/sakura.umd.js        20.95 kb                 10.22 kb
dist/sakura.common.js     20.57 kb                 10.09 kb
dist/sakura.css           0.33 kb                  0.23 kb

在package.json指明模塊入口"main":"dist/sakura.umd.min.js"

 "name": "heian-sakura-ui",
  "version": "0.0.6",
  "private": false,
  "main":"dist/sakura.umd.min.js",
  "description": "an UI framework based on Vue.js",

在npm 上注冊(cè)一個(gè)用戶

在命令行輸入，注意每次發(fā)布都要修改package.json中的 "version": "0.0.x"，"private"必須設(shè)置成false才能發(fā)布

npm adduser // 提示輸入注冊(cè)的用戶名
npm publish

官網(wǎng)制作

使用vue press

在原有項(xiàng)目中使用

# 安裝依賴
npm install -D vuepress
# 創(chuàng)建一個(gè) docs 目錄
mkdir docs

在package.json中進(jìn)行腳本配置

{
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}
}

然后運(yùn)行npm run docs:dev即可訪問(wèn)

簡(jiǎn)單配置
在docs/.vuepress下新建文件config.js

module.exports = {
    base:"/sakura-ui/",
    title: "Sakura UI",
    description: "Inspiration from heian sakura",
    head: [
      ["link", { rel: "icon", href: "/favicon.ico" }]
    ],
    themeConfig: {
      nav: [
        { text: "Home", link: "/" },
        { text: "Github", link: "https://github.com/Firenzia/sakura-ui/" },
      ],
      sidebar: [
          {
              title: "開(kāi)發(fā)指南",
              collapsable: true,
              children: [
                "views/guide/install.md",
                "views/guide/get-started.md"
              ]
            },
            {
              title: "設(shè)計(jì)",
              collapsable: true,
              children: [
                "views/design/color/",
              ]
            },
            {
              title: "組件",
              collapsable: true,
              children: [
                "views/components/basic/",
                "views/components/form/",
                "views/components/navigation/",
                "views/components/notice/",
                "views/components/other/"
              ]
            },
        ]
      }
  }

使用vue組件
官網(wǎng)中提到，所有在 .vuepress/components 中找到的 *.vue 文件將會(huì)自動(dòng)地被注冊(cè)為全局的異步組件，可以在markdown中引用, vue文件中的代碼高亮我用的是vue-highlightjs 查看這里

編寫(xiě)文檔
由于所有的頁(yè)面在生成靜態(tài) HTML 時(shí)都需要通過(guò) Node.js 服務(wù)端渲染，對(duì)于SSR 不怎么友好的組件（比如包含了自定義指令），你可以將它們包裹在內(nèi)置的 ClientOnly 組件中，而且注意因?yàn)槭莝sr,組件內(nèi)部beforeCreate, created生命周期鉤子函數(shù)訪問(wèn)不到瀏覽器 / DOM 的 API，只能在beforeMount和mounted中調(diào)用。

---
title: "Basic 基礎(chǔ)"
sidebarDepth: 2
---
## Icon 圖標(biāo)

  
Attributes
| 參數(shù)| 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
| :------ | ------ | ------ | ------ | ------ |
| name | 圖標(biāo)名稱(chēng) | string |- | - |
| color | 圖標(biāo)顏色, 支持常見(jiàn)顏色和十六進(jìn)制顏色 | string |- | - |

覆蓋默認(rèn)主題樣式
在.vuepress下新增style.styl進(jìn)行覆蓋。

部署到github
官網(wǎng)上介紹的很清楚，點(diǎn)這里。 在項(xiàng)目根目錄下新增deploy.sh,windows下直接命令行運(yùn)行./deploy.sh即可發(fā)布到github pages上。

結(jié)語(yǔ)

如果你能看到這里，非常感謝，第一次寫(xiě)文章，希望大家多多提出意見(jiàn)。組件庫(kù)還有很多細(xì)節(jié)需要完善，比如里面css的類(lèi)名命名我沒(méi)做的很規(guī)范，大部分組件都是自己測(cè)試沒(méi)有測(cè)到復(fù)雜或特殊場(chǎng)景，還有很多功能還沒(méi)支持。通過(guò)這段時(shí)間制作組件庫(kù)，自己的技術(shù)有了一定提升，官網(wǎng)的展示融入了自己的一點(diǎn)想法和設(shè)計(jì)，希望大家喜歡~~ 謝謝！