首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【实战】Vue.js 图标选择组件开发

在项目中本人使用的是 Fontawesome 图标库方案,使用它是因为提供的可用图标比较丰富,基本上不需要特意去找合适的图标,直接把它的图标库下载过来,免费的有800多个。...name放到一个 solid.js 文件中,输出为数组,在组件中引入,然后就是循环数组 iconList,输出i标签,Fontawesome 的使用方式是:<i class="fas fas-<em>图标</em>name...在组件平级新建一个 index.<em>js</em> 文件 image.png import IconsCompontent from '....,这里是所有组件的集合 image.png 最后一步是在 main.<em>js</em> 中注册: import CustomComponents from '....原文链接:https://blog.zhangbing.site/2018/12/01/Vue-<em>js</em>-<em>图标</em>选择组件实践/ 作者简介:做工程不做码农(微信公众号同名),Web前端工程师,7年开发经验,坐标杭州

3.2K10

文末赠书:手把手教你如何制作可视化大屏!

可以看到,这是一个名为“上市公司全景概览”的可视化大屏,展示内容包含了上市公司地域分布、行业分布、股票情况及预测、市值排行、上市公司数等。...展示形式包含环形图、双轴图(柱状图+折线图)、地图、条形图、数值。 接下来,我们从代码结构拆解一下这个案例。 首先,通过下图可以看出该项目由5部分组成。 ?...分别是css、data、img、js和html,其中css是设置一些样式、data是数据来源,打开后可以看到是json格式数据,如下图所示。 ?...还有一些图标符号等: ? Js文件夹中包含着一些使用到的js文件,如下图所示。 ? 以上文件夹的内容通过html调用,打开这个index.html,这是一个典型的html: ?...通过 标签加载js文件: ? Img中的图片通过img标签加载: Data中的json数据通过ajax方式加载: ?

53110

手把手教你如何制作可视化大屏!

可以看到,这是一个名为“上市公司全景概览”的可视化大屏,展示内容包含了上市公司地域分布、行业分布、股票情况及预测、市值排行、上市公司数等。...展示形式包含环形图、双轴图(柱状图+折线图)、地图、条形图、数值。 接下来,我们从代码结构拆解一下这个案例。 首先,通过下图可以看出该项目由5部分组成。 ?...分别是css、data、img、js和html,其中css是设置一些样式、data是数据来源,打开后可以看到是json格式数据,如下图所示。 ?...还有一些图标符号等: ? Js文件夹中包含着一些使用到的js文件,如下图所示。 ? 以上文件夹的内容通过html调用,打开这个index.html,这是一个典型的html: ?...通过 标签加载js文件: ? Img中的图片通过img标签加载: Data中的json数据通过ajax方式加载: ?

1K20

前端开发中常用资源收集(网站小图标、css、js 框架等)

theme=metronic 网站小图标制作: 链接:http://app.baidu.com/app/enter?...wekf.qq.com font-awesome: 链接:http://www.bootcss.com/p/font-awesome/#icons-new 简介:专为Bootstrap设计的,一个字体文件, 249 个图标...icon: 链接:http://loadinfo.net/ 简介:提供各种形式的loading jif,可以自己编辑效果,只有你想不到,没有他没有的 事例:http://loadinfo.net/ 点击每个图标即可编辑...十四像素: 链接:http://www.14px.com 简介:致力于web标准化和兼容性解决反感的一个blog 移动端js框架: 链接:http://zeptojs.com/ 简介:zepto.js...更重要的是这个JS框架,是超轻量级的,只有5KB。zepto.js的语法借鉴并且兼容jQuery。

3.1K50

CAD入门系列

