云主机上传网站免费b站软件推广网站

Element Plus 是一个基于 Vue 3 的组件库，它提供了一系列丰富的组件，用于快速构建高质量的Vue应用程序。Element Plus常见元素的用法示例

安装Element Plus
在开始之前，你需要确保已经安装了Element Plus。可以通过npm或yarn来安装：

npm install element-plus --save
# 或者
yarn add element-plus

引入Element Plus
在你的Vue项目中，你可以全局或按需引入Element Plus组件。以下是全局引入的示例：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

Button（按钮）

<template><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button>
</template>

Input（输入框）

<template><el-input placeholder="请输入内容"></el-input><el-input type="password" placeholder="请输入密码"></el-input><el-input v-model="input" placeholder="双向绑定"></el-input>
</template><script>
import { ref } from 'vue'export default {setup() {const input = ref('')return { input }}
}
</script>

Select（选择器）

<template><el-select v-model="selected" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>
import { ref } from 'vue'export default {setup() {const selected = ref(null)const options = ref([{ value: 'option1', label: '选项1' },{ value: 'option2', label: '选项2' },{ value: 'option3', label: '选项3' }])return { selected, options }}
}
</script>

Dialog（对话框）

<template><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"@close="handleClose"><span>这是一段信息</span><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></template></el-dialog>
</template><script>
import { ref } from 'vue'export default {setup() {const dialogVisible = ref(false)const handleClose = () => {console.log('Dialog closed')}return { dialogVisible, handleClose }}
}
</script>

Table（表格）

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>
</template><script>
import { ref } from 'vue'export default {setup() {const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},// ...更多数据])return { tableData }}
}
</script>

Tabs（标签页）

<template><el-tabs v-model="activeTab" @tab-click="handleTabClick"><el-tab-pane label="用户管理" name="first">用户管理的内容</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理的内容</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理的内容</el-tab-pane><el-tab-pane label="任务管理" name="fourth">任务管理的内容</el-tab-pane></el-tabs>
</template><script>
import { ref } from 'vue'export default {setup() {const activeTab = ref('first')const handleTabClick = (tab) => {console.log(tab.name)}return { activeTab, handleTabClick }}
}
</script>

Pagination（分页）

<template><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 40]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination>
</template><script>
import { ref } from 'vue'export default {setup() {const currentPage = ref(1)const pageSize = ref(10)const total = ref(100)const handleSizeChange = (newSize) => {pageSize.value = newSize}const handleCurrentChange = (newPage) => {currentPage.value = newPage}return { currentPage, pageSize, total, handleSizeChange, handleCurrentChange }}
}
</script>

Tooltip（文字提示）

<template><el-tooltip class="item" effect="dark" content="提示内容" placement="top"><el-button>鼠标悬停显示提示</el-button></el-tooltip>
</template>

Popover（弹出框）

<template><el-popoverref="popover"placement="top"width="200"trigger="click"v-model:visible="visible"><p>这是一段内容，这是一段内容。</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="visible = false">关闭</el-button></div><el-button slot="reference">点击激活</el-button></el-popover>
</template><script>
import { ref } from 'vue'export default {setup() {const visible = ref(false)return { visible }}
}
</script>