网站建设福,网站评估内容 优帮云,wordpress当前位置修改,用什么技术来做网站Element Plus 是一个基于 Vue 3 的组件库#xff0c;它提供了一系列丰富的组件#xff0c;用于快速构建高质量的Vue应用程序。Element Plus常见元素的用法示例
安装Element Plus 在开始之前#xff0c;你需要确保已经安装了Element Plus。可以通过npm或yarn来安装#xff…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.cssconst app createApp(App)
app.use(ElementPlus)
app.mount(#app)Button按钮
templateel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button
/templateInput输入框
templateel-input placeholder请输入内容/el-inputel-input typepassword placeholder请输入密码/el-inputel-input v-modelinput placeholder双向绑定/el-input
/templatescript
import { ref } from vueexport default {setup() {const input ref()return { input }}
}
/scriptSelect选择器
templateel-select v-modelselected placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescript
import { ref } from vueexport default {setup() {const selected ref(null)const options ref([{ value: option1, label: 选项1 },{ value: option2, label: 选项2 },{ value: option3, label: 选项3 }])return { selected, options }}
}
/scriptDialog对话框
templateel-button typetext clickdialogVisible true点击打开 Dialog/el-buttonel-dialogtitle提示:visible.syncdialogVisiblewidth30%closehandleClosespan这是一段信息/spantemplate #footerspan classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickdialogVisible false确 定/el-button/span/template/el-dialog
/templatescript
import { ref } from vueexport default {setup() {const dialogVisible ref(false)const handleClose () {console.log(Dialog closed)}return { dialogVisible, handleClose }}
}
/scriptTable表格
templateel-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-column/el-table
/templatescript
import { ref } from vueexport default {setup() {const tableData ref([{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄},// ...更多数据])return { tableData }}
}
/scriptTabs标签页
templateel-tabs v-modelactiveTab tab-clickhandleTabClickel-tab-pane label用户管理 namefirst用户管理的内容/el-tab-paneel-tab-pane label配置管理 namesecond配置管理的内容/el-tab-paneel-tab-pane label角色管理 namethird角色管理的内容/el-tab-paneel-tab-pane label任务管理 namefourth任务管理的内容/el-tab-pane/el-tabs
/templatescript
import { ref } from vueexport default {setup() {const activeTab ref(first)const handleTabClick (tab) {console.log(tab.name)}return { activeTab, handleTabClick }}
}
/scriptPagination分页
templateel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[10, 20, 30, 40]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination
/templatescript
import { ref } from vueexport 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 }}
}
/scriptTooltip文字提示
templateel-tooltip classitem effectdark content提示内容 placementtopel-button鼠标悬停显示提示/el-button/el-tooltip
/templatePopover弹出框
templateel-popoverrefpopoverplacementtopwidth200triggerclickv-model:visiblevisiblep这是一段内容这是一段内容。/pdiv styletext-align: right; margin: 0el-button sizemini typetext clickvisible false关闭/el-button/divel-button slotreference点击激活/el-button/el-popover
/templatescript
import { ref } from vueexport default {setup() {const visible ref(false)return { visible }}
}
/script
