iview图表_【技术博客】iview常用工具记录
对于前端开发来说,美工似乎是必不可少的工作。但并不是每个开发团队都配备了美工人员(比如敏杰开发团队),所以一套成熟的UI库和开发页面知道对于我们这样没有美工人员的团队就显得非常必要。
而iview就是一套这样的成熟UI库,它几乎包含了页面基础UI需要的所有组件。下文也会先介绍iview的基础组件,然后在举几个iview炫酷的代码示例。
iview概述
iview包含的元素有:布局、导航、表单、消息提醒、图表等组件。下面简略说一下这些元素典型组件的使用方法和效果。
布局
当拿到一个网页的开发任务,前端如何布局是一个让人头秃的问题,不过view提供了模板,这也是我们采用的header+content+footer的布局方式。
在上图布局中,header左侧部分是前端界面常见的导航栏。
Item 1
Home
Content
...
除了页面的整体布局,内容的分区,也是常见的前端需求。
比如下面文本框的排布,采用Row & Col代码实现。
作者
链接(URL)
http://
导航
导航栏的功能在布局一节中已经说明,这部分的主要说说分页的实现。当一面的内容过多或者需要展示的内容过多时,就需要分页的功能。而且分页是需要前后端配合完成的,下面展示我们文献分页展示的功能。
:total="articleTotal"
:current="page.current"
:page-size="10"
show-total show-elevator
@on-change="changePage"
>
changePage(pageIndex) {
this.page.current = pageIndex;
this.$emit('reloadData', this.page.current);
this.$Message.success(`Change to Page ${pageIndex}`);
},
分页的功能容易实现,但是需要后端对数据也设计分段,而且保证本页路由跳转返回时,依旧保留之前的页面,需要用使用Router传递保存页面参数。
表单
表单部分是大多数内容输入需要涉及的内容,下图是我们用户意见反馈的一个表单。该表单采用的是一种消息提醒的modal模块,在modal的基础上加入input和rate两种表单,来获得用户的评分。
v-model="UserReportModal"
title="期待您的宝贵建议"
@on-ok="okModal"
@on-close="cancelModal"
@on-cancel="cancelModal">
您的联系方式(E-Mail)
您对我们网站打多少分?
您对我们网站的建议?
消息提醒
iview中有多种消息提醒的模板,比如:
message & notice:成功的消息,比如完成某个操作
modal:比较严重的消息,比如前往索引不存在等
tooltip & poptip:适合某个操作的补充说明
下面的代码也枚举我们使用消息提醒的一些方式
this.$Message.success(`success`);
this.$Notice.success({ title: 'success' });
v-model="modal"
title="MODAL"
:styles="{top: '20px'}"
@on-cancel="cancelModal">
this.modal = true;
A balloon appears when the mouse passes over this text
Hover
图表
图表也是网页开发中常见的两种组织形式。我们项目在文献、随笔管理中多次用到了表格,下面介绍一下表格的应用。
首先在html内插入table的标签,之后确定columns的值,同时也要确定传入的数据值。
:columns="columns"
:data="tableData"
border
ref="selection">
export default {
props: {
tableData: {
type: Array,
required: true,
},
},
data() {
return {
columns: [
{
type: 'expand',
width: 50,
render: (h, params) => h(EssayTableExpand, {
props: {
row: params.row,
},
}),
},
{
type: 'selection',
width: 60,
align: 'center',
},
{
title: 'Title',
key: 'title',
},
],
}
}
};
iview组件组合
Render
render提供了在JavaScript代码中书写html标签的功能,比如上图在table中内嵌button触发操作的功能,就是由下面render函数提供。render函数的写法,也由标签、属性、显示内容三个部分组成。
render: (h, params) => h('div', [
h('Button', { // 标签
props: { // 属性
icon: 'md-document', size: 'small', type: 'text',
},
style: { marginRight: '5px'},
on: {
click: () => {
this.viewEssay(params.index);
},
},
'查看随笔'), // 显示内容
},
},
页面切换
通过switch按钮,来达到切换整个页面的效果,也是非常炫酷的~
切换到图界面:
切换到表界面:
代码如下:
size="large"
@on-change="onChangeViewStyle">
图
表
stripe
:columns="columns"
:data="tableData">
export default {
data() {
return {
viewStyle: 'card',
},
},
methods: {
onChangeViewStyle() {
if (this.viewStyle === 'card') {
this.viewStyle = 'table';
} else {
this.viewStyle = 'card';
}
this.$Notice.success({ title: '图表转换成功' });
},
}
}
iview图表_【技术博客】iview常用工具记录相关推荐
- 手把手教你写高质量Android技术博客,画图工具,录像工具,Markdown写法
前言 作为程序员,写博客是一件很有意义的事情,可以加深自己对技术的理解,可以结交更多的朋友,记录自己的技术轨迹,而且分享可以让更多的人从中受益,独乐乐不如众乐乐嘛. 但是要写好博客也不是件容易的事,一 ...
- 博客编写常用工具介绍
作者:三十三重天 博客: http://www.zhouhuibo.club 截图/录屏 ScreenToGif ScreenToGif是个强大的Gif录制/剪辑工具' 官网地址 snipaste S ...
- unity开宝箱动画_[技术博客]Unity3d 动画控制
在制作游戏时,导入的箱子模型本身自带动画.然而,它的动画是一个从打开到关闭的完整过程,并且没有给出控制打开关闭的方法. 最直接的想法是对该动画进行拆分,再封装成不同的动画状态,但是不巧的是,这个动画被 ...
- 如何运营个人技术博客
前言 本篇和大家聊聊如何运营个人技术博客,定位下做技术写作的目的,有哪些交流平台和输出方式,如何把控内容质量,整理了一些写作技巧和自己常用的写作工具,最后分享下如何在有限的时间里合理安排保证写作与 ...
- 程序员常用的六大技术博客类
程序员越来越多,相对应的博客,论坛,社区也乱花渐欲迷人眼,呈现出一个逐渐增长的趋势,以下写的都是一些自己常用的平台,这些平台在百度上面的权重还是很高的,偶尔搜索关键字还能跳出自己写过的博客,于是稍微的 ...
- python脚本监控网站状态 - 赵海华_运维之路 - 51CTO技术博客
python脚本监控网站状态 - 赵海华_运维之路 - 51CTO技术博客 python脚本监控网站状态 2013-01-09 09:21:02 标签:监控 python 原创作品,允许转载,转载时请 ...
- python自我总结笔记、加上一些自己思考_写技术博客那点事(此篇文章 鼓励自己 多思考 多学习 多做 )...
前言 写文章是一个短期收益少,长期收益很大的一件事情,人们总是高估短期收益,低估长期收益.往往是很多人坚持不下来,特别是写文章的初期,刚写完文章没有人阅读会有一种挫败感,影响了后期创作. 从某种意义上 ...
- java web论文_(定稿)毕业论文基于JavaWeb技术博客项目的设计论文(完整版)最新版...
<[毕业论文]基于Java Web技术博客项目的设计论文.doc>由会员分享,可免费在线阅读全文,更多与<(定稿)毕业论文基于Java Web技术博客项目的设计论文(完整版)> ...
- 最全的BAT Google等团队技术博客集合
[转载 https://www.jianshu.com/p/7646721c0fc1] [转载请注明原文出处,谢谢!https://www.jianshu.com/p/7646721c0fc1] 前言 ...
- 邵奈一的技术博客导航
大家好,我是邵奈一,一个不务正业的程序猿.正儿八经的斜杠青年. 1.这几年,我整理了很多IT技术相关的教程给大家,爱生活.爱分享. 2.博客导航跳转(请收藏):邵奈一的技术博客导航 3.此篇为本博客的 ...
最新文章
- 如何有效完成医学科研课题设计?
- iframe 按比例缩放_不按常理出牌!5个Excel灵异事件,能让你崩溃
- java service wrapper日志参数设置及优化
- 恢复二叉搜索树Python解法
- 乱用信用卡?黑名单见
- java foreach和for循环区别_java相关:老生常谈foreach(增强for循环)和for的区别
- Centos7 开启网卡配置IP并连接xshell——转
- [转载] Python列表操作
- shell中的expect命令
- SQL注入-联合注入
- matlab避免使用for_MATLAB新手学习技巧第二波来袭
- Android系统中震动功能的测试
- tfs 解除锁定命令
- 进制转换演示及其Python示例
- docker 安装与部署
- 汇编语言伪指令详解(附实例)
- 同余式 和 费马小定理
- Google maps及51ditu的图片切割及存储方法
- 解决接收 ACTION_PACKAGE_REPLACED 的广播会另外接收到 REMOVED 和 ADDED 的问题
- TCP/IP网络编程之多进程服务端(二)