官网Button 按钮 | Element Plusimport {createApp} from vue import App from ./App.vue //引入pinia import {createPinia} from pinia //引入EP import ElementPlus from element-plus import element-plus/dist/index.css //导入所有图标 import * as ElementPlusIconsVue from element-plus/icons-vue let app createApp(App) //创建pinia const pinia createPinia() //注册所有图标组件 for(const [key, component] of Object.entries(ElementPlusIconsVue)){ app.component(key, component); } //使用pinia app.use(pinia) app.use(ElementPlus) app.mount(#app)template h3按钮的配色风格/h3 !-- 按钮配色风格是通过 type 属性来定义的 -- el-button默认按钮/el-buttonbrbr el-button typeprimary主要按钮/el-button【typeprimary】brbr el-button typesuccess成功按钮/el-button【typesuccess】brbr el-button typeinfo信息按钮/el-button【typeinfo】brbr el-button typewarning警告按钮/el-button【typewarning】brbr el-button typedanger危险按钮/el-button【typedanger】brbr h3按钮形状控制属性/h3 el-button round圆角按钮/el-button【round】brbr el-button circle圆/el-button【circle】brbr h3按钮样式控制属性/h3 !-- 朴素按钮 与 默认按钮 鼠标悬停时的背景色不同 -- !-- 朴素按钮的适用场景次要操作如取消、返回 -- el-button plain朴素按钮朴素按钮 与 默认按钮 鼠标悬停时的背景色不同/el-button【plain】brbr h3按钮状态控制属性/h3 el-button :disableddisable禁用按钮/el-button【disabled】brbr el-button loading加载按钮/el-button【loading】brbr h3按钮的大小/h3 el-button sizesmall小按钮/el-button【sizesmall】brbr el-button默认按钮/el-buttonbrbr el-button sizelarge大按钮/el-button【sizelarge】brbr h3带图标/h3 div classbutton-row el-button :iconSearch circle/ el-button typeprimary :iconEdit circle/ el-button typesuccess :iconCheck circle/ el-button typeinfo :iconMessage circle/ el-button typewarning :iconStar circle/ el-button typedanger :iconDelete circle/ el-button typeprimary el-iconSearch/Search/el-icon span搜索~(文字图标按钮)/span /el-button /div h3组合/h3 el-button typedanger sizelarge round删除/el-button /template script langts setup nameApp import {ref} from vue; //由于按钮上使用了:Search所以还要导入 //如果图标直接使用组件全局组件注册过就不用导入 el-iconSearch//el-icon import {Search,Edit,Check,Message,Star,Delete} from element-plus/icons-vue //可以通过 let disable ref(true) /script