微信搜索【大奇测试开】,关注这个坚持分享测试开发干货的家伙。

回归主线更新,由于本次知识点只有一个,就不给思维导图了,在上系列测试平台开发实践中主要学习了页面直接的转跳方法和远程搜索的如何做,最终实现了提测的添加的过程,这里补下效果图和测试结果。

演示1: 跳转独立新页面做form表单并支持返回上一页

演示2: 输入关键字进行远程多数据的搜索选择,并且回带一些默认配置数据

演示3: 输入必填信息提交成功自动返回上一页面刷新数据

查看是否收到邮件,正常收到邮件没问题,在这里如果你还不清楚邮件这个是如何处理的,请往前翻看之前发布的文章。

ICON的使用

接下来通过练习对提测平台菜单的一个小小的前端优化,了解 项目图标的使用方法,注意到菜单到目前为止都是相同的默认图标,这个其实是可以进行更改的,目前element-ui admin这个框架版本菜单部分需要使用自定义的资源,因此需要通过在icon资源网站下载合适图标(.svg格式),放到前端代码路径/scr/icons/svg目录下,然后通过直接指定名字就可以了。这里推荐“阿里巴巴图标矢量库”,资源比较丰富,可以授权非商业化自由使用。

动手优化菜单图标,这里为了验证效果,两种方式分别找两个图标,修改TPMWeb/src/router/index.js 中 icon值,一顿搜索-下载-重名-导入-修改变量后,编码的内容如下,这里尝试了中英文都支持,但对于编程命令什么还是建议全部为英文的最为妥当。

优化这部分后,启动看下前后的改变,是不是看着舒服了。

另外一种在其他 控件或单独使用Icon,比如之前开发的一些添加按钮上或有 + 的图标,这里顺便就讲解下默认图标组件的使用。

从官方文档看有两种模式,一个是用 <i class="对应版本图标名称"> ,另外一个是对应组件有icon这个属性的,举个例子:将之前的产品管理页面的搜索按钮改造成一个搜索图标按钮,就会有如下的效果。

<el-button icon="el-icon-search" circle></el-button>

其实在其他地方也可以通过自定义的样式进行组合使用,具体使用的时候可以再说说。

最后扩展一下最上边的说的iconfont资源库,是支持自己账号创建资源项目,将自己的设计icon或者别人设计好的免费资源添加到自己的项目,然后通过不同的引用方式引入后,直接在线使用,实际测试font class方式:

步骤1:创建项目->搜索->添加到购物车->点击列表添加到项目

步骤2: 切换到font class 方式下(其他方式可以点击官方右侧使用帮助查看。),生成一个css连接代码,将其添加到public/index.html 的head中,这里使用link的引用。

步骤3: 通过<i class="iconfont 项目里图标名称"></i>进行使用,再拿产品这个添加按钮改动下代码

<el-button type="primary"  style="float:right" @click="dialogProduct()">
<i class="iconfont tpm-code"></i>
新增
</el-button> 

看下引用的效果,这样的好处就是可以在线管理属于自己的一套icon库了。

好了,偷个懒本次就更新这么多吧,代码也不多,源码等下次更新一并打TAG提交。

坚持原创,坚持实践,坚持干货,如果你觉得有用,请点击推荐,也欢迎关注我博客园和微信公众号。

 

