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' 時 按鈕隱藏