You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.0 KiB
110 lines
3.0 KiB
# iview-loader
|
|
[](https://www.npmjs.org/package/iview-loader)
|
|
### Brief Introduction
|
|
Uniform iView tag writing specification, all tags can be used in the form of capital letters, including two tags `Switch` and `Circle` that are restricted by Vue.
|
|
|
|
Although not recommended, you can use the loader option configuration to open all tag prefixes, such as `i-date-picker`.
|
|
|
|
### Usage
|
|
|
|
#### Install
|
|
First, install iview-loader through npm
|
|
```
|
|
npm install iview-loader --save-dev
|
|
```
|
|
#### Setting
|
|
Configure webpack to rewrite the normal vue-loader configuration, such as:
|
|
```js
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.vue$/,
|
|
use: [
|
|
{
|
|
loader: 'vue-loader',
|
|
options: {
|
|
|
|
}
|
|
},
|
|
{
|
|
loader: 'iview-loader',
|
|
options: {
|
|
prefix: false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
#### Illustrate
|
|
- You can write `<Switch>` and `<Circle>` tags now.
|
|
- After the parameter `prefix` is set to `true`, all iView component tag names can be prefixed, such as `<i-row>` and `<i-select>`.
|
|
|
|
The following is the complete tag name:
|
|
```js
|
|
{
|
|
'i-affix': 'Affix',
|
|
'i-alert': 'Alert',
|
|
'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-checkbox': 'Checkbox',
|
|
'i-checkbox-group': 'CheckboxGroup',
|
|
'i-circle': 'i-circle',
|
|
'i-col': 'Col',
|
|
'i-collapse': 'Collapse',
|
|
'i-color-picker': 'ColorPicker',
|
|
'i-date-picker': 'DatePicker',
|
|
'i-dropdown': 'Dropdown',
|
|
'i-dropdown-item': 'DropdownItem',
|
|
'i-dropdown-menu': 'DropdownMenu',
|
|
'i-form': 'Form',
|
|
'i-form-item': 'FormItem',
|
|
'i-icon': 'Icon',
|
|
'i-input': 'Input',
|
|
'i-input-number': 'InputNumber',
|
|
'i-menu': 'Menu',
|
|
'i-menu-group': 'MenuGroup',
|
|
'i-menu-item': 'MenuItem',
|
|
'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-step': 'Step',
|
|
'i-steps': 'Steps',
|
|
'i-switch': 'i-switch',
|
|
'i-table': 'Table',
|
|
'i-tabs': 'Tabs',
|
|
'i-tab-pane': 'TabPane',
|
|
'i-tag': 'Tag',
|
|
'i-timeline': 'Timeline',
|
|
'i-timeline-item': 'TimelineItem',
|
|
'i-time-picker': 'TimePicker',
|
|
'i-tooltip': 'Tooltip',
|
|
'i-transfer': 'Transfer',
|
|
'i-tree': 'Tree',
|
|
'i-upload': 'Upload'
|
|
}
|
|
```
|
|
|