测试开发【提测平台】分享14-Vue图标Icon几种用法并利用其一优化菜单的更多相关文章

  1. 分享一下vue ui的分页的用法

    var newToAddLeave = function(){ var goIndex = { template:` <i-table :columns="overTimeList.c ...

  2. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  3. Element Vue 开箱即用框架如何使用-测试开发【提测平台】阶段小结(二)

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 上一篇总结了后端服务接口的开发,这篇我们主要来总结下前后端分离开发中的前端部分,主要是开箱即用的框架介绍和之前章节组件的梳理和部分的扩展内 ...

  4. 测试开发【提测平台】分享3-正式开发产品需求&项目初始化

    上两个分享主要是介绍和演示基本前后端所要使用的框架,接下来我们将正式进入到[提测平台的开发] 提要先给出依赖和内容点: 提测平台定义和产品原型需求说明 使用github创建代码仓库进行项目管理 Fla ...

  5. 测试开发【提测平台】分享13-远程搜索和路由$route使用实现新建提测需求

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本篇继续提测平台开发,按惯例先给出学习的思维导图,以便快速了解学习知识和平台功能实现的重点. 基本知识点学习 远程搜索 显示的数据通过输入 ...

  6. 测试开发【提测平台】分享9-DBUntils优化数据连接&实现应用搜索和分页功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 从本期开始知识点讲以思维导图的形式给出,内容点会按照讲解-应用-展示的形式体现,这样会更清晰些. DBUntils连接池 在项目中链接数据 ...

  7. 测试开发【提测平台】分享10-Element UI抽屉和表单校验&增改接口合并实现应用管理

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 开篇说个小讨论,一个群里聊天聊到关于更新篇章的长度,是小篇幅多次,还是每次按照一个小完整的功能,我个人的是按照后种来的,主要的思考就是希望 ...

  8. 测试开发【提测平台】分享11-Python实现邮件发送的两种方法实践

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 按照开发安排,本篇本应该是关于提测页面的搜索和显示实现,怕相似内容疲劳,这期改下内容顺序,将邮件服务的相关的提前,在之前的产品需求和原型中 ...

  9. 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...

随机推荐

  1. selenium--常用判断

    获取页面 title 的方法可以直接用 driver.title 获取到,然后也可以把获取到的结果用做断言.1.首先导入 expected_conditions 模块:from selenium.we ...

  2. 使用ffmpeg进行视频图片提取

    环境:windows10-x64 ffmpeg的功能很强大,可以进行音频和视频的处理,这里记录下需要从视频文件提取图片的情况. ffmpeg官方地址:https://www.ffmpeg.org/使用 ...

  3. xshell连接VMware中的Linux

    [前言]最近想压测一下ITOO的考试系统,所以想在自己电脑上安装一下linux,然后安装一下jmeter进行压测一下. 不过为什么要连接xshell呢,因为在虚拟机上总是会和主机切换鼠标,而且也不能粘 ...

  4. 小白自制Linux开发板 五. Debian文件系统制作,以及WIFI配置、交换分区配置

    该片文章将完整记录一个Debian的最小文件系统的生成,以及自定义配置WIFI组件.网络组件和交换分区配置 本文章参考:https://whycan.com/t_4236.htmlhttp://www ...

  5. python的参数传递是值传递还是引用传递??

    函数参数传递机制,传值和引用的是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传递. 值传递(pa ...

  6. 一站式交付体验:云效+Kubernetes

    背景 云效依托于阿里巴巴研发效能多年规模化持续交付,赋能云上开发者专为云端用户提供的一站式研发协作平台.Kubernetes,由Google开源的容器集群管理平台,面向运维侧提供自动化的集群和应用管理 ...

  7. Object.create 和 Object.assign

    Object.assign(target, ...source) 1.Object.assign方法只会拷贝源对象自身(不包括原型)的并且可枚举的属性到目标对象,使用源对象的get和目标对象的set, ...

  8. Scrum Meeting 0427

    零.说明 日期:2021-4-27 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 qsy PM&前端 完成部分登录,注 ...

  9. Ruby on Rails 单元测试

    Ruby on Rails 单元测试 为什么要写测试文件? 软件开发中,一个重要的环节就是编写测试文件,对代码进行单元测试,确保程序各部分功能执行正确.但是,这一环节很容易被我们轻视,认为进行单元测试 ...

  10. Machine learning(3-Linear Algebra Review )

    1.Matrices and vectors Matrix :Rectangular array of numbers a notation R3×3 Vector : An n×1 matrix t ...