Element UI 細節方面 + 總結

時間 2019-11-26

標籤 element 細節方面總結简体版

原文原文鏈接

入職快半個月。公司業務也多多少少了解，期間的任務也很少，工做安排也不是很理想。

在這首先感謝一下個人組長，幫我解決了不少問題。也是組長帶我到如今，再次感謝。

公司在作iPad端應用，我上手時項目已經開發一半，技術用到vue+element UI。

前面說到效果，各個功能實現，這幾個功能也磨上了快半個月，以前並無接觸過element UI,覺得那就是複製粘貼的事，其實並無，還有不少細節方面的事須要本身去體會。

下面幾個問題就是在項目中所遇到的問題。在這裏總結一下，相信這個總結必定會有幫助。html

問題：

使用element ui dailog彈出框時，彈出框並不在vue掛載的app裏，自定義樣式覆蓋不了默認樣式。vue

解決：

把自定義樣式寫在了全局下，並使用了父級元素包裹，樣式生效。canvas

問題：

引用element UI 裏的dialog彈框，彈框出現纔會加載裏面的Dom，js在Dom尚未時，已經開始執行，沒法獲取並操做Dom元素數組

解決：

不使用element UI 裏到dialog彈框，手寫html元素，固定Dom結構，讓先加載Dom，後執行 js操做元素。瀏覽器
element UI dig log彈框，使用了open回調，動態生成了Dom以後，執行open裏的方法，open裏的方法是當即執行bash
不把js寫在父組件內，單獨抽離爲子組件便可，點擊出現彈框直接加載子組件，就不會出現執行問題app

問題：

element ui 給表單加入驗證，在el-col標籤裏面加入dom

解決：

