0 目錄
- 背景
- 用途
- 使用方法
3.1.安裝
3.2.配置
3.3.說明 - 最佳實踐
4.1.timeline組件eslint報錯
4.2.menu組件submenu遞歸溢出報錯 - 參考資料
1 背景
在參考iview官方文檔使用iView Loader過程中，遇到了部分組件報錯的問題，經(jīng)過查詢未找到相關(guān)文章說明問題原因及解決方案，遂記錄一下自己的方法心得。
2.用途、3.使用方法部分為iview官方文檔的內(nèi)容，4.最佳實踐為問題實例。
2 用途
統(tǒng)一iView標簽書寫規(guī)范，所有標簽都可以使用首字母大寫的形式，包括Vue限制的兩個標簽Switch和Circle。
雖然不推薦，但通過loader選項配置，可以開啟所有標簽前綴的寫法了，比如i-date-picker。
為什么推薦在單文件組件和字符串模板中組件名應該總是 PascalCase 的。
3 使用方法
3.1 安裝
首先通過npm安裝iview-loader
npm install iview-loader --save-dev
3.2 配置
配置webpack(webpack.base.conf.js)，改寫平時vue-loader的配置，形如：
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {}
},
{
loader: 'iview-loader',
options: {
prefix: false
}
}
]
}
]
}
3.3 說明
- 可以直接寫
<Switch>和<Circle>這兩個標簽； - 參數(shù)
prefix設置為true后，所有iView組件標簽名都可以使用前綴i-，例如<i-row>、``
完整的標簽名如下：
{
'i-affix': 'Affix',
'i-alert': 'Alert',
'i-anchor': 'Anchor',
'i-anchor-link': 'AnchorLink',
'i-auto-complete': 'AutoComplete',
'i-avatar': 'Avatar',
'i-back-top': 'BackTop',
'i-badge': 'Badge',
'i-breadcrumb': 'Breadcrumb',
'i-breadcrumb-item': 'BreadcrumbItem',
'i-button': 'Button',
'i-button-group': 'ButtonGroup',
'i-card': 'Card',
'i-carousel': 'Carousel',
'i-carousel-item': 'CarouselItem',
'i-cascader': 'Cascader',
'i-cell': 'Cell',
'i-cell-group': 'CellGroup',
'i-checkbox': 'Checkbox',
'i-checkbox-group': 'CheckboxGroup',
'i-circle': 'i-circle',
'i-col': 'Col',
'i-collapse': 'Collapse',
'i-color-picker': 'ColorPicker',
'i-content': 'Content',
'i-divider': 'Divider',
'i-date-picker': 'DatePicker',
'i-drawer': 'Drawer',
'i-dropdown': 'Dropdown',
'i-dropdown-item': 'DropdownItem',
'i-dropdown-menu': 'DropdownMenu',
'i-footer': 'Footer',
'i-form': 'Form',
'i-form-item': 'FormItem',
'i-header': 'Header',
'i-icon': 'Icon',
'i-input': 'Input',
'i-input-number': 'InputNumber',
'i-layout': 'Layout',
'i-menu': 'Menu',
'i-menu-group': 'MenuGroup',
'i-menu-item': 'MenuItem',
'i-sider': 'Sider',
'i-submenu': 'Submenu',
'i-modal': 'Modal',
'i-option': 'Option',
'i-option-group': 'OptionGroup',
'i-page': 'Page',
'i-panel': 'Panel',
'i-poptip': 'Poptip',
'i-progress': 'Progress',
'i-radio': 'Radio',
'i-radio-group': 'RadioGroup',
'i-rate': 'Rate',
'i-row': 'Row',
'i-select': 'Select',
'i-slider': 'Slider',
'i-spin': 'Spin',
'i-split': 'Split',
'i-step': 'Step',
'i-steps': 'Steps',
'i-switch': 'i-switch',
'i-table': 'Table',
'i-tabs': 'Tabs',
'i-tab-pane': 'TabPane',
'i-tag': 'Tag',
'i-time': 'Time',
'i-timeline': 'Timeline',
'i-timeline-item': 'TimelineItem',
'i-time-picker': 'TimePicker',
'i-tooltip': 'Tooltip',
'i-transfer': 'Transfer',
'i-tree': 'Tree',
'i-upload': 'Upload'
}
4 最佳實踐
4.1 timeline組件eslint報錯
按照iview官方文檔中的提示編寫時間軸代碼如下
<i-timeline class="time-content-box">
<i-timeline-item>
<p class="time-title">時間</p>
<p class="time-content">內(nèi)容</p>
</i-timeline-item>
</i-timeline>
編譯報錯如下圖
timeline.png
頁面報錯如下圖
timeline2.png
分析：由于eslint無法識別timeline導致其在編譯過程中提示標簽未封閉 從而導致編譯失敗
解決方法
在main.js引入iview的同時 把timeline組件全局注冊別名
import Vue from 'vue'
import iView from 'iview'
Vue.component('i-time-line-item', iView.TimelineItem)
頁面中使用別名
<i-timeline class="time-content-box">
<i-time-line-item>
<p class="time-title">時間</p>
<p class="time-content">內(nèi)容</p>
</i-time-line-item>
</i-timeline>
4.2 menu組件submenu遞歸溢出報錯
按照iview官方文檔中的提示編寫時間軸代碼如下
<i-menu>
<i-submenu name="a">
<template slot="title">
A
</template>
<i-menu-item name="a1" to="/a/a1">B</i-menu-item>
<i-menu-item name="a2" to="/a/a2">C</i-menu-item>
</i-submenu>
<i-menu-item name="b" to="/b">
B
</i-menu-item>
<i-menu-item name="c" to="/c">
C
</i-menu-item>
</i-menu>
頁面報錯如下圖
submenu.png
分析：暫時未查出問題原因 猜測是iview-loader中重命名的組件與iview原本的組件存在沖突 導致的異常
解決方法同上
在main.js引入iview的同時 把submenu組件全局注冊別名
import Vue from 'vue'
import iView from 'iview'
Vue.component('i-ym-submenu', iView.Submenu)
頁面中使用別名
<i-menu>
<i-ym-submenu name="a">
<template slot="title">
A
</template>
<i-menu-item name="a1" to="/a/a1">B</i-menu-item>
<i-menu-item name="a2" to="/a/a2">C</i-menu-item>
</i-ym-submenu>
<i-menu-item name="b" to="/b">
B
</i-menu-item>
<i-menu-item name="c" to="/c">
C
</i-menu-item>
</i-menu>
