vue 按钮的小知识

<el-button>鼠标滑过/点击背景变淡</el-button>
<el-button type="primary" plain>鼠标滑过/点击背景变深色调</el-button>
<el-button type="success" round>圆角按钮</el-button>
<el-button type="info" icon="el-icon-search" circle>图标按钮按钮，icon放入映入的icon图标名称</el-button>
<el-button type="text">文字按钮</el-button>
<el-button disabled>禁用按钮</el-button>
<el-button size="medium">不同尺寸按钮</el-button>
<el-button :disabled="true/false">动态禁用</el-button>
<el-button type="primary">图标加文字按钮<i class="el-icon-upload el-icon--right"></i></el-button>
<el-button type="primary" :loading="true">加载中按钮</el-button>

 

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

 

参数    说明    类型    可选值    默认值
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    —    —

 

 

关于vue 按钮的隐藏和显示

:style="{ display: visibleLine }"
当

visibleLine 为''时 按钮显示
当为

'none' 时 按钮隐藏