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-option
v-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-dialog
title="提示"
: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-popover
ref="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>