ElementUI的使用
-
直接使用HTML构建
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入CSS --> <link rel="stylesheet" href="./css/index.css" /> <!-- 导入Vue3 --> <script src="./js/vue.global.js"></script> <!-- 导入组件库 --> <script src="./js/index.full.js"></script> </head> <body> <div id="app"> <el-button>{{ message }}</el-button> </div> <!-- <script type="module"> const { createApp, ref } = Vue createApp({ setup() { const message = ref('神奇的布欧') return { message } } }).mount('#app').use(ElementPlus); </script> --> <script> const { ref } = Vue const App = { setup() { const message = ref('神奇的布欧') return { message } }, }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
或者
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入CSS --> <link rel="stylesheet" href="./css/index.css" /> <!-- 导入Vue3 --> <script src="./js/vue.global.js"></script> <!-- 导入组件库 --> <script src="./js/index.full.js"></script> </head> <body> <div id="app"> <el-button>{{ message }}</el-button> </div> <script type="module"> const { createApp, ref } = Vue createApp({ setup() { const message = ref('神奇的布欧') return { message } } }).use(ElementPlus).mount('#app') </script> </body> </html>
-
布局容器1:
用于布局的容器组件,方便快速搭建页面的基本结构:
:外层容器。 当子元素中包含 或 时,全部子元素会垂直上下排列, 否则会水平左右排列。
:顶栏容器。
:侧边栏容器。
:主要区域容器。
:底栏容器。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入CSS --> <link rel="stylesheet" href="./css/index.css" /> <!-- 导入Vue3 --> <script src="./js/vue.global.js"></script> <!-- 导入组件库 --> <script src="./js/index.full.js"></script> </head> <body> <div id="app"> <div class="common-layout"> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </div> </div> <script> const { ref } = Vue const App = { setup() { const message = ref('神奇的布欧') return { message } }, }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
布局容器2:(导入图标库!)
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入CSS --> <link rel="stylesheet" href="./css/index.css" /> <!-- 导入Vue3 --> <script src="./js/vue.global.js"></script> <!-- 导入组件库 --> <script src="./js/index.full.js"></script> <!-- 导入图标库 --> <script src="./js/index.iife.min.js"></script> </head> <body> <div id="app"> <el-container class="layout-container-demo" style="height: 500px"> <el-aside width="200px"> <el-scrollbar> <el-menu :default-openeds="['1', '3']"> <el-sub-menu index="1"> <template #title> <el-icon> <message /> </el-icon>Navigator One </template> <el-menu-item-group> <template #title>Group 1</template> <el-menu-item index="1-1">Option 1</el-menu-item> <el-menu-item index="1-2">Option 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group 2"> <el-menu-item index="1-3">Option 3</el-menu-item> </el-menu-item-group> <el-sub-menu index="1-4"> <template #title>Option4</template> <el-menu-item index="1-4-1">Option 4-1</el-menu-item> </el-sub-menu> </el-sub-menu> <el-sub-menu index="2"> <template #title> <el-icon><icon-menu /></el-icon>Navigator Two </template> <el-menu-item-group> <template #title>Group 1</template> <el-menu-item index="2-1">Option 1</el-menu-item> <el-menu-item index="2-2">Option 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group 2"> <el-menu-item index="2-3">Option 3</el-menu-item> </el-menu-item-group> <el-sub-menu index="2-4"> <template #title>Option 4</template> <el-menu-item index="2-4-1">Option 4-1</el-menu-item> </el-sub-menu> </el-sub-menu> <el-sub-menu index="3"> <template #title> <el-icon> <setting /> </el-icon>Navigator Three </template> <el-menu-item-group> <template #title>Group 1</template> <el-menu-item index="3-1">Option 1</el-menu-item> <el-menu-item index="3-2">Option 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group 2"> <el-menu-item index="3-3">Option 3</el-menu-item> </el-menu-item-group> <el-sub-menu index="3-4"> <template #title>Option 4</template> <el-menu-item index="3-4-1">Option 4-1</el-menu-item> </el-sub-menu> </el-sub-menu> </el-menu> </el-scrollbar> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <div class="toolbar"> <el-dropdown> <el-icon style="margin-right: 8px; margin-top: 1px"> <setting /> </el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>View</el-dropdown-item> <el-dropdown-item>Add</el-dropdown-item> <el-dropdown-item>Delete</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <span>Tom</span> </div> </el-header> <el-main> <el-scrollbar> <el-table :data="tableData"> <el-table-column prop="date" label="Date" width="140" /> <el-table-column prop="name" label="Name" width="120" /> <el-table-column prop="address" label="Address" /> </el-table> </el-scrollbar> </el-main> </el-container> </el-container> </div> <script> const { ref } = Vue const App = { setup() { const item = { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', } const tableData = ref(Array.from({ length: 20 }).fill(item)) return { item, tableData } }, }; const app = Vue.createApp(App); // 添加全部组件 for ([name, comp] of Object.entries(ElementPlusIconsVue)) { app.component(name, comp); } app.use(ElementPlus); app.mount("#app"); </script> <style scoped> .layout-container-demo .el-header { position: relative; background-color: var(--el-color-primary-light-7); color: var(--el-text-color-primary); } .layout-container-demo .el-aside { color: var(--el-text-color-primary); background: var(--el-color-primary-light-8); } .layout-container-demo .el-menu { border-right: none; } .layout-container-demo .el-main { padding: 0; } .layout-container-demo .toolbar { display: inline-flex; align-items: center; justify-content: center; height: 100%; right: 20px; } </style> </body> </html>
-
Layout布局:
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入CSS --> <link rel="stylesheet" href="./css/index.css" /> <!-- 导入Vue3 --> <script src="./js/vue.global.js"></script> <!-- 导入组件库 --> <script src="./js/index.full.js"></script> </head> <body> <div id="app"> <div class="common-layout"> <el-container> <el-header>Header</el-header> <el-main> <el-row> <el-col :span="6"> <div class="mb-4"><el-button>Default</el-button></div> </el-col> <el-col :span="6"> <div class="mb-4"><el-button type="primary">Primary</el-button></div> </el-col> <el-col :span="6"> <div class="mb-4"><el-button type="info">Info</el-button></div> </el-col> <el-col :span="6"> <div class="mb-4"><el-button type="info">Info</el-button></div> </el-col> </el-row> </el-main> </el-container> </div> </div> <script> const { ref } = Vue const App = { setup() { const message = ref('神奇的布欧') return { message } }, }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> <style lang="scss"> .el-row { margin-bottom: 20px; } .el-row:last-child { margin-bottom: 0; } .el-col { border-radius: 4px; } .grid-content { border-radius: 4px; min-height: 36px; } </style> </body> </html>