文章 2023-02-26 来自:开发者社区

vue里怎么生成带有图标logo的二维码?

安装 qrcodejs2https://www.npmjs.com/package/qrcodejs2npm install qrcodejs2 --save用法:编写 qrcode 组件这里需要注意的是需要加上下面的代码:logo.setAttribute("crossOrigin", "Anonymous");不然会报错:Uncaught DOMException: Failed to ex....

vue里怎么生成带有图标logo的二维码?
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】实战篇 # 41:如何管理系统中使用的图标

说明【Vue 开发实战】学习笔记。先在iconfont里新建一个项目然后将需要的图标添加入库:https://www.iconfont.cn/比如我的项目如下:全局注册图标组件https://1x.antdv.com/components/icon-cn/import Vue from "vue"; import App from "./App.vue"; import router from ....

【Vue 开发实战】实战篇 # 41:如何管理系统中使用的图标
文章 2022-10-14 来自:开发者社区

在vue3中使用iconfont图标和自定义的svg图标

创建一个Icon组件,供自定义的svg图标使用和iconfont图标使用<template> <svg class="icon"> <use :href="id"></use> </svg> </template> <script> import { defineComponent, ref } ...

在vue3中使用iconfont图标和自定义的svg图标
文章 2022-06-22 来自:开发者社区

Vue3 + Vite + TS项目引入iconfont图标(Svg方式)

1.常用图标格式简介我们使用图标的方式有很多种,比如说直接使用 png、jpg 等图片格式,这是最原始的方式,所以我们这里不过多阐述,它们的优缺点相信大家也知道。这里我们主要对比阿里图标库提供 3 种图标引用方式:unicode、font-class、symbol。1.1 unicode 格式这种方式比较原始,主要是将图标以字体的形式渲染到网页上,既然是以字体的格式,那么它的优缺点也是显而易见的....

Vue3 + Vite + TS项目引入iconfont图标(Svg方式)
文章 2022-06-15 来自:开发者社区

重读vue电商网站30之左侧菜单栏图标设计

我们想要的效果如下:如何设计?首先,我们可以在 data 中定义一个对象,对应于每一个菜单选项的 id然后通过 for 循环遍历每一个菜单选项的 id即可。

重读vue电商网站30之左侧菜单栏图标设计
文章 2022-06-15 来自:开发者社区

重读vue电商网站31之左侧菜单栏图标设计

保持一个子菜单的展开 直接在侧边栏区域添加上述属性即可

重读vue电商网站31之左侧菜单栏图标设计
文章 2022-06-14 来自:开发者社区

重读vue电商网站4之登录页面总结使用 iconfont 给输入框添加图标

在 main.js 中导入字体图标然后在 el-input 组件中通过 prefix-icon 进行相关图标引用最终效果图如下:

重读vue电商网站4之登录页面总结使用 iconfont 给输入框添加图标
文章 2022-06-13 来自:开发者社区

Vue项目使用iconfont图标库

最近一直在更新Vue项目中配置及使用一些内置的方法,今天讲一讲Vue项目中使用iconfont图标库,不管是管理平台还是官网展示之类的显示页面,都会用到一些小图标,如果我们用img标签,那我们的资源库会非常的大,而且后期如果我们针对图标调整大小,改色等之类的操作,就需要用到Photoshop等专业类工具,上手困难不说,而且比较麻烦,下面就说下Vue使用iconfont图标库。1.配置iconfo....

Vue项目使用iconfont图标库
文章 2022-06-10 来自:开发者社区

Vue3中使用各类字体图标的正确姿势:本地SVG、Iconfont、FontAwesome、ElementPlus(图标选择器篇)

前言最近,在项目的开发中,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标库的图标(一种语法,实现无限的图标扩展和高度兼容性)并且,实现该 Icon 之后,理应还有一个图标选择器,可以加载出不同图标库的所有可用图标,方便直接选择使用,完整代码在文末提供。本文续Icon组件篇继续对其中的 图标选择器 进行详细介绍。我们的Icon和Icon选择器组件,实现了以下常用图标库....

文章 2022-06-08 来自:开发者社区

vue3+vite+ts项目中使用svg图标

项目结构网络异常,图片无法展示|1. 首先引入svg插件yarn add svg-sprite-loader -D // 或者 npm install svg-sprite-loader -D 复制代码网络异常,图片无法展示|2. 创建文件在@/src里面创建icons文件夹,里面创建index.vue(svgicon的模板文件), index.ts(svgicon的js逻辑), svg文件夹(....

vue3+vite+ts项目中使用svg图标

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注