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

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

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

    3.3K10

    Canvas系列(13):实战--星空连线图

    好多人来到这个博客的时候总是觉得后面这种点和线的背景很有意思,这种效果是怎么实现的呢,当然是使用Canvas了,我们这章就来实现一个简易版的这种星空连线图。...初始化Canvas 我们现在通过DOM操作来初始化一个canvas,这样做的好处是有利于把星空连线图封装成一个组件,当然我们这里并不讲解如何封装成一个可复用的DOM组件,只讲解怎么实现。...添加连线 添加连线也很简单,直接看完整代码吧: // 自己创建canvas 并通过DOM操作添加到body中 var canvas = document.createElement("canvas")...我们博客背景中使用的是canvas-nest.js,你也可以观摩一下它源码,实现方式和我们的大同小异。

    1.3K41

    阿里图标库引入图标

    文章引入 比wordpress默认图表库的图标好看多的 默认图标库的图标一般都是灰白色简直难看死了哈哈 今天分享给大家如何插入阿里图标库的彩色图标 阿里图标库有什么好处呢 插入方便 图标样式多 彩色图标应有尽有...反正你用都用不完 重点还永久免费使用 引入方法 第一步:阿里巴巴矢量图标库官网 —> Github或者新浪微博登录 第二步:然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目...Symbol 第五步:点击 –> 查看在线链接(没有的的话可以点击生成链接) —>点此复制代码(代码例如下面) //at.alicdn.com/t/font_2931246_we7ddtq72go.js...第六步:引入JS代码 在当前主题设置—>自定义底部代码—>添加下面代码:(下面src=”这里是上面的JS代码,自行替换”) js"> 使用图标 在已经添加到你项目中查找图标并复制图标代码,然后按照下面的格式替换href="#iconxxx"中的图标代码,将代码插入到你需要显示图标的地方

    2.8K30

    YbtOJ 824「计算几何初探」圆与连线

    YbtOJ 824「计算几何初探」圆与连线 题目链接:YbtOJ #824 小 A 有一个平面直角坐标系,其中有一个圆心在原点的半径为 r 的圆(即它的方程为 x^2+y^2=r^2)和 n...小 A 想知道最多能够留下多少个特殊点,满足任意两点连线不与圆相交。 1\le n\le 2\times10^3,r,x_i,y_i\le5\times10^3。...Tutorial 求出每个点与圆的两条切线,那么在这两条切线之间的其他点与该点的连线都会与圆相交,而切线外的点则不会。...我们把每个点与圆的两个切点看成一个区间(具体实现中,方便起见我们我们用 角度 来表示这个区间),那么点 A 与其两条切线间的点 B,对应的区间必然包含(两点在圆的同侧)或是相离(两点在圆的异侧),也就是说两点连线无交当且仅当它们的区间是非包含关系的相交...求角度的区间还是比较简单的,首先我们求出当前点的角度 g,然后求出当前点与圆心的连线和圆心向切线的垂线的夹角 d(\cos d=\frac{\sqrt{x^2+y^2}}{R}),则 [g-d,g+d]

    84320

    实心图标与空心图标的区别

    实心图标与空心图标的区别 有读者说,面试的时候面试官提到了一个问题,但不知道怎么回答。这个问题是:实心图标和空心图标的区别是什么?...本篇文章的结论: 人的大脑在识别空心图标时,会比实心图标更显吃力; 实心图标的引导性要强于空心图标; 空心图标的装饰性会更强; 实心图标承载的信息相对更重,参考选中状态。 01....实验的内容是将一组相同图标,分为实心和空心,给用户做测试。结论是相同一组图标,用户平均识别实心图标的速度比识别空心图标的速度要快上 0.1 秒,但是其中有个别空心图标的识别速度比实心图标更快一些。...所以第二个结论是,实心图标比空心图标更有引导性。 03. 或许有人会问,那空心图标就没用了么?不是的。其实上面有提到,空心图标相比实心图标更难识别,那么人就需要调动更多神经来对空心图标进行确认。...我只是在这里用这个例子来说明,空心图标的引导性没有实心图标强,所以更多会被用来当做装饰品。而当空心图标与实心图标同时出现,并表达同一类信息时,它们就是一种信息的两种状态,比如选中与未选中。

    13210

    ❤️创意网页:HTML5,canvas创作科技感粒子特效(科技感粒子、js鼠标跟随、粒子连线)

    这个特效网页将会展示一个动态的、精美的粒子效果,同时会随着鼠标的移动而产生连线效果,增添一份炫酷的科技氛围。我们将使用HTML、CSS和JavaScript来实现这个效果。...代码的主要功能包括: 创建粒子和连线的类。 初始化粒子数组,并在画布上绘制粒子。 根据鼠标的位置更新粒子的运动状态,并绘制粒子之间的连线。 实现动画效果,使粒子和连线随着时间不断更新。 ​...particleSpeed = 1; // 粒子移动速度 const particleSize = 2; // 粒子大小 const maxDistance = 100; // 粒子连线的最大距离...const lightningColor = "#fff"; // 粒子连线的颜色 // 创建粒子类 class Particle { constructor() {...(let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } // 绘制粒子之间的连线

    2.1K10

    基于图扑 HT for Web 实现拓扑关系图

    在使用图扑 HT 绘制连线时,ht.Edge 提供了 icons 属性,通过 icons 属性,可在 ht.Edge 上定义一系列图标并设置它们在连线上的位置。...keepOrien: true, names: ['toArrow'] }); 设置 icons 之后的效果: 流动动画 在图扑自研产品 HT for Web 中,使用 ht-flow.js...使用 ht-flow.js 插件实现的流动效果配置起来也十分简单,正确引入 ht-flow.js 插件后,使用 g2d.enableFlow(60); 开启流动,再在 ht.Edge 上设置相应的流动属性即可...225, 19, 0)", "flow.element.count": 1 }); 设置完成后的效果: 在更为复杂的场景中,仅仅依赖简单的样式配置难以满足设计需求,为此 ht-flow.js...提供了 flow.element.image 属性,该属性支持将流动的元素设置为图片或图标,还支持设置为多个图片/图标流动的效果。

    15410
    领券