當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue-ant design示例大全——按钮本地css/js资源

發布時間：2024/1/1 vue 59 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue-ant design示例大全——按钮本地css/js资源小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

vue-ant design示例大全——本地css/js資源

示例資源來自官網：https://www.antdv.com/components/button-cn

在 Ant Design Vue 中我們提供了五種按鈕。

主按鈕：用于主行動點，一個操作區域只能有一個主按鈕。
默認按鈕：用于沒有主次之分的一組行動點。
虛線按鈕：常用于添加操作。
文本按鈕：用于最次級的行動點。
鏈接按鈕：一般用于鏈接，即導航至某位置。

以及四種狀態屬性與上面配合使用。

危險：刪除/移動/修改權限等危險操作，一般需要二次確認。
幽靈：用于背景色比較復雜的地方，常用在首頁/產品頁等展示場景。
禁用：行動點不可用的時候，一般需要文案解釋。
加載中：用于異步操作等待反饋的時候，也可以避免多次提交。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><link rel="stylesheet" type="text/css" href="css/antd.min.css" /><body><div id="app"><h1>基礎按鈕</h1><a-button type="primary">Primary Button</a-button><a-button>Default Button</a-button><a-button type="dashed">Dashed Button</a-button><a-button type="text">Text Button</a-button><a-button type="link">Link Button</a-button><hr/><h1>禁用-警告-圖標按鈕</h1><a-button type="primary" disabled>Primary(disabled)</a-button><a-button type="primary" danger>Primary</a-button><a-button type="primary"><a-icon type="wifi"></a-icon></a-button><a-button type="primary" shape="circle"><a-icon type="wifi"></a-icon></a-button><hr/><h1>按鈕組</h1><a-radio-group><a-radio-button value="large">Large</a-radio-button><a-radio-button value="default">Default</a-radio-button><a-radio-button value="small">Small</a-radio-button></a-radio-group><hr/><h1>寬度按鈕</h1><a-button type="primary" block>Primary</a-button><a-button block>Default</a-button><a-button type="dashed" block>Dashed</a-button><a-button danger block>Danger</a-button><a-button type="link" block>Link</a-button></div><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script><script src="js/antd.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">new Vue({el: "#app"})</script></body></html>

通過設置 Button 的屬性來產生不同的按鈕樣式，推薦順序為：type?->?shape?->?size?->?loading?->?disabled。

按鈕的屬性說明如下：

屬性說明類型默認值版本

block	將按鈕寬度調整為其父寬度的選項	boolean	false
danger	設置危險按鈕	boolean	false	2.2.0
disabled	按鈕失效狀態	boolean	false
ghost	幽靈屬性，使按鈕背景透明	boolean	false
href	點擊跳轉的地址，指定此屬性 button 的行為和 a 鏈接一致	string	-
htmlType	設置?button?原生的?type?值，可選值請參考?HTML 標準	string	button
icon	設置按鈕的圖標類型	v-slot	-
loading	設置按鈕載入狀態	boolean \| { delay: number }	false
shape	設置按鈕形狀	default?\|?circle?\|?round	'default'
size	設置按鈕大小	large?\|?middle?\|?small	middle
target	相當于 a 鏈接的 target 屬性，href 存在時生效	string	-
type	設置按鈕類型	primary?\|?ghost?\|?dashed?\|?link?\|?text?\|?default	default

事件?#

事件名稱說明回調參數版本

click

點擊按鈕時的回調

(event) => void

支持原生 button 的其他所有屬性。

FAQ?#

如何移除 2 個漢字之間的空格?#

根據 Ant Design 設計規范要求，我們會在按鈕內(文本按鈕和鏈接按鈕除外)只有兩個漢字時自動添加空格，如果你不需要這個特性，可以設置?ConfigProvider的?autoInsertSpaceInButton?為?false。

總結

以上是生活随笔為你收集整理的vue-ant design示例大全——按钮本地css/js资源的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： VMware ESXI 7服务器中安装虚
下一篇：地道美语发音的全面总结