vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue
2024-06-02 07:05:02
vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue
- 1.组件注册
- 1.按钮类型
- 2.按钮组合
- 3.不可用状态
- 4.幽灵按钮
- 5.图标按钮
- 6.加载中状态
- 7.多个按钮组合
- 8.按钮尺寸
- 9.block 按钮
- 2.API
- 1.属性：
- 2.事件
1.组件注册
import { Button } from ‘ant-design-vue’;
Vue.use(Button);
1.按钮类型
按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
<template><div><a-button type="primary">Primary</a-button><a-button>Default</a-button><a-button type="dashed">Dashed</a-button><a-button type="danger">Danger</a-button><a-button type="link">Link</a-button></div>
</template>
2.按钮组合
可以将多个 Button 放入 Button.Group 的容器中。
通过设置 size 为 large small 分别把按钮组合设为大、小尺寸。若不设置 size，则尺寸为中。
<template><div id="components-button-demo-button-group"><h4>Basic</h4><a-button-group><a-button>Cancel</a-button><a-button type="primary">OK</a-button></a-button-group><a-button-group><a-button disabled>L</a-button><a-button disabled>M</a-button><a-button disabled>R</a-button></a-button-group><a-button-group><a-button type="primary">L</a-button><a-button>M</a-button><a-button>M</a-button><a-button type="dashed">R</a-button></a-button-group><h4>With Icon</h4><a-button-group><a-button type="primary"><a-icon type="left" />Go back</a-button><a-button type="primary">Go forward<a-icon type="right" /></a-button></a-button-group><a-button-group><a-button type="primary" icon="cloud" /><a-button type="primary" icon="cloud-download" /></a-button-group></div>
</template>
<style>
#components-button-demo-button-group h4 {margin: 16px 0;font-size: 14px;line-height: 1;font-weight: normal;
}
#components-button-demo-button-group h4:first-child {margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {margin-right: 8px;
}
</style>
3.不可用状态
添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变
<template><div><a-button type="primary">Primary</a-button><a-button type="primary" disabled>Primary(disabled)</a-button><br /><a-button>Default</a-button><a-button disabled>Default(disabled)</a-button><br /><a-button type="dashed">Dashed</a-button><a-button type="dashed" disabled>Dashed(disabled)</a-button><br /><a-button type="link">Link</a-button><a-button type="link" disabled>Link(disabled)</a-button><div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }"><a-button ghost>Ghost</a-button><a-button ghost disabled>Ghost(disabled)</a-button></div></div>
</template>
4.幽灵按钮
幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
<template><div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }"><a-button type="primary" ghost>Primary</a-button><a-button ghost>Default</a-button><a-button type="dashed" ghost>Dashed</a-button><a-button type="danger" ghost>Danger</a-button><a-button type="link" ghost>Link</a-button></div>
</template>
5.图标按钮
当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。
<template><div><a-button type="primary" shape="circle" icon="search"></a-button><a-button type="primary" icon="search">Search</a-button><a-button shape="circle" icon="search" /><a-button icon="search">Search</a-button><a-button shape="circle" icon="search" /><a-button icon="search">Search</a-button><a-button type="dashed" shape="circle" icon="search" /><a-button type="dashed" icon="search">Search</a-button></div>
</template>
6.加载中状态
第三个按钮为悬浮:
添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
<template><div><a-button type="primary" loading>Loading</a-button><a-button type="primary" size="small" loading>Loading</a-button><br /><a-button type="primary" :loading="loading" @mouseenter="enterLoading">mouseenter me!</a-button><a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">延迟1s</a-button><br /><a-button shape="circle" loading /><a-button type="primary" shape="circle" loading /></div>
</template>
<script>
export default {data () {return {loading: false,iconLoading: false,}},methods: {enterLoading () {this.loading = true},enterIconLoading () {this.iconLoading = { delay: 1000 }},},
}
</script>
7.多个按钮组合
按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 Dropdown.Button 中组合使用。
<template><div><a-button type="primary">Primary</a-button><a-button>secondary</a-button><a-dropdown><a-menu slot="overlay" @click="handleMenuClick"><a-menu-item key="1">1st item</a-menu-item><a-menu-item key="2">2nd item</a-menu-item><a-menu-item key="3">3rd item</a-menu-item></a-menu><a-button>Actions <a-icon type="down" /></a-button></a-dropdown></div>
</template>
<script>
export default {methods: {handleMenuClick(e) {console.log('click', e);}}
}
</script>
8.按钮尺寸
按钮有大、中、小三种尺寸。
通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。
<template><div><a-radio-group :value="size" @change="handleSizeChange"><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><br /><br /><a-button type="primary" :size="size">Primary</a-button><a-button :size="size">Normal</a-button><a-button type="dashed" :size="size">Dashed</a-button><a-button type="danger" :size="size">Danger</a-button><a-button type="link" :size="size">Link</a-button><br /><a-button type="primary" shape="circle" icon="download" :size="size" /><a-button type="primary" icon="download" :size="size">Download</a-button><br /><a-button-group :size="size"><a-button type="primary"><a-icon type="left" />Backward</a-button><a-button type="primary">Forward<a-icon type="right" /></a-button></a-button-group></div>
</template>
<script>
export default {data () {return {size: 'large',}},methods: {handleSizeChange (e) {this.size = e.target.value},},
}
</script>
9.block 按钮
block属性将使按钮适合其父宽度。
<template><div><a-button type="primary" block>Primary</a-button><a-button block>Default</a-button><a-button type="dashed" block>Dashed</a-button><a-button type="danger" block>Danger</a-button><a-button type="link" block>Link</a-button></div>
</template>
2.API
1.属性：
推荐顺序为：type -> shape -> size -> loading -> disabled
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled
|
按钮失效状态 |
boolean
|
false
|
ghost
|
幽灵属性，使按钮背景透明，版本 2.7 中增加 |
boolean
|
false
|
href
|
点击跳转的地址，指定此属性 button 的行为和 a 链接一致 |
string
|
-
|
htmlType
|
设置 button 原生的 type 值，可选值请参考 HTML 标准
|
string
|
button
|
icon
|
设置按钮的图标类型 |
string
|
-
|
loading
|
设置按钮载入状态 | `boolean | { delay: number }` |
shape
|
设置按钮形状，可选值为 circle round 或者不设
|
string
|
-
|
size
|
设置按钮大小，可选值为 small large 或者不设
|
string
|
default
|
target
|
相当于 a 链接的 target 属性，href 存在时生效 |
string
|
-
|
type
|
设置按钮类型，可选值为 primary dashed danger link 或者不设
|
string
|
-
|
block
|
将按钮宽度调整为其父宽度的选项 |
boolean
|
false
|
2.事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
click
|
点击按钮时的回调 |
(event) => void
|
vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue相关推荐
- vue基础小节 v-mode属性双向绑定 跑马灯 十秒挑战 计算器 v-for和key属性 v-if与v-show用法区别 tap切换
vue代码基本结构 <!-- 视图层 --><div class="app"><!-- 差值表达式 --><div>{{mge}} ...
- html里面的按钮标记是什么意思,html button标签是什么意思？html button标签的使用细节...
html button标签是什么意思?html button标签怎么改变大小的三种方法你知道吗?这篇文章为大家讲解了HTML button标签是什么意思,还有关于button标签改变大小的三种方法 h ...
- android 多个按钮排列,Android开发消除横向排列的多个Button之间的空隙
一.问题重述 摘要里描述的可能不太清楚,问题如下图: 如何消除Button1和Button2之间的空隙,以及Button与左右边界之间的空隙? 二.问题根源 这里出现的空隙其实是Button的背景图片 ...
- Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
- R语言plotly包可视化线图（line plot）、使用restyle参数自定义设置可视化结果中线条的颜色、使用按钮动态切换线条的颜色(change line color with button)
R语言plotly包可视化线图(line plot).使用restyle参数自定义设置可视化结果中线条的颜色.使用按钮动态切换线条的颜色(change line color with button i ...
- Vue的Watch事件-如何监听对象的属性(字段中间带有点)
正常监听一个属性的字段 <script>window.custFormComponentMixin ={data: function () {return {"test" ...
- 在html中搜索按钮事件,html中button绑定点击事件的几种方法介绍
HTML中为button绑定事件的方式有三种. 例如以下标签: submit 一.使用jquery进行绑定$('#btn_submit').click(function(){ }); 二.使用原生js ...
- Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章 一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结 二.模板语法 1.插值语法 2.指令语法 三.数据绑定 1.单向数据绑定(v-bind) 2 ...
- 在可编辑表格EditorGrid中，我选择一行已输入的数据，点击删除按钮，该行数据将被删除，然后当我点击表单提交按钮时，已经被删除的那一行数据仍然被插入数据库中...
为什么80%的码农都做不了架构师?>>> 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...
最新文章
- C++ 笔记（05）— 变量（变量定义、声明、初始化、extern关键字、变量之间转换）
- 高精度垃圾分类模型开发与硬件集成
- 神经网络检测三相电机缺相
- Delphi和C++数据类型对照表
- spss分析qpcr数据_SPSS 数据分析，掌握这 6 大模块就够了！
- 标记【新公司】！！！！！！！！！！
- ROS探索总结（十二）——坐标系统
- linux redis客户端_为什么单线程Redis能那么快？
- 高德，百度，Google地图定位偏移以及坐标系转换
- mysql连表的sql语句_sql语句之连表操作
- c#压缩解压缩bzip2、tar、zip、gzip、deflate、ntdll
- [USACO13NOV]Crowded Cows【暴力枚举】
- python实现批量将域名解析成ip
- 过去一年对我帮助最大的三本书
- const T vs. T const by Dan Saks
- 关于快递查询接口的实现
- ucos 和uclinux的区别及各自的特点
- 遇上Android客户端打包党，该怎么办？
- Android之ContextMenu的使用方法以及与OptionMenu的区别
- Android TextView垂直滚动，并精准定位到最后一行