Element UI 细节方面 + 总结

入职快半个月。公司业务也多多少少了解，期间的任务也很少，工做安排也不是很理想。

在这首先感谢一下个人组长，帮我解决了不少问题。也是组长带我到如今，再次感谢。

公司在作iPad端应用，我上手时项目已经开发一半，技术用到vue+element UI。

前面说到效果，各个功能实现，这几个功能也磨上了快半个月，以前并无接触过element UI,觉得那就是复制粘贴的事，其实并无，还有不少细节方面的事须要本身去体会。

下面几个问题就是在项目中所遇到的问题。在这里总结一下，相信这个总结必定会有帮助。

问题：

使用element ui dailog弹出框时，弹出框并不在vue挂载的app里 ，自定义样式覆盖不了默认样式。

解决：

把自定义样式写在了全局下，并使用了父级元素包裹，样式生效。

问题：

引用element UI 里的dialog弹框，弹框出现才会加载里面的Dom，js在Dom尚未时，已经开始执行，没法获取并操做Dom元素

解决：

1. 不使用element UI 里到dialog弹框，手写html元素，固定Dom结构，让先加载Dom，后执行 js操做元素。

2. element UI dig log弹框，使用了open回调，动态生成了Dom以后，执行open里的方法，open里的方法是当即执行

3. 不把js写在父组件内，单独抽离为子组件便可，点击出现弹框直接加载子组件，就不会出现执行问题

问题：

element ui 给表单加入验证，在el-col标签里面加入

解决：

1. 首先给须要表单验证的整个大form加入：model，：rules，
2. 而后给须要验证的输入框加入el-form-item标签包裹，加入prop
3. 再给vue data中加入rules 规则，rules中是定义的prop
4. 再给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)
        })
      }
    }
复制代码

浏览器控制台中network中Preview查看后台完整的数据，Headers请求头中查看向后台是否传过去里参数

排错：分析错误，查看报错信息，往上排查,问题重现，撤回式排除

console.log(_) alert(...) debugger排错 方法里alert看有没有执行，代码执行的顺序，同步异步执行过程，加载Dom元素时是否是js已经执行，变量取不到值...

也没必要要写一步看一步效果。写一行代码就去看一眼效果，本身内心应该有画面这个下一步效果会是怎么样。这样不至于效率慢，也不会欠下了别人的指望。

好了上面就是在项目中总结遇到的问题。

也相信一步一步踏实稳重，定会有收获，谁都是从什么都不会过来的，只是时间问题。

未完待续。。。