Element-ui簡單使用

么是Element-ui？

根據官網的說法，Element-ui，是一套為開發者、設計師和產品經理準備的基于Vue 2.0的由餓了么公司出品的桌面端組件庫。

官網：https://element.eleme.cn/#/zh-CN

如何使用？

1、創建文件夾element-ui。

2、下載組件。

npm install vue #安裝Vue
npm i element-ui -S #安裝Element-ui

3、為了代碼更加清爽，可以將主要依賴vue.min.js和element-ui包放入lib目錄中，lib目錄需手動創建。

4、搭建第一個UI界面入門程序。

<!DOCTYPE html>
<html>
?
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>
?
<body>
  <div id="app">
    <!-- 所有的el-開頭的標簽都是elementui的組件！ -->
    <el-button @click="visible=true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>
?
<script>
  new Vue({
    el: '#app',
    data: function () {
      return { visible: false }
    }
  })
</script>
?
</html>

官網基本組件測試

1、容器，拿來即用即可。

2、圖標，el內置了許多圖標，使用icon="iconname"屬性即可使用，也推薦使用https://fontawesome.dashgame.com/這個網站中的圖標。

<el-button @click="visible=true" icon="el-icon-search">Button</el-button>

3、對于后臺程序員來說，大部分情況下都是在對表單進行操作。el幾乎內置了開發中會使用的所有表單組件。

前端怎么寫？

對于一些后臺開發人員來說，可能會存在開發一個項目不知道怎么開始第一步的問題，其原因大概是：

沒有清晰的界面定義。
不會設計數據庫。

對于第一個問題，Element-ui組件可以直接套用，我們平時可以多去看看其他網站如何設計，借鑒學習。

至于第二個問題，其實也是因為第一個問題沒解決，當我們把前端寫好之后，數據庫的結構自然就出來了。解決了這兩個問題，剩下的就是后臺的CRUD了，這是我們最熟悉的部分。

編寫前端的基本套路：

見過足夠多的組件，拼接組件，這樣就形成了網頁的基本形狀。
修改CSS即可。

設計多級下拉菜單的聯動效果

如下圖所示，現在要實現第一個下拉框選擇不同的選項時，第二個下拉框中的下拉選項也要隨之發生變化的效果，這時可以使用級聯選擇器（cascader）來實現。

<div class="block">
  <span class="demonstration">默認 click 觸發子菜單</span>
  <el-cascader
    v-model="value"
    :options="options"
    @change="handleChange"></el-cascader>
</div>
<div class="block">
  <span class="demonstration">hover 觸發子菜單</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
</div>
?
<script>
  export default {
    data() {
      return {
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '設計原則',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反饋'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '導航',
            children: [{
              value: 'cexiangdaohang',
              label: '側向導航'
            }, {
              value: 'dingbudaohang',
              label: '頂部導航'
            }]
          }]
        }
  }

所有的前端彈窗建議都使用layer組件來實現。

Access中，有多個組合框，每個組合框的的值受限于上一層組合框的值

即組合框的聯動。如在組合框選擇了一個省份后，下一層組合框智能篩選這個省份的市

設置方法：

一、建立基礎表，這里我們建立3個表：省，市，縣（區）這3個表

二、窗體設置

1、省設置

① 窗體設計圖如下：創建3個組合框，分別命名為省，市，縣。窗體保存為命名為“窗體12”

② 設置省的組合框的行來源：

SELECT 省.省編號, 省.省名 FROM 省;

同時設置組合框屬性，列數為2，列寬為0;2

③ 設置組合框屬性更新后事件為：

Private Sub 省_AfterUpdate()
Me.市.Requery
Me.市=Null
Me.縣=Null
End Sub

這里的代碼主要是當選擇省份后，自動刷新市，同時設置市和縣為空

2、設置市

如上面同理，設置市的行來源為

SELECT 市.市編號, 市.市名 FROM 市
WHERE (((市.省編號)=[forms]![窗體12]![省]));

這里同時要記得設置列數和列寬。

市組合框的更新后事件為：

Private Sub 市_AfterUpdate()
Me.縣.Requery
Me.縣=Null
End Sub

3、設置縣

設置縣的行來源為：

SELECT 縣名.縣名 FROM 縣名
WHERE (((縣名.上級市)=[forms]![窗體12]![市]));

最后效果圖：

完整源碼下載：

http://www.office-cn.net/access-frmother/353.html

一篇文章我們介紹了一個html/xml解析器——htmlparser，這篇文章我們介紹另外一個解析模塊htmlparser2，后者是對前者的重構，同時對前者的API做了部分兼容。

用法簡介

安裝

const { Parser }=require('htmlparser2');
const parser=new Parser(handler, options);
parser.parseComplete('html/xml內容');

寫法

const { Parser }=require('htmlparser2');
const parser=new Parser(handler, options);
parser.parseComplete('html/xml內容');

htmlparser2提供了一個解析器——Parser，初始化它至少需要一個handler，options是可選的。

handler是一個對象，在這個對象上可以設置很多的鉤子函數，Parser解析時會在每個階段運行對應的鉤子函數。

以下是可以設置的所有的鉤子函數，

onopentag(<str> name, <obj> attributes)

onopentagname(<str> name)

onattribute(<str> name, <str> value)

ontext(<str> text)

onclosetag(<str> name)

onprocessinginstruction(<str> name, <str> data)

oncomment(<str> data)

oncommentend()

oncdatastart()

oncdataend()

onerror(<err> error)

onreset()

onend()

htmlparser模塊是通過正則表達式來解析html內容的，而htmlparser2則不同，它會按順序讀取html的每個字符，并且推測后面字符是標簽名、屬性還是其他的類型，所以htmlparser2在解析完每一個標簽后都會運行相應的鉤子函數。

先來看一下例子，

圖1

圖1中設置了所有的鉤子函數以便來說明每個鉤子函數的作用，運行一下，

圖2

對照圖1和圖2就能看出來每個鉤子函數的運行時機，這其中有以下幾個鉤子函數需要注意一下。

oncdatastart和oncdataend會在解析<![CDATA[文本]]>標簽時觸發，但是觸發的前提是選項設置了recognizeCDATA=true或者xmlMode=true；
onprocessinginstruction會在解析<!xxyy>或者<?xxyy>這樣的標簽時觸發，xx和yy中間可以有分隔符（斜杠或者空格），分隔符前面的字符串就是鉤子函數中的name的值；
運行parseComplete方法會執行reset鉤子函數，如果僅僅執行parser的write或者end方法并不會執行reset方法。

除了自定義handler以外，htmlparser2還提供了幾個handler，比如DomHandler，用法如下：

圖3

運行一下，我們看看結果，

圖4

如果4所示，DomHandler處理的結果是以數組的形式輸出的，在每個單元數據中還可以拿到上一個、下一個以及父節點的數據。

htmlparser2還可以通過操作流Stream解析內容，寫法如下：

圖5