vue3.0 引入element-plus
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
安装element-plus
npm install element-plus --save
yarn add element-plus
完整导入
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
// 在引入 Element Plus 时,可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸,zIndex 用于设置弹出组件的层级,zIndex 的默认值为 2000
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
按需引入
// main.js
mport { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import httpRequest from '@/utils/httpRequest' // axios封装文件引入
import initElement from '@/element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
initElement(app)
app.config.globalProperties.$http = httpRequest
app.use(store).use(router).mount('#app')
// src/element-plus/index.js
import {
ElButton,
ElPagination,
ElDialog,
ElAutocomplete,
ElDropdown,
ElDropdownMenu,
ElDropdownItem,
ElMenu,
ElSubmenu,
ElMenuItem,
ElMenuItemGroup,
ElInput,
ElInputNumber,
ElRadio,
ElRadioGroup,
ElRadioButton,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElSwitch,
ElSelect,
ElOption,
ElOptionGroup,
ElButtonGroup,
ElTable,
ElTableColumn,
ElDatePicker,
ElTimeSelect,
ElTimePicker,
ElPopover,
ElTooltip,
ElBreadcrumb,
ElBreadcrumbItem,
ElForm,
ElFormItem,
ElTabs,
ElTabPane,
ElTag,
ElTree,
ElAlert,
ElSlider,
ElIcon,
ElRow,
ElCol,
ElUpload,
ElProgress,
ElBadge,
ElCard,
ElRate,
ElSteps,
ElStep,
ElCarousel,
ElCarouselItem,
ElCollapse,
ElCollapseItem,
ElCascader,
ElColorPicker,
ElTransfer,
ElContainer,
ElHeader,
ElAside,
ElMain,
ElFooter,
ElLoading,
ElMessageBox,
ElMessage,
ElNotification
} from 'element-plus'
export default (app) => {
app.use(ElButton)
app.use(ElPagination)
app.use(ElDialog)
app.use(ElAutocomplete)
app.use(ElDropdown)
app.use(ElDropdownMenu)
app.use(ElDropdownItem)
app.use(ElMenu)
app.use(ElSubmenu)
app.use(ElMenuItem)
app.use(ElMenuItemGroup)
app.use(ElInput)
app.use(ElInputNumber)
app.use(ElRadio)
app.use(ElRadioGroup)
app.use(ElRadioButton)
app.use(ElCheckbox)
app.use(ElCheckboxButton)
app.use(ElCheckboxGroup)
app.use(ElSwitch)
app.use(ElSelect)
app.use(ElOption)
app.use(ElOptionGroup)
app.use(ElButton)
app.use(ElButtonGroup)
app.use(ElTable)
app.use(ElTableColumn)
app.use(ElDatePicker)
app.use(ElTimeSelect)
app.use(ElTimePicker)
app.use(ElPopover)
app.use(ElTooltip)
app.use(ElBreadcrumb)
app.use(ElBreadcrumbItem)
app.use(ElForm)
app.use(ElFormItem)
app.use(ElTabs)
app.use(ElTabPane)
app.use(ElTag)
app.use(ElTree)
app.use(ElAlert)
app.use(ElSlider)
app.use(ElIcon)
app.use(ElRow)
app.use(ElCol)
app.use(ElUpload)
app.use(ElProgress)
app.use(ElBadge)
app.use(ElCard)
app.use(ElRate)
app.use(ElSteps)
app.use(ElStep)
app.use(ElCarousel)
app.use(ElCarouselItem)
app.use(ElCollapse)
app.use(ElCollapseItem)
app.use(ElCascader)
app.use(ElColorPicker)
app.use(ElTransfer)
app.use(ElContainer)
app.use(ElHeader)
app.use(ElAside)
app.use(ElMain)
app.use(ElFooter)
app.use(ElLoading.directive)
app.config.globalProperties.$loading = ElLoading.service
app.config.globalProperties.$msgbox = ElMessageBox
app.config.globalProperties.$alert = ElMessageBox.alert
app.config.globalProperties.$confirm = ElMessageBox.confirm
app.config.globalProperties.$prompt = ElMessageBox.prompt
app.config.globalProperties.$notify = ElNotification
app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$ELEMENT = { size: 'mini' }
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)