综合编程

Element UI 细节方面

微信扫一扫,分享到朋友圈

Element UI 细节方面
0

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

问题:

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

解决:

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

问题:

引用element UI 里的dialog弹框,弹框里是动态生成的Dom,js在dom还没有时,已经执行完毕,无法获取并操作Dom元素

解决:

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

一个带签名效果的div默认隐藏,点击签名框时,出现。

element UI dig log弹框,使用了open回调,动态生成了Dom之后,执行open里的方法

问题:

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,完成在线签名功能。

问题:element UI 里的dialog弹框,内容过多时,加上overflow:hidden不起作用,不会出现滚动条,内容展示不了

解决:

elemnet ui 里的diglog弹框 ,内容过多时,给.el-dialog__body 设置overflow:hidden;即可

总结:

向后台传参,使用value接受要传递的数值

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已经执行,变量取不到值…

也不必要写一步看一步效果。写一行代码就去看一眼效果,自己心里应该有画面这个下一步效果会是怎么样。这样不至于效率慢,也不会欠下了别人的期望。

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

未完待续。。。

展开阅读全文

微信扫一扫,分享到朋友圈

Element UI 细节方面
0

Spring Cloud核心组件详解

上一篇

1.5亿美元不是白给的,Block.one考虑对Voice收取“通胀税”

下一篇

你也可能喜欢

评论已经被关闭。

插入图片
Element UI 细节方面

长按储存图像,分享给朋友