当前位置: 代码迷 >> 综合 >> iview使用的一些坑
  详细解决方案

iview使用的一些坑

热度:36   发布时间:2024-01-26 12:41:12.0

由于公司的设计偏爱iview的这种设计风格,所以在vue的道路上与iview形影不离

 

AutoComplete

最开始发现有问题是偶然的从这个组件开始的,但其实是一个select相关操作的问题,不过跟使用的机器有关。

可能不同的机器对键盘的码的识别不一样,导致在某些电脑上无法使用回车、上下箭头、tab、删除键等。

最后在全局统一定义键盘码才得以解决,keys.js,Vue.use(keys) 

const hasKeybordEvent = () => (typeof KeyboardEvent === 'function' &&(new KeyboardEvent(null)).key
)const codeName = {8: 'Backspace',9: 'Tab',13: 'Enter',27: 'Escape',38: 'ArrowUp',40: 'ArrowDown'
}export default {install (Vue, options) {if (this.installed || hasKeybordEvent()) returnthis.installed = true// let { keyCodes } = optionsObject.defineProperties(KeyboardEvent.prototype, {key: {get () {return this.code || codeName[this.keyCode]},set () {console.error('Do NOT set this polyfilled property! KeyboardEvent[key]')}}})}
}

Tabs v-if

这玩意老头疼了,有些tab可能在某些条件下是不需要展示的,但是呢,这货,上面的tite展示倒是给你隐藏的好好的,但是呢,下面的tab内容,真的是给你搞得一团混乱,整体错位,隐藏多个就更不堪入目了。除非你要隐藏的刚好是最好一个,还有点搞头。v-show跟这一个怂样。

最后逼得我是先用disabled属性,然后再用样式针对性的干掉它

Table max-height

3.x的table有个属性height,很鸡肋,height是固定的,那么问题来了,table的数据不是固定的,数据不够的时候,这个table的height在那就很尴尬呀。终于4.x的时候来了个max-height,感觉看到了曙光,数据少了,终于不尴尬了。然后就用了一把,又被坑了,这玩意在数据量少的时候,直接卡死,页面浏览器无法动摇的那种,又被坑的一脸鼻血。

最后老老实实用height属性,然后绑定一个计算过的属性

tableHeight () {const otherHeight = 100 // table以外占用的高度const dataHeight = this._min([(this.total > 0 ? this.total : 1), this.searchData.pageSize]) * (table的行高) + (table的title高度) + (滚动条高度)return this._min([(window.innerHeight - otherHeight), dataHeight])}

Poptip

这个呢,就是关或者不关,不是用户说了算,只能靠它自己的定义的时机来

不过可以用$refs.poptip.ok(),$refs.poptip.cancel()等在外面操作

类似这种问题很多,有些api没有暴露出来,要自己去找~