技术标签: iview View UI vue vue.js javascript
80种奇奇怪怪的按钮,先睹为快!
本文详细讲解 View UI 中,Button 组件的样式配置和单击事件响应。
目录
如果你还没配置好 View UI 的开发环境,赶紧点击这里查看教程啦!
颜色是按钮的基础样式之一,通过设置Button 的 type属性,可以实现按钮颜色的变化。
目前View UI支持以下八种颜色,分别为:
primary、dashed、text、info、success、warning、error
分别对应下图八种颜色
配置方法很简单,就是给 Button 组件,加一个 type 属性即可
<Button type="error">测试按钮</Button>
大小也是按钮的基础样式之一,通过设置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>
圆角决定了这个按钮的四个边缘是否光滑。
在实际开发中,通常会设置圆角,让界面更有美感。
目前View UI只支持圆角这一种形状
通过设置 Button 组件的 shape 属性,实现圆角。
<Col span="2">
<Button type="info" shape="circle">按钮25</Button>
</Col>
背景透明在 View UI 中又称为 幽灵属性。
下图设置了背景透明,可以透过按钮看到淡蓝色的背景。
通过设置 Button 组件的 ghost 属性 = true,实现背景透明。
<Col span="2">
<Button type="dashed" ghost>按钮13</Button>
</Col>
按钮的文字前面或后面可以放置图标,从而让按钮的功能更加通俗易懂。
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>
View UI 还支持其他的样式配置,因为不太常用,所以不再一一演示。
比如:
long 属性项,用于配置按钮宽度是否扩充至全屏
disabled 属性项,用于配置按钮是否被禁用,即无法被点击的样式
loading属性项,用于配置按钮是否显示加载中图标
html-type 属性项,用于兼容原生H5的提交属性
......
本文作者:郑为中
CSDN原文地址: https://zwz99.blog.csdn.net/article/details/115720476
按钮,顾名思义就是按了之后能够扭动起来(就是能干事)。
我认为按钮在前端的作用,就是让C端用户主动去触发某个事件,完成人机交互。
其中很重要的一点,就是按钮点击传值问题,View UI 的按钮能不能传值? 方不方便?
答案当然是 —— 能!
View UI 的 Button 组件 可通过 @click 配置该按钮的单击事件!
我分为四种情况,逐一测试
按钮的单击事件,如果没有传参数,View UI 的 Button 组件会返回一个窗体对象,密密麻麻,包括点击的坐标值,屏幕宽高等等......
其实......这些东西对你来说,一点都没用。
对,你没听错! 一点都没用!一点都没用!一点都没用!
那么则么让他有用起来呢?就需要传值!
<Col span="6">
<Button type="warning" shape="circle" @click="clickTest">无传输值</Button>
</Col>
在实际开发中,可能会遇到按钮需要传参的需求。
有一些的按钮是固定的,你点了他,就代表XXX的固定功能,那么可以考虑静态传参
<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>
比如这个testData,是我自己定义的一个变量。
<script>
export default {
name: 'test',
data() {
return {
testData: '传输值'
}
},
methods: {
clickTest(e) {
console.log(e);
}
}
}
</script>
这样就可以实现 Button 组件的动态传参。
我在实际开发中,用的最多的就是 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>
这样就可以给按钮单击事件,传递相应的值
有时会需要单击按钮打开某个网址。
比如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>
文章浏览阅读761次。.APS:存放二进制资源的中间文件,VC把当前资源文件转换成二进制格式,并存放在APS文件中,以加快资源装载速度。资源辅助文件。.BMP:位图资源文件。.BSC:浏览信息文件,由浏览信息维护工具(BSCMAKE)从原始浏览信息文件(.SBR)中生成,BSC文件可以用来在源代码编辑窗口中进行快速定位。用于浏览项目信息的,如果用source brower的话就必须有这个文件。可以在project options里去掉Generate Browse Info_def dsw dsp
文章浏览阅读3.4k次。需求现在有一份管线数据,表中含有字段buildTime说明了管线的建设日期,我们需要按时间段统计管线的数据 这是,我们需要对管线表中建设日期所对应的字段进行分类 实现如下: 实现对现有的数据进行分类判断过滤,使用到了 case whencase whencase when 实现了对数据的不同范围进行判断过滤并重新规范的过程(个人理解) 语法: CASE WHEN condition1_oracle筛选case when的字段
文章浏览阅读1.3w次,点赞5次,收藏51次。Gym是一个开发和比较强化学习算法的工具箱。它不依赖强化学习算法结构,并且可以使用很多方法对它进行调用。1 Gym环境这是一个让某种小游戏运行的简单例子。这将运行 CartPole-v0 环境实例 1000 个时间步,在每次迭代的时候都会将环境初始化(env.render)。运行之后你将会看到一个经典的推车杆问题import gymenv = gym.make('CartPole-v0')env.reset()for _ in rang..._python gym
文章浏览阅读3.2w次,点赞26次,收藏143次。脉冲神经网络学习笔记,是综述性质的学习笔记_脉冲神经网络的神经元综述
文章浏览阅读1.3k次。依赖注入方式-基于构造函数public class ScrewDriver{ private Header header; public ScrewDriver(Header header){ this.header = header; }}-基于Setter方法public class ScrewDriver{ private Header header; public...
文章浏览阅读258次。用Source Insight打开linux内核源码,搜索font,会发现有各种点阵字模。打开8*16的字模哈哈,是不是看起来是象形文字,这就是LCD屏幕显示字符的底层原理,就是一个灯的亮灭。
文章浏览阅读264次。Natasha is going to fly on a rocket to Mars and return to Earth. Also, on the way to Mars, she will land on n − 2 intermediate planets. Formally: we number all the planets from 1 to n . ..._codeforcesc. fly
文章浏览阅读8.6k次,点赞22次,收藏32次。项目场景:我在用QT做画板的时候想给MainWindows添加带有图片的工具栏,但是遇到了运行窗口图片显示不出来的问题,,但是我明明在UI界面添加了!!!问题描述:解决方案:1.找到左侧的项目,然后点击取掉勾选Shadow build,然后对项目进行重新构建!!!(一定要记得)2.然后我们再运行看看结果..._qt中ui界面显示正常,运行之后就不显示了
文章浏览阅读296次。编写一个JFrame窗口,要求如下:在窗口的NORTH区放置一个JPanel面板。JPanel面板放置如下组件: (1) JLable标签,标签文本为“兴趣”,右边接着是三个JCheckBox多选按钮,选项分别是“羽毛球”、“乒乓球”、“唱歌”。可以多选。 (2) JLabel标签,标签文本为“性别”,右边接着是两个JRadioButton按钮,选项分别是“男”、“女”。置成单选按钮,提示:_java 8 训练题
文章浏览阅读1.7k次。自从推荐主备配置系列以来,许多网友一起与我沟通配置的方法。这两天终于有时间了,决定继续推出华为的。共分两部分,路由模式与透明模式!双机热备,所谓双机热备其实是双机状态备份,当两台防火墙,在确定主从防火墙后,由主防火墙进行业务的转发,而从防火墙处于监控状态,同时主防火墙会定时向从防火墙发送状态信息和需要备份的信息,当主防火墙出现故障后,从防火墙...
文章浏览阅读689次。题目:习题11-3计算最长的字符串长度(15分)题目要求:本题要求实现一个函数,用于计算有n个元素的指针数组s中最长的字符串的长度。函数接口定义:int max_len( char *s[], int n );其中n个字符串存储在s[]中,函数max_len应返回其中最长字符串的长度。裁判测试程序样例:#include <stdio.h>#include <string.h>#include <stdlib.h>#defi.._题要求实现一个函数,用于计算有n个元素的指针数组s中最长的字符串的长度。
文章浏览阅读2.3k次。实验环境:操作系统Centos7.6,原生Linux系统内核版本3.10;实现租户路由域间通信的方式选择——vrf与netns之间:因为Linux内核自4.8以后才较好支持vrf功能,所以采用vrf方式实现VPP到FRR通信需要升级Linux系统内核;但现有生产环境采用原生3.10版本,升级系统版本会产生不稳定风险,例如vpp通过网卡驱动接管虚拟网卡问题等;同时系统版本3.10已很好支持net..._netns空间内开启vtysh