【1】Practical application of ElementUI component ===》Use of button

There is a personal public account at the bottom of the article: Xiao Zheng, who loves technology. Mainly sharing development knowledge, learning materials, graduation design guidance, etc. Personal Bilibili homepage Xiao Zheng who loves technology, the video content is mainly in the form of video explanations corresponding to the articles. Those who are interested can pay attention. Why share? There is no need to let others step on the pitfalls that you have stepped on again. Reviewing it yourself can also deepen your memory. Benefiting oneself and benefiting others is the so-called win-win situation.

1. Basic usage

Basic button usage

Define the Button's style. type, plain, round,circle

The button can be used directly after being put into the project. The button style can be switched according to the provided style. If it doesn't meet your needs, you can change the button's style in depth.

Button adds label style: icon="el-icon-delete"

Button border style: circle ,round

<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>

2. Disabled state

Button unavailable state

Whether the button is available can be disableddefined using the attribute, which accepts a value.

<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>

<el-row>
  <el-button plain disabled>朴素按钮</el-button>
  <el-button type="primary" plain disabled>主要按钮</el-button>
  <el-button type="success" plain disabled>成功按钮</el-button>
  <el-button type="info" plain disabled>信息按钮</el-button>
  <el-button type="warning" plain disabled>警告按钮</el-button>
  <el-button type="danger" plain disabled>危险按钮</el-button>
</el-row>

3. Text button

Buttons without borders and background color

Assign the button's type to text; if you don't want a button or a hyperlink, you can use this button without a border. Click this text to trigger a method, etc.

<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>

4. Icon button

Buttons with icons can enhance visibility (with text) or save space (without text)

Just set the properties. The list of icons can refer to the icon component of Element, or you can set the icon to the right of the text. Just use a label, and you can use a custom icon. i,coni

<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>

5. Button group

Appears as a button group, often used for multiple similar operations

Use labels to nest your buttons.<el-button-group>

<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>

6. Loading

After clicking the button, the data loading operation is performed and the loading status is displayed on the button.

To set it to the load state, just set the attribute to. loading,true

<el-button type="primary" :loading="true">加载中</el-button>

7. Different sizes

The Button component provides three sizes in addition to the default value, so you can choose the appropriate button size in different scenarios.

Additional dimensions: sizeConfigure them by setting properties. medium, small,mini

<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>
<el-row>
  <el-button round>默认按钮</el-button>
  <el-button size="medium" round>中等按钮</el-button>
  <el-button size="small" round>小型按钮</el-button>
  <el-button size="mini" round>超小按钮</el-button>
</el-row>

8. Attribute description

parameter	illustrate	type	Optional value	default value
size	size	string	medium / small / mini	-
type	type	string	primary / success / warning / danger / info / text	-
plain	Whether the button is plain	boolean	-	false
round	Whether to round the corners of the button	boolean	-	false
circle	Whether round button	boolean	-	false
loading	Whether loading status	boolean	-	false
disabled	Whether to disable the status	boolean	-	false
icon	Icon class name	string	-	-
autofocus	Whether to focus by default	boolean	-	false
native-type	Native type attribute	string	button / submit / reset	button

9. Practical application

Buttons can also bind methods and perform certain operations.

actual effect