官网：Button 按钮 | Element Plus
import {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-button><br><br> <el-button type="primary">主要按钮</el-button>【type='primary'】<br><br> <el-button type="success">成功按钮</el-button>【type='success'】<br><br> <el-button type="info">信息按钮</el-button>【type='info'】<br><br> <el-button type="warning">警告按钮</el-button>【type='warning'】<br><br> <el-button type="danger">危险按钮</el-button>【type='danger'】<br><br> <h3>按钮形状控制属性</h3> <el-button round>圆角按钮</el-button>【round】<br><br> <el-button circle>圆</el-button>【circle】<br><br> <h3>按钮样式控制属性</h3> <!-- 朴素按钮 与 默认按钮 鼠标悬停时的背景色不同 --> <!-- 朴素按钮的适用场景：次要操作（如取消、返回） --> <el-button plain>朴素按钮，朴素按钮 与 默认按钮 鼠标悬停时的背景色不同</el-button>【plain】<br><br> <h3>按钮状态控制属性</h3> <el-button :disabled="disable">禁用按钮</el-button>【disabled】<br><br> <el-button loading>加载按钮</el-button>【loading】<br><br> <h3>按钮的大小</h3> <el-button size="small">小按钮</el-button>【size='small'】<br><br> <el-button>默认按钮</el-button><br><br> <el-button size="large">大按钮</el-button>【size='large'】<br><br> <h3>带图标</h3> <div class="button-row"> <el-button :icon="Search" circle/> <el-button type="primary" :icon="Edit" circle/> <el-button type="success" :icon="Check" circle/> <el-button type="info" :icon="Message" circle/> <el-button type="warning" :icon="Star" circle/> <el-button type="danger" :icon="Delete" circle/> <el-button type="primary"> <el-icon><Search></Search></el-icon> <span>搜索~(文字+图标按钮)</span> </el-button> </div> <h3>组合</h3> <el-button type="danger" size="large" round>删除</el-button> </template> <script lang='ts' setup name="App"> import {ref} from "vue"; //由于按钮上使用了:Search，所以还要导入 //如果图标直接使用组件，全局组件注册过就不用导入 <el-icon><Search/></el-icon> import {Search,Edit,Check,Message,Star,Delete} from "@element-plus/icons-vue" //可以通过 let disable = ref(true) </script>
