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

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

    示例资源来自官网：https://www.antdv.com/components/button-cn

    在 Ant Design Vue 中我们提供了五种按钮。

    • 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
    • 默认按钮：用于没有主次之分的一组行动点。
    • 虚线按钮：常用于添加操作。
    • 文本按钮：用于最次级的行动点。
    • 链接按钮：一般用于链接，即导航至某位置。

    以及四种状态属性与上面配合使用。

    • 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
    • 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
    • 禁用：行动点不可用的时候，一般需要文案解释。
    • 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
    1. html>
    2. <html>
    3.  
    4. 	<head>
    5. 		<meta charset="utf-8" />
    6. 		<title>title>
    7. 	head>
    8. 	<link rel="stylesheet" type="text/css" href="css/antd.min.css" />
    9.  
    10. 	<body>
    11. 		<div id="app">
    12. 			<h1>基础按钮h1>
    13. 			<a-button type="primary">Primary Buttona-button>
    14. 			<a-button>Default Buttona-button>
    15. 			<a-button type="dashed">Dashed Buttona-button>
    16. 			<a-button type="text">Text Buttona-button>
    17. 			<a-button type="link">Link Buttona-button>
    18. 			<hr/>
    19. 			<h1>禁用-警告-图标按钮h1>
    20. 			<a-button type="primary" disabled>Primary(disabled)a-button>
    21. 			<a-button type="primary" danger>Primarya-button>
    22. 			<a-button type="primary">
    23. 				<a-icon type="wifi">a-icon>
    24. 			a-button>
    25. 			<a-button type="primary" shape="circle">
    26. 				<a-icon type="wifi">a-icon>
    27. 			a-button>
    28. 			<hr/>
    29. 			<h1>按钮组h1>
    30. 			<a-radio-group>
    31. 				<a-radio-button value="large">Largea-radio-button>
    32. 				<a-radio-button value="default">Defaulta-radio-button>
    33. 				<a-radio-button value="small">Smalla-radio-button>
    34. 			a-radio-group>
    35. 			<hr/>
    36. 			<h1>宽度按钮h1>
    37. 			<a-button type="primary" block>Primarya-button>
    38. 			<a-button block>Defaulta-button>
    39. 			<a-button type="dashed" block>Dasheda-button>
    40. 			<a-button danger block>Dangera-button>
    41. 			<a-button type="link" block>Linka-button>
    42. 		div>
    43. 		<script src="js/vue.min.js" type="text/javascript" charset="utf-8">script>
    44. 		<script src="js/antd.min.js" type="text/javascript" charset="utf-8">script>
    45. 		<script type="text/javascript">
    46. 			new Vue({
    47. 				el: "#app"
    48. 			})
    49. 		script>
    50. 	body>
    51.  
    52. html>

     

    通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。

    按钮的属性说明如下：

    属性说明类型默认值版本
    block将按钮宽度调整为其父宽度的选项booleanfalse
    danger设置危险按钮booleanfalse2.2.0
    disabled按钮失效状态booleanfalse
    ghost幽灵属性，使按钮背景透明booleanfalse
    href点击跳转的地址，指定此属性 button 的行为和 a 链接一致string-
    htmlType设置 button 原生的 type 值，可选值请参考 HTML 标准stringbutton
    icon设置按钮的图标类型v-slot-
    loading设置按钮载入状态boolean | { delay: number }false
    shape设置按钮形状default | circle | round'default'
    size设置按钮大小large | middle | smallmiddle
    target相当于 a 链接的 target 属性，href 存在时生效string-
    type设置按钮类型primary | ghost | dashed | link | text | defaultdefault

    事件 #

    事件名称说明回调参数版本
    click点击按钮时的回调(event) => void

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

    FAQ #

    如何移除 2 个汉字之间的空格 #

    根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 ConfigProvider的 autoInsertSpaceInButton 为 false。

  • 相关阅读:
    H7-TOOL的I2C接口方式脱机烧录操作方法，已经发布（2022-07-16）
    哪个牌子除甲醛产品效果好 目前除甲醛最好的净化器
    [AIGC] Kafka解析：分区、消费者组与消费者的关系
    pandas cut 的方法
    微服务架构 | 分布式存储 -算法
    将数据库中的数据接入Echarts图表
    js 小数相加 精度
    // 029 方阵行列互换
    android上架备案公钥和md5获取工具
    JDBC技术
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/127043168