圆角:把直角 改成 圆角 操作,点击圆角的图标打上一个r(指定圆角半径) + 输入半径(看你自身数入,假设这里输入的值为5),选择两个直线的点分别点击左右上下是任意点击的。 ​ ​...注意:这两种控制是可以互换的,点下倒三角型的图标。它们并不是独立的,而是具有相互关联性质的。拓展:用上面连接线的话,可以用光顺曲线,在圆角倒角的下面。...---- 矩形阵列 描述:按任意 行、以及 列 和层级组分布对象副本。 创建选定对象的副本的行和列。如下图所示 ​ 当然它还可以进行阵列创建,这里就是可以对上面的图形进行修改。...---- 路径阵列  描述:沿整个路径或部分路径平均分布对象副本。路径阵列也是非常好用的。 路径可以是直线、多段线、三维多段线、样条曲线、螺旋、圆弧、圆等。...---- 环形阵列  最后一个环形阵列,描述:绕着某个中心点或旋转轴形成的环形图型平均分布对象副本。通过围绕指定指定的中心点或旋转轴妇科选定对象来创建阵列。  ​

1.3K20

Butterfly主题的PWA实现方案

图标设计 在使用PWA之前,我们最好先行设计一个符合网站主题的图标。 本站使用的是brandmark图标设计网站,访问 brandmark进行图标设计。下载需要收费,不过可以截图。...可以访问realfavicongenerator进行图标制作及manifest的生成。 图文教程 ? 选择图片 ? 创建所有图标 ? 调整 Windows 磁贴图标配色 ?...创建gulpfile.js 在Hexo的根目录,创建一个gulpfile.js文件,打开[Blogroot]/gulpfile.js, 输入 创建在Hexo的根目录,创建一个sw-template.js...安装全套压缩插件 将[Blogroot]/gulpfile.js里的内容修改为: 使用了gulp压缩js以后,使用了冰卡诺老师的gitcalendar和本站的右键环形菜单教程的用户,会发现gitcalendar...原因是js加密压缩的算法存在问题。建议直接屏蔽对这两个js的压缩。修改[Blogroot]/gulpfile.js,添加屏蔽项。

1.5K20

TDesign 更新周报(2022 年 5 月第 2 周)

组件库 Vue2 for Web 发布 0.41.3 版 Features Icon: 更新图标 新增 file-icon 图标 调整 file-excel、file-pdf、file-powerpoint...失效的问题 Dropdown: 透传 popup 事件问题 Dialog: 修复 normal 下加入 lock 导致页面无法滚动的问题 Table: 修正拖拽列款的边界条件判断 Progress: 修复环形进度条显示比例不准确...新增 file-icon 图标 调整 file-excel、file-pdf、file-powerpoint、file-unknown、file-word 和 star-filled 图标的绘制路径...popconfirm: visible 属性支持 v-model 语法糖 notification: 使用项目中已有的 js 动画方案,替换先前的 transitionGroup 方案,完善了组件出现和回收动画效果...timePicker: 修复当 modelValue 为外部传入的 undefined 时,clearable 失效 Steps: 支持 separator api & 修复响应式问题 progress: 环形进度条显示比例不准确

1.6K40

Power BI条件格式自定义百分比图标

这是自定义条件格式系列的第五篇,前面四篇: Power BI自定义条件格式的原理 Power BI自定义排名图标条件格式 Power BI自定义表情包条件格式 Power BI利用条件格式同一数据显示不同单位...下图是Power BI内置的条件格式,左侧是数据条,右侧是图标。数据条的特点是,条形可以随着数据大小变化;图标的特点是,图标可以随着数据的变化而改变样式。 能不能实现图标不变化样式,只变化大小?...内置的图标是无法实现的。我们可以使用DAX嵌入SVG图片的方式实现这种图标大小联动,例如下图中的气泡效果、环形图效果和华夫饼图效果。...MAXR ) & "' fill='" & IF ( [业绩达成] >= 1, "DarkCyan", "Tomato" ) & "'/> " 在表格或矩阵中对业绩达成应用气泡图标度量值...环形图和华夫饼图度量值前期在以下文章中介绍过,大家可以直接拿来应用到条件格式: Power BI DAX设计扇形图、环形图 Power BI自定义业绩达成华夫饼图

2.1K40
领券