iview 元件的使用走過的坑

2021-09-19 12:40:14 字數 1264 閱讀 9244

1.圖示不顯示

修改 build/utils.js 檔案中 extracttextplugin 外掛程式的options 配置:

新增 **:publicpath: '../../',

// generate loader string to be used with extract text plugin

function generateloaders (loader, loaderoptions) )

} else

}

2.修改樣式(自己寫的樣式必須為全域性格式,不能新增 scoped)

3.使用的元件如何觸發事件

事件觸發:@on-click.stop="clickfun()"

4. [vue warn]: do not use built-in or reserved html elements as component id: switch

翻譯:[vue warn]:不要將內建或保留的html元素用作元件id:開關

import vue from 'vue';

import from 'iview';

vue.component('switch',switch);  // 修改前,switch已存在vue裡面,關鍵字。修改為其它名字

vue.component('switch2',switch);  // 修改後,不在報錯

5.iview table 實現高度(height)隨著解析度不同而自適應

設定高度時,在height前面新增冒號":",tableheight 為自定義屬性

獲取可用高度:let clientheight = document.body.clientheight;

獲取其他內容高度:let checktips = $(".check_tips")[0].clientheight;

this.tableheight = clientheight - checktips (其它內容的高度);

6.select 下拉框 使用 v-model 雙向繫結,剛開啟頁面時沒有自動顯示預設繫結的值

原因:從快取localstorage 獲取的的id值為字元型別,而select 下拉的option 裡面的:value 繫結的值為數值型。

解決辦法:let id = parseint(this.storage.getitem("id"));  獲取id值時修改為數值型

iview中Cascader元件的坑

只認識這種結構的,所以拿到資料要處理下 必須是label value,有二級的是children v modal 要綁成 1,3 如果不使用change on select,1 是渲染不了的。on change有兩個預設值,但是我們想自己插值的話,這兩個預設值就沒了 比如 使用了v for迴圈要插入...

iview元件的改寫

1 最近工作的時候常常遇到一些改變樣式的需求。但是有的元件是iview提供的,在多個地方使用,如果要在某處地方修改它的樣式,記得給css樣式加上權重,不然會影響其他位置的樣式。比如修改table的高亮樣式,和每一行的hover事件的樣式 modifyelement ivu table row hig...

iview使用的一些坑

由於公司的設計偏愛iview的這種設計風格,所以在vue的道路上與iview形影不離 autocomplete 最開始發現有問題是偶然的從這個元件開始的,但其實是乙個select相關操作的問題,不過跟使用的機器有關。可能不同的機器對鍵盤的碼的識別不一樣,導致在某些電腦上無法使用回車 上下箭頭 tab...