80种奇奇怪怪的按钮，先睹为快！
本文详细讲解 View UI 中，Button 组件的样式配置和单击事件响应。
目录
如果你还没配置好 View UI 的开发环境，赶紧点击这里查看教程啦！
一、按钮样式
1.1 颜色
颜色是按钮的基础样式之一，通过设置Button 的 type属性，可以实现按钮颜色的变化。
目前View UI支持以下八种颜色，分别为：
primary、dashed、text、info、success、warning、error
分别对应下图八种颜色
配置方法很简单，就是给 Button 组件，加一个 type 属性即可
<Button type="error">测试按钮</Button>
1.2 大小
大小也是按钮的基础样式之一，通过设置Button 的 size 属性，可以实现按钮大小的变化。
目前View UI支持以下三种大小，分别为：
small、default、large
配置代码如下所示：
-
<Row :gutter="32">
-
<Col span="2">
-
<Button type="warning" size="small">测试按钮
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" size="default">测试按钮
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" size="large">测试按钮
</Button>
-
</Col>
-
</Row>
1.3 按钮形状
圆角决定了这个按钮的四个边缘是否光滑。
在实际开发中，通常会设置圆角，让界面更有美感。
目前View UI只支持圆角这一种形状
通过设置 Button 组件的 shape 属性，实现圆角。
-
<Col span="2">
-
<Button type="info" shape="circle">按钮25
</Button>
-
</Col>
1.4 背景透明
背景透明在 View UI 中又称为 幽灵属性。
下图设置了背景透明，可以透过按钮看到淡蓝色的背景。
通过设置 Button 组件的 ghost 属性 = true，实现背景透明。
-
<Col span="2">
-
<Button type="dashed" ghost>按钮13
</Button>
-
</Col>
1.5 按钮图标
按钮的文字前面或后面可以放置图标，从而让按钮的功能更加通俗易懂。
View UI 自带了很多ICON图标，一般情况下可以满足我们的开发需求。
可以使用 Button 组件的 icon属性，为按钮设置前置图标。
也可以通过在 Button 组件内，放置 Icon 组件，来实现按钮的前置、后置图标，但优先级小于 Button 组件配置的icon属性。
演示效果如下所示：
源代码如下所示：
-
<Row :gutter="32">
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi">测试按钮
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle">
-
测试按钮
-
<Icon type="ios-add-circle-outline" />
-
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle">
-
<Icon type="ios-add-circle-outline" />
-
测试按钮
-
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi">
-
<Icon type="ios-add-circle-outline" />
-
测试按钮
-
</Button>
-
</Col>
-
</Row>
1.6 其他样式
View UI 还支持其他的样式配置，因为不太常用，所以不再一一演示。
比如：
long 属性项，用于配置按钮宽度是否扩充至全屏
disabled 属性项，用于配置按钮是否被禁用，即无法被点击的样式
loading属性项，用于配置按钮是否显示加载中图标
html-type 属性项，用于兼容原生H5的提交属性
......
本文作者：郑为中
CSDN原文地址： https://zwz99.blog.csdn.net/article/details/115720476
二、 按钮事件
2.1 按钮传值
按钮，顾名思义就是按了之后能够扭动起来（就是能干事）。
我认为按钮在前端的作用，就是让C端用户主动去触发某个事件，完成人机交互。
其中很重要的一点，就是按钮点击传值问题，View UI 的按钮能不能传值？ 方不方便？
答案当然是 —— 能！
View UI 的 Button 组件 可通过 @click 配置该按钮的单击事件！
我分为四种情况，逐一测试
2.1.1 无传输值单击事件
按钮的单击事件，如果没有传参数，View UI 的 Button 组件会返回一个窗体对象，密密麻麻，包括点击的坐标值，屏幕宽高等等......
其实......这些东西对你来说，一点都没用。
对，你没听错！ 一点都没用！一点都没用！一点都没用！
那么则么让他有用起来呢？就需要传值！
-
<Col span="6">
-
<Button type="warning" shape="circle" @click="clickTest">无传输值
</Button>
-
</Col>
2.1.2 传输静态参数
在实际开发中，可能会遇到按钮需要传参的需求。
有一些的按钮是固定的，你点了他，就代表XXX的固定功能，那么可以考虑静态传参
-
<Col span="6">
-
<Button type="warning" shape="circle" @click="clickTest(3.14159)">传输数字
</Button>
-
</Col>
传递参数后，在单击事件中打印即可，效果如下图所示：
2.1.3 传递动态参数
很多情况下，需要根据实际情况传递动态的参数值。
-
<Col span="6">
-
<Button type="warning" shape="circle" @click="clickTest(testData)">传输动态内容
</Button>
-
</Col>
比如这个testData，是我自己定义的一个变量。
-
<script>
-
export
default {
-
name:
'test',
-
data() {
-
return {
-
testData:
'传输值'
-
}
-
},
-
methods: {
-
clickTest(e) {
-
console.log(e);
-
}
-
}
-
}
-
</script>
这样就可以实现 Button 组件的动态传参。
2.1.4 循环渲染传参
我在实际开发中，用的最多的就是 v-for 下按钮传值。
比如下面这样
-
<Row :gutter="32">
-
<Col span="6" v-for="(item,index) in userList" :key="index">
-
<Button type="warning" shape="circle" @click="clickTest(item)">循环渲染传值{{index}}
</Button>
-
</Col>
-
</Row>
userList 一般为后端传递过来的对象数组
我们需要给按钮的单击事件，传递数组中当前对象的，一个或多个属性值
-
<script>
-
export
default {
-
name:
'test',
-
data() {
-
return {
-
testData:
'传输值',
-
userList: [
-
{
id:
1,
name:
'ZWZ1'},
-
{
id:
2,
name:
'ZWZ2'},
-
{
id:
3,
name:
'ZWZ3'}
-
]
-
}
-
},
-
methods: {
-
clickTest(e) {
-
console.log(e);
-
}
-
}
-
}
-
</script>
这样就可以给按钮单击事件，传递相应的值
2.2 按钮跳转
有时会需要单击按钮打开某个网址。
比如C端用户单击按钮后，导出Excel（对接Java POI），就要访问后端 API 的 URL，实现快速导出Excel。
当然可以使用 JS 自带的方法来打开网址
-
test() {
-
window.open(
"https://blog.csdn.net/qq_41464123",
"_blank");
-
},
View UI 也为我们提供了快速跳转 URL 的方法，在 button 组件中，配置 to 属性即可。
View UI 还可以实现无痕浏览，满足开发者的多维需求。
-
<Row :gutter="32">
-
<Col span="6">
-
<Button to="https://blog.csdn.net/qq_41464123" type="warning" shape="circle">我的博客
</Button>
-
</Col>
-
<Col span="6">
-
<Button to="https://blog.csdn.net/qq_41464123" type="warning" shape="circle" replace>无痕浏览
</Button>
-
</Col>
-
<Col span="6">
-
<Button to="https://blog.csdn.net/qq_41464123" type="warning" shape="circle" target="_blank">新标签访问
</Button>
-
</Col>
-
</Row>
以上就是 View UI 的 Button 组件 常用的功能配置。
附：事件完整代码
-
<template>
-
<div class="hello">
-
<Divider> ZWZ普通传值
</Divider>
-
<Row :gutter="32">
-
<Col span="6">
-
<Button type="warning" shape="circle" @click="clickTest">无传输值
</Button>
-
</Col>
-
<Col span="6">
-
<Button type="warning" shape="circle" @click="clickTest(3.14159)">传输数字
</Button>
-
</Col>
-
<Col span="6">
-
<Button type="warning" shape="circle" @click="clickTest(testData)">传输动态内容
</Button>
-
</Col>
-
</Row>
-
<Divider> ZWZ循环渲染
</Divider>
-
<Row :gutter="32">
-
<Col span="6" v-for="(item,index) in userList" :key="index">
-
<Button type="warning" shape="circle" @click="clickTest(item)">循环渲染传值{{index}}
</Button>
-
</Col>
-
</Row>
-
<Divider> ZWZ测试结束
</Divider>
-
</div>
-
</template>
-
-
<script>
-
export
default {
-
name:
'test',
-
data() {
-
return {
-
testData:
'传输值',
-
userList: [
-
{
id:
1,
name:
'ZWZ1'},
-
{
id:
2,
name:
'ZWZ2'},
-
{
id:
3,
name:
'ZWZ3'}
-
]
-
}
-
},
-
methods: {
-
clickTest(e) {
-
console.log(e);
-
}
-
}
-
}
-
</script>
-
-
<style scoped>
-
.hello {
-
background-color:
rgb(
224,
249,
250);
-
}
-
</style>
附：样式完整Vue代码
-
<template>
-
<div class="hello">
-
<Divider> 基础按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button>按钮01
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary">按钮02
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed">按钮03
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text">按钮04
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info">按钮05
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success">按钮06
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning">按钮07
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error">按钮08
</Button>
-
</Col>
-
</Row>
-
<Divider> 幽灵按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button ghost>按钮11
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" ghost>按钮12
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" ghost>按钮13
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" ghost>按钮14
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" ghost>按钮15
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" ghost>按钮16
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" ghost>按钮17
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" ghost>按钮18
</Button>
-
</Col>
-
</Row>
-
<Divider> 圆角按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button shape="circle">按钮21
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" shape="circle">按钮22
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" shape="circle">按钮23
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" shape="circle">按钮24
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" shape="circle">按钮25
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" shape="circle">按钮26
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle">按钮27
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" shape="circle">按钮28
</Button>
-
</Col>
-
</Row>
-
<Divider> 带图标圆角按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button shape="circle" icon="ios-wifi">按钮31
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" shape="circle" icon="ios-wifi">按钮32
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" shape="circle" icon="ios-wifi">按钮33
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" shape="circle" icon="ios-wifi">按钮34
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" shape="circle" icon="ios-wifi">按钮35
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" shape="circle" icon="ios-wifi">按钮36
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi">按钮37
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" shape="circle" icon="ios-wifi">按钮38
</Button>
-
</Col>
-
</Row>
-
<Divider> 纯图标圆角按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" shape="circle" icon="ios-wifi">
</Button>
-
</Col>
-
</Row>
-
<Divider> 大尺寸圆角按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button shape="circle" icon="ios-wifi" size="large">按钮51
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" shape="circle" icon="ios-wifi" size="large">按钮52
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" shape="circle" icon="ios-wifi" size="large">按钮53
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" shape="circle" icon="ios-wifi" size="large">按钮54
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" shape="circle" icon="ios-wifi" size="large">按钮55
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" shape="circle" icon="ios-wifi" size="large">按钮56
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi" size="large">按钮57
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" shape="circle" icon="ios-wifi" size="large">按钮58
</Button>
-
</Col>
-
</Row>
-
<Divider> 拉长型圆角按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button shape="circle" icon="ios-wifi" size="large" long>按钮61
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" shape="circle" icon="ios-wifi" size="large" long>按钮62
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" shape="circle" icon="ios-wifi" size="large" long>按钮63
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" shape="circle" icon="ios-wifi" size="large" long>按钮64
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" shape="circle" icon="ios-wifi" size="large" long>按钮65
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" shape="circle" icon="ios-wifi" size="large" long>按钮66
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi" size="large" long>按钮67
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" shape="circle" icon="ios-wifi" size="large" long>按钮68
</Button>
-
</Col>
-
</Row>
-
<Divider> 加载按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button shape="circle" icon="ios-wifi" size="large" loading>按钮71
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" shape="circle" icon="ios-wifi" size="large" loading>按钮72
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" shape="circle" icon="ios-wifi" size="large" loading>按钮73
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" shape="circle" icon="ios-wifi" size="large" loading>按钮74
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" shape="circle" icon="ios-wifi" size="large" loading>按钮75
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" shape="circle" icon="ios-wifi" size="large" loading>按钮76
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi" size="large" loading>按钮77
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" shape="circle" icon="ios-wifi" size="large" loading>按钮78
</Button>
-
</Col>
-
</Row>
-
<Divider> 禁用按钮
</Divider>
-
<Row :gutter="32">
-
<Col span="2">
-
<Button shape="circle" icon="ios-wifi" size="large" disabled>按钮81
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="primary" shape="circle" icon="ios-wifi" size="large" disabled>按钮82
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="dashed" shape="circle" icon="ios-wifi" size="large" disabled>按钮83
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="text" shape="circle" icon="ios-wifi" size="large" disabled>按钮84
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="info" shape="circle" icon="ios-wifi" size="large" disabled>按钮85
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="success" shape="circle" icon="ios-wifi" size="large" disabled>按钮86
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="warning" shape="circle" icon="ios-wifi" size="large" disabled>按钮87
</Button>
-
</Col>
-
<Col span="2">
-
<Button type="error" shape="circle" icon="ios-wifi" size="large" disabled>按钮88
</Button>
-
</Col>
-
</Row>
-
<Divider> 按钮组合
</Divider>
-
<Row :gutter="32">
-
<Col span="4">
-
<ButtonGroup>
-
<Button shape="circle" icon="ios-wifi" size="large">按钮91-1
</Button>
-
<Button type="primary" shape="circle" icon="ios-wifi" size="large">按钮91-2
</Button>
-
</ButtonGroup>
-
</Col>
-
<Col span="8">
-
<ButtonGroup size="large">
-
<Button type="dashed" shape="circle" icon="ios-wifi" size="large">按钮92-1
</Button>
-
<Button type="text" shape="circle" icon="ios-wifi" size="large">按钮92-2
</Button>
-
<Button type="info" shape="circle" icon="ios-wifi" size="large">按钮92-3
</Button>
-
<Button type="success" shape="circle" icon="ios-wifi" size="large">按钮92-4
</Button>
-
</ButtonGroup>
-
</Col>
-
<Col span="4">
-
<ButtonGroup>
-
<Button type="warning" shape="circle" icon="ios-wifi" size="large">按钮93-1
</Button>
-
<Button type="error" shape="circle" icon="ios-wifi" size="large">按钮93-2
</Button>
-
</ButtonGroup>
-
</Col>
-
</Row>
-
</div>
-
</template>
-
-
<script>
-
export
default {
-
name:
'test',
-
}
-
</script>
-
-
<style scoped>
-
.hello {
-
background-color:
rgb(
224,
249,
250);
-
}
-
</style>
转载：https://blog.csdn.net/qq_41464123/article/details/115720476
查看评论