nuxt中iview按需加载配置
阅读原文时间:2023年07月09日阅读:1

在plugins/iview.js中修改

初始代码如下

import Vue from 'vue'
import iView from 'iview'
import locale from 'iview/dist/locale/en-US' // Change locale, check node_modules/iview/dist/locale

Vue.use(iView, {
locale
})

修改成如下代码

import Vue from 'vue'
import './iview-ui.less'

import {
Alert,
AutoComplete,
Avatar,
BackTop,
Badge,
Breadcrumb,
BreadcrumbItem,
Button,
ButtonGroup,
Card,
Carousel,
CarouselItem,
Cascader,
Checkbox,
CheckboxGroup,
Circle,
Col,
Collapse,
ColorPicker,
Content,
DatePicker,
Divider,
Drawer,
Dropdown,
DropdownItem,
DropdownMenu,
Footer,
Form,
FormItem,
Header,
Icon,
Input,
InputNumber,
Scroll,
Sider,
Submenu,
Layout,
LoadingBar,
Menu,
MenuGroup,
MenuItem,
Message,
Modal,
Notice,
Option,
OptionGroup,
Page,
Panel,
Poptip,
Progress,
Radio,
RadioGroup,
Rate,
Row,
Select,
Slider,
Spin,
Step,
Steps,
Switch,
Table,
Tabs,
TabPane,
Tag,
Timeline,
TimelineItem,
TimePicker,
Tooltip,
Transfer,
Tree,
Upload
} from 'iview'
// iview基础模块
const components = {
Alert,
AutoComplete,
Avatar,
BackTop,
Badge,
Breadcrumb,
BreadcrumbItem,
Button,
ButtonGroup,
Card,
Carousel,
CarouselItem,
Cascader,
Checkbox,
CheckboxGroup,
Col,
Collapse,
ColorPicker,
Content,
DatePicker,
Divider,
Drawer,
Dropdown,
DropdownItem,
DropdownMenu,
Footer,
Form,
FormItem,
Header,
Icon,
Input,
InputNumber,
Scroll,
Sider,
Submenu,
Layout,
LoadingBar,
Menu,
MenuGroup,
MenuItem,
Message,
Modal,
Notice,
Option,
OptionGroup,
Page,
Panel,
Poptip,
Progress,
Radio,
RadioGroup,
Rate,
Row,
Select,
Slider,
Spin,
Step,
Steps,
Table,
Tabs,
TabPane,
Tag,
Timeline,
TimelineItem,
TimePicker,
Tooltip,
Transfer,
Tree,
Upload
}

const iviewModule = {
…components,
// 不能和html标签重复的组件,添加别名(除了Switch、Circle在使用中必须是iSwitch、iCircle,其他都可以不加"i")
iButton: Button,
iCircle: Circle,
iCol: Col,
iContent: Content,
iForm: Form,
iFooter: Footer,
iHeader: Header,
iInput: Input,
iMenu: Menu,
iOption: Option,
iProgress: Progress,
iSelect: Select,
iSwitch: Switch,
iTable: Table
}
// 循环注册全局组件
Object.keys(iviewModule).forEach(key => {
Vue.component(key, iviewModule[key])
})

// 将iview模块挂载到vue对象上去
Vue.prototype.$Loading = LoadingBar
Vue.prototype.$Message = Message
Vue.prototype.$Modal = Modal
Vue.prototype.$Notice = Notice
Vue.prototype.$Spin = Spin

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章