1. Button按鈕

1.1. 常用的操作按鈕。

1.2. 按鈕屬性

參數	說明	類型	可選值	默認值
size	尺寸	string	medium / small / mini	無
type	類型	string	primary / success / warning / danger / info / text	無
plain	是否樸素按鈕	boolean	無	false
round	是否圓角按鈕	boolean	無	false
circle	是否圓形按鈕	boolean	無	false
loading	是否加載中狀態	boolean	無	false
disabled	是否禁用狀態	boolean	無	false
icon	圖標類名	string	無	無
autofocus	是否默認聚焦	boolean	無	false
native-type	原生type屬性	string	button / submit / reset	button

2. Button按鈕例子

2.1. 使用腳手架新建一個名為element-ui-button的前端項目, 同時安裝Element插件。

2.2. 編寫App.vue?

<template><div id="app"><h1>基礎用法</h1><el-row><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></el-row><el-row><el-button plain>樸素按鈕</el-button><el-button type="primary" plain>主要按鈕</el-button><el-button type="success" plain>成功按鈕</el-button><el-button type="info" plain>信息按鈕</el-button><el-button type="warning" plain>警告按鈕</el-button><el-button type="danger" plain>危險按鈕</el-button></el-row><el-row><el-button round>圓角按鈕</el-button><el-button type="primary" round>主要按鈕</el-button><el-button type="success" round>成功按鈕</el-button><el-button type="info" round>信息按鈕</el-button><el-button type="warning" round>警告按鈕</el-button><el-button type="danger" round>危險按鈕</el-button></el-row><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row><h1>禁用狀態</h1><el-row><el-button disabled>默認按鈕</el-button><el-button type="primary" disabled>主要按鈕</el-button><el-button type="success" disabled>成功按鈕</el-button><el-button type="info" disabled>信息按鈕</el-button><el-button type="warning" disabled>警告按鈕</el-button><el-button type="danger" disabled>危險按鈕</el-button></el-row><h1>文字按鈕</h1><el-button type="text">文字按鈕</el-button><el-button type="text" disabled>文字按鈕</el-button><h1>圖標按鈕</h1><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button><el-button type="primary" icon="el-icon-search">搜索</el-button><el-button type="primary">上傳<i class="el-icon-upload el-icon--right"></i></el-button><h1>按鈕組</h1><el-button-group><el-button type="primary" icon="el-icon-arrow-left">上一頁</el-button><el-button type="primary">下一頁<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group><el-button-group><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button></el-button-group><h1>加載中</h1><el-button type="primary" loading="true">加載中</el-button><h1>不同尺寸</h1><el-row><el-button>默認按鈕</el-button><el-button size="medium">中等按鈕</el-button><el-button size="small">小型按鈕</el-button><el-button size="mini">超小按鈕</el-button></el-row></div> </template><style>.el-row {margin: 10px;} </style>

2.3. 運行項目

總結

以上是生活随笔為你收集整理的005_Button按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。