liukang b4b8ddf15d admin-vue 1 年之前
..
.idea b4b8ddf15d admin-vue 1 年之前
example b4b8ddf15d admin-vue 1 年之前
src b4b8ddf15d admin-vue 1 年之前
LICENSE b4b8ddf15d admin-vue 1 年之前
README.md b4b8ddf15d admin-vue 1 年之前
index.js b4b8ddf15d admin-vue 1 年之前
package.json b4b8ddf15d admin-vue 1 年之前

README.md

iview-loader

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:

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:

{
    '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'
}