- 博客(30)
- 收藏
- 关注
RSS订阅原创 使用离线Iconify图标
这些图标服务器分布在世界各地，公共API地址是 https://api.iconify.design。除了域名 https://api.iconify.design，还有两个备用域名，https://api.simplesvg.com 和 https://api.unisvg.com。toB的项目是部署到客户的局域网中，无法访问外网的一些地址。这时候就需要在打包的时候就把图标的资源打包进去。客户现场Iconify图标使用报错，Iconify 通过请求api服务器获取图标的数据，然后渲染到页面上。
2023-11-10 16:45:48
1142
1
原创 实现内容未超出盒子宽度时正常展示，超出后省略展示，hover展示全部
项目种有许多内容需要展示，要适配不同分辨率下数据展示完整，且不想在数据内容宽度较短时就hover展示，封装一个内容未超出盒子宽度时正常展示，超出后省略展示，hover展示全部的组件来进行数据展示。
2023-11-03 14:50:57
103
原创 创建指令文件使一块内容距页面底部指定的距离
开发项目过程中，想实现页面内一块内容距离页面底部25px的距离，使用css处理较为繁琐，故想到创建一个全局指令文件进行处理。
2023-11-03 14:34:26
53
原创 elementui按钮点击后无法自动失焦问题处理
用element-plus开发的时候，项目种使用了很多按钮组件，发现点击之后按钮无法自动失焦，单个按钮处理任务太过庞大，采用自定义指令可以解决这个问题。的指令就可以使按钮点击后自动失焦了。在main.js文件种引入。
2023-11-03 14:14:41
527
1
原创 vue3项目svg使用
在使用该图片的地方使用如下代码，name属性为保存的svg图片的名字。在icon font官网选择想要得图片下载。文件夹下，如fanhui.svg。，下载成SVG格式。
2023-03-24 15:23:52
1387
1
原创 复杂对象数组的每一个元素的除第一个外所有checked值为false时第一个checked为false
【代码】复杂对象数组的每一个元素的除第一个外所有checked值为false时第一个checked为false。
2022-09-29 15:36:54
99
原创 复杂表单的校验
vue项目form表单的校验，使用rules属性可以进行校验，对于复杂表单的校验，如下<el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px"> <el-row > <el-col :span="6" style="margin-right:20px"> <el-form-item label
2021-08-23 14:49:35
380
原创 输入框限制只可以输入字母数字汉字
最近的项目有一个前端输入添加来源的需求，要求输入框只可以输入字母大小写，数字以及汉字，无法输入特使字符。代码如下：<el-input placeholder="请输入来源" maxlength="50" style="display:inline-block;width:200px" v-model="sourceName" onkeyup='this.value=this.value.replace(/[^A-Za-z0-9\u4e00-\u9fa5]+$/gi,"")'
2021-08-16 11:02:23
705
原创 url、File、blob、base64等图片文件格式相互转化
base64 to filebase64ToFile(urlData, fileName) { let arr = urlData.split(","); let mime = arr[0].match(/:(.*?);/)[1]; let bytes = atob(arr[1]); // 解码base64 let n = bytes.length; let ia = new Uint8Array(n); while (n--) .
2021-08-03 15:03:54
252
原创 img图片旋转后保存上传
File to BlobgetObjectURL (file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectUR.
2021-08-03 14:41:16
359
原创 vue列表展示三个字多余字用省略号代替并有悬浮查看全部文字功能
最近在做运营后台的时候，常常出现列表页单元格里内容很长的情况，展示不太美观，有时产品也会规定省略号代替这种需求。<el-table-column label="表头（属性为text）"> <template slot-scope="scope"> <el-popover placement="top" trigger="hover" :disabled="scope.row.text.length <= 3" > &l
2021-07-27 10:31:08
941
原创 el-select下拉框默认值问题
vue项目列表页查询条件常用的有输入框查询以及下拉选择查询，通常情况下，下拉选择查询需默认选择“全部”。例如，选择医院等级，默认全部。<el-form-item label="医院等级"> <el-select v-model="form.orgGrade" placeholder="请选择" size="small" style="width:100px;" > <el-option v-for="item i
2021-07-26 10:15:14
2518
原创 VUE项目移动端适配 rem
开发vue的移动端项目，使用px作为单位，在不同的设备屏幕上，效果会不同，所以要做屏幕适配。要使用两个插件postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remamfe-flexible 用于设置 rem 基准值一、使用 amfe-flexible 动态设置 REM 基准值（html 标签的字体大小）安装npm i amfe-flexible在main.js 中加载执行该模块import ‘amfe-flexible’二、使用 postcss-p
2021-04-29 18:09:35
554
1
原创 简单使用mock地址
安装依赖 npm install axios --savemain.js中配置:import axios from 'axios';Vue.prototype.$axios = axios组件中使用： this.$axios.post('https://yapi.int.ybm100.com/mock/131/background/couponAct/list', { "channel": 1, "pageNum": 1, "pageSize": 10.
2021-04-29 17:34:42
1715
原创 最最完整的分页效果
最近在写一个项目需要有很完整的分页效果，element-ui给的效果不够，想实现 共xx条记录，第x/x页。组件库没有的话，只能自己写了，采用插槽可以实现这个效果。具体代码如下：<el-pagination layout="slot" :total="total"> <span class="leftPagination" >共{{ total }}条记录，第{{ pageNum }}/{{ Math.ceil(total / pageSize) }}页面</
2021-04-21 10:39:20
300
原创 express中间件
一个express的应用就是在调用各种中间件。中间件的功能：执行任何代码。修改请求和响应对象。终结请求-响应循环。调用堆栈中的下一个中间件。中间件其实就是一个函数：function(req,res,next){ req:请求对象 res:响应对象 next:下一个中间件}express使用中间件:app.use('pathname',中间件) : pathname不写: 任何请求路径都会执行这个中间件 pathname写了：任何以pathname开头的请求路径都会执行这个中间
2021-02-03 16:29:23
139
原创 浅谈vue钩子函数
Vue-Router导航守卫：1.全局守卫router.beforeEach 全局前置守卫 进入路由之前router.beforeResolve 全局解析守卫在beforeRouteEnter调用之后调用router.afterEach 全局后置钩子 进入路由之后使用方法： // main.js 入口文件 import router from './router'; // 引入路由 router.beforeEach((to, from, next) => {
2021-02-02 21:52:07
158
原创 浅谈keep-alive(keep-alive介绍与应用)
keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。场景用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-ali
2021-02-02 21:26:15
856
原创 移动端1px像素与300毫秒延迟问题
移动端1px像素问题在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。设备的 物理像素[设备像素] & 逻辑像素[CSS像素]；物理像素：移动设备出厂时，不同设备自带的不同像素，也称硬件像素；逻辑像素：即css中记录的像素。在开发中，移动端CSS里面写了1px，实际上看起来比1px粗；其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，
2021-02-02 19:17:32
151
原创 解决跨域问题
何为跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。因为浏览器的同源策略而导致了跨域。解决方法1.JSONPJSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器
2021-02-02 18:37:52
98
原创 ES6常用的新特性
1.模板字符串 模板字符串中的换行和空格都是会被保留的字符串插入变量和表达式，变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式：let name = "Mike";let age = 27;let info = `My Name is ${name},I am ${age+1} years old next year.`console.log(info);// My Name is Mike,I am 28 years old next year.2.let 与
2021-02-02 17:39:25
157
原创 vuex数据持久化存储
vuex数据持久化存储Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中，需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法可。Vuex 的状态存储并不能持久化。当存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。要解决这个问题，可用到v
2021-02-02 16:45:54
1518
3
原创 安装node.js及修改npm全局安装路径和npm镜像源
一般情况下，我们安装Node.js环境，程序会自动把NPM全局模块的路径设置在系统盘（通常是C盘下），我们在项目开发阶段不建议全局路径设置在系统盘，不但会影响电脑的性能，而且还很不安全。可以通过以下命令来设置默认下载的全局路径目录：首先在node官网下载node.js下载好之后，输入 npm config ls 查看当前配置：npm config ls运行结果为：下载的node.js放至D盘的文件夹中，这里我创建了nodejs文件夹。在此文件夹下新建两个文件夹，分别是：node_global
2020-12-14 19:21:24
511
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人