Ant Design Vue Ant Design Vue组件库提供了大量图标按钮和各种按钮样式,包括按钮的类型、按钮的形状、按钮的大小、按钮的加载状态和禁用状态等。
Botton组件使用<a-button>标签定义,在<a-button>标签中可以通过type、disabled、loading等属性定义按钮的样式。
<a-button>标签的常用属性如表6-10所示。
1 <template>
2 <div :style="( background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' n
3 <a-button type="primary"size="large">主按钮</a-button>
4 <a-button>次按钮</a-button>
5 <a-button type="dashed"size="small">虚线按钮</a-button>
6 <a-button type="text"danger>文本按钮</a-button>
1 <a-button type="link">链接按钮</a-button>
8 <a-button type="primary"ghost>背景透明</a-button>
9 <a-button type="primary"shape="circle">圆形</a-button>
10 <a-button type="primary"shape="round">圆角</a-button> 为了帮助
11 <a-button type="primary"loading>加载中...</a-button> 在这里将内容
12 <a-button type="primary"> 以参考本书配
23 <template #icon><SearchOutlined /></template>
14 搜索
25 </a-button>
16 </div>
17</template>
18<script setup>
19 import SearchOutlined from '@ant-design/icons-vue'
20</script>