首先給須要表單驗證的整個大form加入：model，：rules，
而後給須要驗證的輸入框加入el-form-item標籤包裹，加入prop
再給vue data中加入rules 規則，rules中是定義的prop
再給methods中寫入邏輯（點擊提交時，觸發方法執行） this.$refs['inHosForm'].validate((valid)會根據prop判斷表單是否填寫

1. <el-form ref="inHosForm" label-width="80px" label-position="left" class="form" :model="inHosData" :rules="rules">
 
 // :model 是定義v-model表單可輸入的字段，:rules 是驗證規則
 2. <el-col :span="12" class="collabel">
               <el-form-item label="可靠程度" prop="reliable">
                <el-input size="mini" class="inputWidth1" placeholder="請填寫" v-if="!previewMode" v-model="inHosData.reliable"></el-input>
              </el-form-item>
              <span v-if="previewMode">{{inHosData.reliable}}</span>
</el-col>

 3. data () {
    return {
      rules: {
        reliable: [
          { required: true, message: '請輸入可靠程度', trigger: 'blur' }
          // required爲小紅星標，意思是必填項
          //message爲表單未填時出來的提示紅字
          //trigger是element ui 裏 的方法，輸入框時用 blur ，isSlect多選框時用到change
        ],
    methods：{
 4. saveMedical () {
      // $refs['這裏的必定是：model中定義的']
      this.$refs['inHosForm'].validate((valid) => {
        if (valid) {}  // valid  表單未填寫爲false，填寫爲true
        }
}
    }
複製代碼

問題：

element UI 裏的dialog彈框，內容過多時，須要滾動條，全局下給.el-dialog__body 設置加上overflow：hidden不起做用，不會出現滾動條，隱藏的內容展現不了異步

解決：

elemnet ui 裏的diglog彈框，內容過多時，全局下給.el-dialog__body 設置overflow：auto；便可函數

問題：

element ui 裏有一些默認樣式並非很好，須要本身定義一些樣式，本身定義樣式覆蓋不了原來的

解決：

在標籤內定義樣式，寫行內樣式

<el-col :span=24 style="margin:20px"></el-col>
複製代碼

問題：

element ui 裏面的el-botton，設置禁用時，設置屬性disabled，設置時不起做用

<el-button :disabled="false">默認按鈕</el-button>
複製代碼

解決：

disabled接受布爾值，=後面不要加引號

<el-button :disabled=false>默認按鈕</el-button>
複製代碼

其餘問題：

問題：

canvas描線位置不精確，偏離正常位置，base64不能正常轉爲img圖片，this指向當前canvas實例、沒有指向vue實例，須要改變this指向，而且保證以前this指向canvas實例

解決：

抽離canvas封裝爲組件，引入組件調用，不被影響

問題：

發現表單驗證功能未100%完成，有缺陷，當前頁表單填寫完後，不能滑動，發現this指向的是vue實例，須要指向swiper實例，當前並無掛載相關swiper實例，

須要改變this指向，而且保證以前的this指向vue實例

解決：

閱讀swiper API文檔。

問題：base64轉成圖片，this不能指向img問題

解決：

base64轉成圖片，this指向構造函數，不能指向 vu e實例，轉換this，定義變量 let that = this，轉換this，完成在線簽名功能。

總結：

1. elemnet ui dailog彈框不要寫入標籤內，要寫在根元素中，不要被包裹，以下結構可參考

</el-col>
          </el-row>
            <el-dialog
            title="簽名"
            :visible.sync="centerDialogVisible"
            width="85%"
            center>
            <sign @draw_save="getSignImg"></sign>
          </el-dialog>
        </div>
複製代碼

2. 想要點擊某個元素出現dialog彈框時，就給某個元素加上element提供的點擊事件（），而後dialog中的定義（:visible.sync）也必須一致

3. 在沒有引入組件以前，是在父組件中寫js代碼，由於dialog彈框出現時，彈框裏面的dom纔會加載，js會當即執行，用了其提供的open方法也不是很理想，js代碼總會比dom先執行一步，我也放在定時器中讓js緩慢執行，而後清除定時器又成了問題，因此就放棄了這種寫法，改成組件引入。

4. 若是某個元素綁定了element提供的點擊事件以後，想又得綁定一個點擊事件，那麼把提供的方法寫在本身的方法中

<div class="canva" @click="isShow">

methods：{
    isShow（）{
        this.centerDialogVisible = true
        //...
    }
}
複製代碼

5. 向後臺傳參，使用value接受要傳遞的數值

6. res.data後臺返回的數據，forEach循環遍歷，可根據字段自定義數據，操做數據

API.diseaseByTod(params).then((res) => {
this.isSerthe = []
res.data.forEach(item => {
this.isSerthe.push({
chapter: item.fields.icd_code,
chapter_icd: item.fields.icd_code,
illness_name: item.fields.illness,
level: 4
})
})
console.log(res.data)
})
複製代碼

一個數組須要存放多個接口的數據時，而且四個地方須要用到這個數組裏的數據，能夠先循環遍歷這個數據，而後根據字段push對象，對象裏自定義數據，而後循環下個接口數據push前，清空原來的數組，定義空數組來存放接口數據。

向後臺傳遞的參數，每次都是isSlect.chapter取的值

<li v-for="(isSlect,index) in isSerthe" :key="index" class="lilists" @click="diseaseByCod(isSlect.chapter,isSlect.level)">
    <span class="fontSize">{{isSlect.chapter_icd}}</span><span class="fontSizes">{{isSlect.illness_name}}<span class="el-icon-arrow-right" v-if="isShow"></span>
    <input type="checkbox" v-if="isShaow" name="1" value="isSlect" class="radio"/>
    </span>
</li>
複製代碼

一個li循環展現四個接口的數據，實現層級切換，減小代碼量。

diseaseCoding () {
      API.diseaseCoding().then((res) => {
        this.isShaow = false
        this.isShow = true
        this.isSerthe = []
        res.data.forEach(item => {
          this.isSerthe.push({
            chapter: item.fields.chapter,
            chapter_icd: item.fields.chapter_range,
            illness_name: item.fields.illnessname,
            level: 1
          })
        })
        console.log(this.isSerthe)
      })
    },
    
    diseaseByCod (value, number) {
      if (number === 1) {
        this.isShaow = false
        this.isShow = true
        this.centerDialogVisible = true

        let params = {
          chapter: value
        }
        API.diseaseByCod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.chapter_range,
              chapter_icd: item.fields.chapter_range,
              illness_name: item.fields.illnessname,
              level: 2
            })
             console.log(item.fields.chapter_range)
          })
          console.log(res.data)
        })
      } else if (number === 2) {
        this.isShaow = false
        this.isShow = true
        let params = {
          chapter_range: value
        }
        API.diseaseByDod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 3
            })
          })
          console.log(res.data)
        })
      } else if (number === 3) {
        this.isShaow = true
        this.isShow = false
        let params = {
          icd_code: value
        }
        console.log(value)
        API.diseaseByTod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 4
            })
          })
          console.log(res.data)
        })
      }
    }
複製代碼