本文续Icon组件篇继续对其中的 图标选择器 进行详细介绍。 我们的Icon和Icon选择器组件，实现了以下常用图标库的支持，如果还有其它你喜欢的图标库，可以参考我们的实现方式，自行加上即可。...，以供图标选择器使用。...│ ├─index.vue Icon 组件的实现│ │ └─selector.vue 图标选择器组件的的实现| ├─utils│ │ ├─iconfont.ts字体图标辅助函数库│ │...└─common.ts公共辅助函数库复制代码本文主要介绍 /src/components/icon/selector.vue 也就是图标选择器的实现。...如文首的示意图，图标选择器最难的点，是获取到各个图标库中所有图标的名称，我们接下来将对此功能的实现，进行详细介绍。
Vue 项目引入 SVG 图标 关于 SVG SVG 是一种可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。...icon font 在一倍屏幕下渲染效果不好，细节部分锯齿明显 icon font 因为是字体只能支持单色 icon font 可读性不够好，icon font 主要在页面用 Unicode 符号调用对应的图标...，对浏览器和搜索引擎不友好 安装依赖 在 vue 项目中引入 svg，首要工作是安装依赖包 svgo 和 svg-sprite-loader，这两个工具包都是给 webpack 打包 svg 图标资源使用...组件，代码如下： import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' // svg组件 // register globally...="github" /> 参考文章： 在 vue 项目中优雅的使用 Svg
e-icon-picker 图标选择组件 简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！ ?...'; import 'e-icon-picker/dist/index.css';//基础样式 import 'e-icon-picker/dist/main.css'; //fontAwesome 图标库样式...Vue.use(iconPicker); 详细文档 使用文档 使用 捐赠支持 开源项目不易，若此项目能得到你的青睐，可以捐赠支持作者持续开发与维护...另： 本人还有一个开源项目，在项目中的菜单管理使用了该图标组件，喜欢的可以去看看，帮忙点个star,非常感谢！
——达•芬奇（意大利） 我们首先在HX中创建vue项目 跟着我之前写的博客简单配置一下路由 今天简单聊聊vue中css的作用域 我们知道vue中的style标签带scoped属性时，它的CSS只作用于当前组件中的元素...#vue-devtools" target="_blank" rel="noopener">vue-devtools <a href="https://<em>vue</em>-loader.vuejs.org...; margin: 0 10px; } a { color: #42b983; } 注意style标签是带了scoped属性的 如果我们在外面的页面上引用这个组件，可以看到css<em>选择器</em>被转换了...deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作 例如： 当然大家注意到我这里还有个使用v-html渲染的标签 其中的富文本是一个带class的标签，我们在外面使用对应的class<em>选择器</em>失效了...，此处我们也可以使用>>>操作符去让v-html渲染的标签里的元素样式得到准确的变更 这是<em>vue</em>-loader官方文档中学到的内容，我们在使用<em>vue</em>-cli创建项目时默认就安装了它 看到这里，对于<em>vue</em>
// import { ref } from '@vue...statusVisibal:true }), list, statusIcon, } } } 实现 import { computed } from '@vue.../setHook' const defaultOptions = { statusVisibal: false } /** * 选择器 hook * @param { Array } items...Array | undefined } defaultSelected 默认设置 * @param { Object } options 方法配置 * @summary 基于 setHook 实现的选择器
开发环境 Win 10 Vue 2.5.2 需求描述 如下，想更改网页的标题和图标 ?...解决方法 编辑项目根目录下的index.html，如下： 更改标题： 修改元素内容即可 修改图标： 把要修改的图片放static目录下（注意：图片不能放src目录下，亲测无效），然后添加<
最近一直在更新Vue项目中配置及使用一些内置的方法，今天讲一讲Vue项目中使用iconfont图标库，不管是管理平台还是官网展示之类的显示页面，都会用到一些小图标，如果我们用img标签，那我们的资源库会非常的大...，而且后期如果我们针对图标调整大小，改色等之类的操作，就需要用到Photoshop等专业类工具，上手困难不说，而且比较麻烦，下面就说下Vue使用iconfont图标库。...开始找我们需要用到的图标，添加到我们新建的项目中 ? 生成可用文件，可以下载，然后在index.html里面引用，这里我们讲另一种方案，动态生成引用， ? 下面这个地址，是我们待会用到的 ?...到这，iconfont图标库这块操作完了，接下来就是在我们的项目中使用这个图标库了。...2.项目使用iconfont 在我们的Vue项目public/index.html中加入如下代码 [class^="icon"] { font-family: "iconfont" !
前言 我们的Vue前端一般都是用的ElementUI，其中按钮可能用到的比较多，官方里面有自带的一些默认图标，在这里记录下来，用于我们以后方便查找。...官方ICON图标 本文来源于Element官方文档： http://element-cn.eleme.io/#/zh-CN/component/icon 基础用法 直接通过设置类名为 el-icon-iconName...例如： 搜索 图标集合
今天继续分享关于选择器的用法——使用图标配合背景完美模拟个性选择器。 今天的内容几乎没有任何新东西，所使用到的部件仍然是之前用到过的常用痛几天——条形图、柱形图、面积图、折线图结合对应的四个量表。...选择器使用的是图标部件，利用投透明化图标部件配合图片背景制作个性化、流程化的选择器仪表盘。 ? 数据如下： ? 第一行作为整个仪表盘的正副标题。...第二个区域（A4：B8）是四个图标部件的标签，对应图标部件的源数据代码及目标插入位置（这些代码将对应接下来制作的四个图表类型进而通过动态可见性进行可视化控制）。...（终于知道原书作者为啥不同里面的图标部件直接显示选择器而费了那么大周章把图标隐藏用背景图来模拟选择器，图标真的好丑） 四个图标标题依次链接到A4：A7单元格区域，在数据源中将四个图标的状态（取消选中、选中状态改成一样的...所有部件都插入完毕了，此时在四个图标部件属性外观-布局内将其透明度调整为0，插入提前准备好的图片素材（置于底层）。覆盖图标位置并对齐。 ?
iconify介绍 iconify是功能最丰富的图标框架。可以与任何图标库一起使用的统一图标框架。...开箱即用的功能包括80多个图标集和超过70,000个图标 Vscode预览图标插件 Iconify IntelliSense 在vite中使用iconify 安装 #在组件可以快速使用所有图标,...图标会通过在线导入 npm install --save-dev @iconify/vue 使用 import { Icon } from '@iconify/vue';... svg图标的使用 如果还是大量的使用到svg图标就需要使用到vite-plugin-svg-icons...plugins: [ createSvgIconsPlugin({ iconDirs: [resolve(root, "src/assets/svgs")],// svg 图标保存的位置
我的IDEA安装Vue插件后，按道理来说，新建一个.vue文件，文件前面应该会有一个"V"一样的图标，然而事实并不是。百度了一圈，大部分人都是说这样的：图片试了一下，并没用。...于是乎，我找到了正确答案来帮刚入门Vue的小白填坑：打开 File--->settings--->Editor--->File Types:图片如此，Vue的图标就会显示了~不过呢，话说回来，如果要写前端页面的话
在项目中本人使用的是 Fontawesome 图标库方案，使用它是因为提供的可用图标比较丰富，基本上不需要特意去找合适的图标，直接把它的图标库下载过来，免费的有800多个。.../Icons.vue' const Icons = { install(Vue) { Vue.component('ui-icons', IconsCompontent); } } export.../components/index.js' Object.keys(CustomComponents).forEach(key => Vue.use(CustomComponents[key])) 这样就可以在项目中任意....vue文件中以方式使用组件了。...原文链接：https://blog.zhangbing.site/2018/12/01/Vue-js-图标选择组件实践/ 作者简介：做工程不做码农(微信公众号同名)，Web前端工程师，7年开发经验，坐标杭州
前言 SVG（即“可缩放矢量图形”）图标在诸多场合下，往往胜过一般的位图标记（例如PNG、JPG、GIF等）。...在components文件夹中，建新文件夹曰SvgIcon，再于文件夹下建新文件，名之曰index.vue。...important; display: inline-block; } 此乃一Vue组件，名为SvgIcon，其功能为展示SVG图标。...依iconClass之值，此组件能展示各异之图标。className 则为 CSS 类名，用以定制 SVG 图标之样式。...在 src 目录下新设一 icons 目录，于 icons 目录中再设一 index.js 文档 于 index.js 文件内撰写诸代码 // 导入 Vue 框架 import Vue from 'vue
在我们使用Vue搭建项目的时候，我们经常会用到一些UI框架，如Element，iView，但是有时候我们又想去修改UI框架的样式，当我们修改样式失败的时候，可以尝试一下/deep/，亲测有效。...UI框架的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式）。 有多种解决方法，推荐使用/deep/。...当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。 有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。
比如要实现 App 中常见的滚轮选择器，需要将 Popup 和 Picker 组合起来，并根据项目的 UI 效果做一定的定制。...下面将用 Popup + Picker 定制一个带确定取消按钮的滚轮选择器。 封装 布局很简单，外层套一个 ，上面是两个按钮，下面是 。...去除无关代码，只保留跟本文相关的代码如下 弹出选择器...textAlign: 'center' } ] } }, computed: {}, methods: { //显示滚轮选择器...:visible="" 要传一个对象，因为 vue 规定在子组件中不能更改 props 的值，这里取个巧，传对象的话引用不变，但值可以改，不会报错。
Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker 引入Vant中DatetimePicker组件（全局引入后可直接使用） import Vue...from 'vue'; import { DatetimePicker } from 'vant' Vue.use(DatetimePicker); 关键使用代码（结合vant组件Popup的底部弹出层一起使用
vue-fontawesome-elementui-icon-picker 简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！ ? 选择图标 ?...选中图标 安装 npm install vue-fontawesome-elementui-icon-picker 全局注册 main.js中注册 import iconPicker from 'vue-fontawesome-elementui-icon-picker...'; Vue.use(iconPicker); 使用 依赖 本组件依赖以下组件开发，若出现异常情况，请先对比你的版本依赖是否与本组件一致...： "element-ui": "^2.9.1", "font-awesome": "^4.7.0", "vue": "^2.6.10" 问题解决 若是选中的图标界面不展示，则有可能是你的项目中...，引用的fontawesome图标有问题。
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员...推荐指数：star:62.1k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io.../vue-element-admin/#/dashboard 文档：https://panjiachen.github.io/vue-element-admin-site/zh/ ---- <template
原因 因为 page.vue 这里我们使用了 scoped 样式作用域，Vue 会为当前模板内所有元素会被增加一个特殊属性（如：[data-v-5ef48958]），并且为所有样式选择器最后一级添加这个属性的选择器...但是对于 .iv-menu 内部的 .title，Vue 的样式作用域处理逻辑认为它属于当前组件，所以生成的选择器是 .iv-menu .title[data-v-5ef48958]。...而实际需要的选择器其实是 .iv-menu[data-v-5ef48958] .title。...也就是说，只需要告诉 Vue 的样式作用域处理逻辑：“我们这个组件只管到 .iv-menu，后面的 .title 是属于更深的子组件样式，不要加作用域处理”，就行了。...解决 而 Vue 已经提供了这样的告知方法，就是深度选择器 /deep/。只需要在组件样式内加入它就行了： <!
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件，今天带大家一步一步实现 DatePicker 的 vue 组件。...公共方法 eventListener() { this.panelState = false; }, 项目Demo 项目源码 最后，贴上 CSS 代码... fadeDownBig 后面的样式为 vue
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
