自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

hong

前端小菜鸟

  • 博客(53)
  • 收藏
  • 关注

原创 proxy配置多个代理

proxy配置多个代理做项目的时候 跟不同的后端人员对接不同的后台接口 碰巧昨天遇到同时要用两人的本地服务 怎么在proxy中配置多个人的服务呢 接着看1.找到proxy文件这是默认的 框架配置好的第一个代理的例子 只要在target中协商对应后台人员的服务地址就好2.添加第二个服务地址![在这里插入图片描述](https://img-blog.csdnimg.cn/20201027151955104.png#pic_center这里不再是api开头了 我定义的是car 记得pathRe

2020-10-27 15:23:48 6774 2

原创 完美解决React 注册模块报错Missing message: “menu.xxx“ for locale: “zh-CN“, using default message as fallback问题

完美解决React 注册模块报错Missing message: “menu.xxx” for locale: “zh-CN”, using default message as fallback问题前两天用ant design pro 做项目时 写完菜单时发现控制台出现了一大推警告 提示下面代码的问题 百度看了许多博主的解决方式 感觉不太行 后来找到了解决方式 实测很有用[React Intl] Missing message: "menu.系统管理员.系统用户" for locale: "zh-C

2020-09-17 11:07:29 13568 14

原创 CSS引入样式的四种方法及优先级顺序

CSS引入样式的几种方法css可以通过4种方式引入样式表 根据不同的需求可以选择不同的引入方式 但是它们也有不同的优缺点内联样式嵌入式样式外部样式@import 导入的方式1.行内样式特点 : 通过HTML的style属性实现<div> <ul> <li style='margin-top: 10px;'></li> <li></li> <li></li> <li&

2020-09-11 09:40:15 6963 1

原创 前端超好用的数组判断显示includes方法

includes 是es6新增的数组方法 , 用来检测数组是否包含某个元素 , 满足返回true , 反之false。之前总是什么map , indexof , finde等等之类 , 今天突然发现这个 , 真的非常方便简单!直接看代码 , 我是写在页面上判断按钮是否显示。

2024-02-20 10:55:02 438

原创 uni-app开发小程序点击相机没反应(已解决!!!)

网上看了很多帖子 , 有让自己自定义弹框 , 再去manifest.json文件中去添加代码 , 之前可能有用。在勾选 " 使用用户信息类型" 的时候 一定要选中照片 , 视频 , 摄像头 , 提交审核大概40分钟。现在 , 注意看现在不需要了 , 不用再去新增什么!标明一下 , 这里的开发小程序点击相机没有反应是因为微信官方最新的隐私协议问题。下面图片是已经更新过的 , 如果你们的没有更新过, 点进去选择第二个选项即可。去小程序后台,更新隐私协议,审核通过后 等40分钟左右再试。

2023-11-03 09:14:13 798 1

原创 css网页缩小 ,把2560尺寸的布局改到1920上面

最近在做一个保险大屏的项目 , ui给到的设计尺寸是2560 , 已经开发完成后。最主要的就是zoom的缩放比例 , 我这里的是 2560x0.75=1920。甲方就说还要一个1920的 , 按照以前的思路是用媒体查询在写一遍 ,这时候不得不夸夸css的强大了 , 一句代码就解决了这个繁琐的工作。这里不方便给大家展示效果 , 就自行尝试!前路漫漫 , 且行且珍惜!

2023-09-21 15:21:32 472

原创 uni-app真机上传图片提示打包未添加Camera模块

uni-app 解决打包提示未添加Camera

2023-01-04 10:51:07 4324 1

原创 uni-app 把checkbox修改样式为圆形

uni-app 复选框修改为圆形样式

2022-10-18 09:28:58 5368 4

原创 uni-app 百度语音识别文字并展示功能

uni-app 使用百度语音识别文字 亲测有效

2022-08-16 14:03:50 4085 5

原创 uni-app v-for绑定数据 去除数据中的中括号

uni-app 使用 v-for绑定数据 ,去除数据中的中括号,或者双引号不管是js 还是uni-app 绑定数据都会出现我下面图中的方法 , 常见的问题有 , 去除双引号 , 或者中括号很简单 只需要使用replace解决1 . 效果图**2 . 解决代码 **<view class="flex"> <view class="basis-sm lines-grey ">规格型号</view> <view class="flex-sub">

2022-05-23 15:11:09 919

原创 uni-app 自定义导航栏并固定居中对齐

uni-app 自定义导航栏并使用flexed定位 , 我的需求是有一个选择器的 这里没有加上去1. 效果图2. 取消uni-app原生导航首先找到page.json文件中对应的路径修改style 具体参数看官方 只需要把原来的style替换成我下面写的这样{ "path": "pages/stock/stock", "style": { "navigationBarTitleText": "库存", "navigationStyle": "custom", "app-pl.

2022-05-06 17:13:03 3379

原创 uni-app播放在线mp3格式录音

uni-app 播放录音 这里用的是接口里面返回的录音 是前一个页面自己录了上传的 , 单机事件坐在button上面1. 查看地址2. 播放录音代码// 播放开始录音playVoiceStart() { const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.src = this.dataInfo.RecordBeginPat.

2022-04-02 15:40:52 1217 1

原创 elementUI关闭取消弹框时取消本次表单验证

element-ui 关闭取消弹框的时候取消本次验证写管理后台的时候 经常对表单进行验证 , 不小心点了提交 这时候表单验证是不可能通过的 , 接着关闭弹框 , 再打开发现上一次的验证居然还存在 很简单 在关闭的时候重置验证就ok1. 出现的问题已经是重新打开的页面 依旧存在上一次的校验2.解决方法 , 在关闭模态框的方法中执行以下代码 closed() { // 关闭模态框的时候取消验证 this.$refs.AddForm.clearValidate();

2022-03-18 16:40:25 1765

原创 uni-app自定义导航栏右侧做增加按钮并跳转链接

uni-app自定义导航栏右侧做增加按钮并跳转链接uni-app 在页面上的导航栏右侧做一个增加的图标 并实现跳转1. 先看效果图2. 实现思路使用阿里图标库的字体图标, 下载放入本地文件 pages页面引入即可 这里说一句 uni-app 不支持在线图标 所以需要下载下来引入到本地项目中3. pages.json文件中配置如果是要放在左边 改float : left 即可4.page的代码{ "path": "pages/repairOrder/repairOrde

2022-03-03 11:22:44 3615 4

原创 修改uni-app 或者 小程序 的复选框和单选框的大小

修改uni-app 或者 小程序 的复选框和单选框的大小在写表单的时候 总会遇到使用单选框或者复选框的时候 不管是uni-app 还是小程序 自带的总是太大了 对此我们可以修改其的css属性 修改其大小1. 原始大小复选框太大 页面整体不协调2. 添加css 修改其大小.size { transform: scale(0.8,0.8);}页面上<checkbox-group bindchange="checkboxChange"> <view class=

2022-01-25 16:21:16 3175

原创 uni-app 打包小程序体验版

uni-app打包小程序体验版这篇主要是讲解uni-app打包体验版的小程序 如果你还不知道怎么使用uni-app开发小程序可以去看上一篇帖子哦1. uni-app发布小程序接着 选择 发行 这里的小程序ID 要记得申请哦接着选择发行2. 直接到微信开发工具中选择上传 填写版本号到这一步基本就可以了 因为我不是管理员 所以要等管理员同意 大概就是这个步骤...

2021-12-16 11:14:00 12394

原创 uni-app开发小程序并运行起来(使用ColorUI)

uni-app开发小程序步骤详解最近接到一个项目 开发一个小程序 主要是早教的培训机构使用 打算用uni-app来开发小程序 到时候打包成小程序就可以了 主要是用uni-app配合colorui使用准备工作:工具:1、 uni-app的好伙伴 Hbuilder X2、 微信开发工具下载安装好 下载地址3、 colorUI 下载地址第一步 创建uni-app项目2. 运行并引入colorUI选择项目 → 运行 → 运行到浏览器 能运行起来说明项目没有问题接着把UI框架引入到项目中

2021-12-16 10:57:17 10708

原创 一句代码把彩色的页面改为黑白色调

将彩色的HTML页面改为黑白色调12月13日是国家公祭日 , 今天基本各大网站都会把色调改为黑白色来纪念过去如果你还不会改色调 接着往下看 一句代码解决 如果有帮到你 请点个赞 谢谢诶效果图 (这里只是测试给大家看 用的手机端 )代码只需要在最高级的css中加入这句代码 -webkit-filter: grayscale(100%); * { padding: 0; margin: 0; box-sizing: border-box; -webkit-

2021-12-13 10:27:21 917

原创 uni-app 超好用的时间选择器组件(起止时间)

uni-app 超好用的时间选择器组件(起止时间)uni-app 时间组件 选择开始时间和结束时间 可以单填一个 也可以不填时间组件效果图1. 引入插件点击进入下载页面2. 根据步骤引入到项目代码<view class="formItem" @click="dateModeAction"> <text class="form-text">检查时间</text> <view>{{dateValue.length>0?dateV

2021-12-06 11:07:21 5854

原创 VUE根据后端返回url链接下载文件

VUE根据后端返回url链接下载文件1. 页面实现思路2. 具体代码3. 成功效果甲方提出了一个需求 在前端页面上选择了开始时间和结束时间 实现导出功能 导出功能由后端人员写好接口 前端请求接口拿到返回的url地址进行下载1. 页面实现思路页面上有点击按钮 点击后弹出模态框 选择时间 发起请求 请求成功后拿到链接进行下载2. 具体代码 exportBtn() { this.$refs["exportForm"].validate((valid) => {

2021-11-22 13:42:41 9336 3

原创 uni-app使用官方pagination实现分页效果

uni-app使用官方pagination组件实现分页效果写uni-app的时候遇到数据量大 需要分页的地方 上百度查看了很多文档 有懒加载 上拉加载 下拉刷新 觉得太麻烦了 没必要做的复杂 意外上官方插件库看见了官方写的pagination组件 真的很奈斯 简单好用1. 先下载官方插件官方插件链接 可以选择自己导进去或者easycom引入如果是自己导入的把文件放在 components 里面2. 页面模板引用 <uni-pagination :total="total"

2021-11-12 13:45:02 6500 2

原创 vue实现tab切换附带css样式

vue实现tab切换附带css样式vue会用到tab切换的地方 很简单 几句代码实现可复用 直接上代码 我是写在html页面中的1.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>tab切换</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&gt

2021-10-09 10:34:59 947

原创 css手写九宫格布局

css手写九宫格布局能实现九宫格布局的方式有很多种 比如 flex grid table float 等等 下面整理的是flex布局写的 一起看看吧html部分 实现布局<body> <div> <ul> <li> 我是1 </li> <li> 我是2 </li> <li> 我是3 </li> <li> 我是4 </li>

2021-10-09 09:55:06 366

原创 vue + element 实现在线预览pdf并进行打印

vue + element 实现在线预览pdf并进行打印element ui 实现在线预览pdf地址并打印 百度了看很多文档都说需要安装一些插件之类的问题 其实不需要 现在大多数的浏览器都支持打印和预览 很简单的一句代码实现1.添加打印按钮<el-button type="primary" @click="printBtn(scope.$index, scope.row)">打印</el-button >添加打印事件 我的地址是后端生成的 直接带过去 使用window

2021-09-28 13:52:30 2545 8

原创 uni-app预览pdf文件亲测有效真实项目已上线哦

uni-app预览pdf文件最近遇到一个需求 在公司开发的un-app项目中 需要展示后端给的pdf地址进行预览 , 预览完成需要连接上甲方的惠普打印机进行打印 目前这个功能已经开发完成 本篇文章主要是记录如何在线预览pdf1.第一步 入口第一步点击生成检查记录 这里的话是发起了请求 因为我们是后端自己去生成pdf地址 前端就只需要带着地址去到预览页面就好啦进入到预览页面 下载pdf插件我把插件的地址放在网盘了 有效期三十天 过期了你们告诉我就可以链接: https://pan

2021-09-28 13:39:00 5809 25

原创 vue+element校验输入框不能有特殊字符

vue+element校验输入框不能有特殊字符做管理后台的时候 遇到表单校验 要求是不能让用户输入特殊字符 简单散步即可 亲测有用在data() 函数处声明方法export default { data() { let validateInput = (rule, value, callback) => { if (!this.checkSpecialKey(value)) { callback(new Error("不能含有特殊字符!!")

2021-09-24 14:27:40 5448 1

原创 flex布局实现div内容垂直居中

实现内容垂直居中<div class="flex"> <div> <p>公司名称</p> <p>2021.9.15</p> </div></div>.flex{ /*flex 布局*/ display: flex; /*实现垂直居中*/ align-items: center; /*实现水平居中*/ justify

2021-09-15 11:05:49 1000

原创 vue控制台报TypeError: Cannot read property ‘protocol‘ of undefined错误

vue控制台报TypeError: Cannot read property ‘protocol’ of undefined错误前两天搭建框架 引入axios后 前端刷新报出这个错误 看着很难受 解决了一下原因是因为在main.js中引入axios时 语法有错误错误代码如下import axios from 'axios'Vue.use(axios)正确代码import axios from 'axios'Vue.prototype.$axios = axios;效果图

2021-08-23 09:34:59 475

原创 element-UI中分页组件显示英文的解决方案

element-UI中分页组件显示英文的解决方案写vue项目的时候 使用elementUI框架搭建模板 做了一个表格 发现分页控件是英文的 先看图 在看解决方法出现的问题解决方法 在main.js中引入中文 第一个是英文 第二个是中文import locale from 'element-ui/lib/locale/lang/en' import locale from 'element-ui/lib/locale/lang/zh-CN' 解决后...

2021-08-19 15:48:56 3193

原创 前端常见面试题集合

web前端面试题 大厂小产均适用盒模型盒模型的组成 , 有里向外 content , padding , border , margin清除浮动的方式position : absolute / fixeddisplay : inline-block / tablefloat元素overflow !== visiblecss常用布局方式常见的有 div布局 css布局 flex布局 table布局 流式布局 响应式布局如何中断ajax请求一种是设置超时时间

2021-08-02 12:36:25 193

原创 使用UI框架时 css不生效 使用/deep/完美解决避免污染全局样式

使用UI框架时 css不生效 完美解决避免污染全局样式使用前端UI框架时 在页面上单独修改css 但是不生效 都是在 <style scoped> </style>这样的模式下修改 依然不生效 后来尝试了几种方法 找到了 一种最有效的方式修改前 css不生效 主要是想把 tab 修改为主题色黄色 但是他现在用的是本身ui框架统一的黑色皮肤 /* 修改tab切换原生的样式 */ .gui-segmented-control{ background-color:#

2021-04-16 10:46:18 963 2

原创 uni-app针对ios和安卓手机做拨打电话功能

uni-app做拨打电话功能 但是区分ios和安卓 两个机型出的效果不一样前端页面代码这里是在一个循环体内 从每一条数据中拿到对应的电话 实现点击拨打 <view @click="callphone(item.phone)">{{item.phone}}</view>js代码callphone:function(phone){ // 可以先打印看是否拿到传进来的电话 console.log(phone); // uni.getSystemInfoSync().

2021-03-10 13:47:49 1705

原创 JS判断设备访问的是PC端还是手机端

JS判断设备访问的是PC端还是电脑端最近在写官网 官网需要的是自适应的网页 但是PC和移动端的页面是不一样的 所以做了两套 PC的一套 手机的一套 项目准备上线了 既然做了两套 肯定是要手机端访问手机的页面 PC访问PC的页面 怎么办呢 用js来判断一下<script type="text/javascript"> if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.loca

2020-12-21 16:58:54 569

原创 控制台提示“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

控制台提示“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。使用npm运行项目的时候 控制台提示 “npm” 项识别为 cmdlet、函数、脚本文件或可运行程序的名称。这时候通常由一下两个解决方法检查node是否安装成功 不要去看百度那些乱七八糟的教程 node傻瓜式安装 安好会自动去配置环境变量 不用管 接着去cmd中输入命令行 检查node和node自带的npm是否安装成功以管理员的身份去运行编辑器...

2020-12-09 17:28:22 337

原创 npm安装依赖Error: ENOENT: no such file or directory, mkdir ‘D:\‘

npm安装依赖提示Error: ENOENT: no such file or directory, mkdir ‘D:’最近在用公司提供的电脑做东西 使用npm安装依赖的时候 出现Error: ENOENT: no such file or directory, mkdir 'D:'这个错误 我当时用的是 H盘 node和项目都放在H盘安装依赖的时候 就报错 后来把node卸载 在D盘重新安装 就顺利的下载好依赖了...

2020-12-09 16:56:16 1927

原创 a标签不进行跳转 保留a的原有样式

a标签不进行跳转 保留a的原有样式a标签定义超链接 用于从一张页面链接到另外一个页面链接 最最最重要的就是a标签的 herf 属性 它指向链接目标 通常也会需要用a标签 但是不需要他进行跳转 保留其原有的样式<a href = 'javascript:void(0)'>目标链接</a>...

2020-12-09 14:47:58 523

原创 前端点击a标签实现下载功能

前端点击a标签实现下载功能做项目的时候遇到这样一个功能 公司给了一个模板 让放到前端 点击就可以下载 实现很简单使用a标签就可以了 测试的时候发现 明明应该是下载 没想到浏览器去打开这个文件 当然是找不到的 看代码 一句解决效果图展示实现代码 <a href='/src/assets/driver.xls' download>下载模板</a>一定要加 download...

2020-10-12 09:12:54 1034

原创 Git更新远程仓库代码到本地分支

Git更新远程仓库代码到本地分支 一句代码解决今天原本用的电脑被拿去维修了 换了另外一台电脑 刚好遇到这样一个问题 需要在新的这台电脑上把远程仓库上的代码拉下来 看了官方文档说用 git fetch 来实现 觉得挺麻烦的 发现了只用写一句命令就可以解决的方法解决方案使用 git pull 他的作用是,从远程仓库中获取某个分支的更新,再与本地指定的分支进行自动merge完整格式 git pull <远程库名> <远程分支名>:<本地分支名>例子 :g

2020-10-10 09:48:11 2588 2

原创 PropTable去除不要的属性 只留一个光表格

PropTable去除不要的属性 只留一个光表格propTable的功能十分完善 很好用 但是有些时候属性过多造成了冗余 可以去除不必要的功能 留一个单独的表格原效果图修改后修改的代码<ProTable // 无标题栏的proTable toolBarRender={false} // 去除搜索框 search={false} // 主键便是 rowKey="id" // 边框 bordered // 表头

2020-10-09 10:46:02 1109

原创 React快速生成组件的快捷键 (Vscode编辑器)

React快速生成组件的快捷键 ( Vscode编辑器 )1. 前言可以说整个的大前端开发都是组件化的天下,无论从三大框架(Vue、React、Angular),还是跨平台方案的Flutter,甚至是移动端都在转向组件化开发。所以,学习组件化最重要的是它的思想,每个框架或者平台可能实现方法不同,但是思想都是一样的。2. 使用vscode快速生成组件模板因为react的基本语法都是一样的 没有不要去重复的敲 粘贴复制的也麻烦 vscode编辑器提供了一个插件 非常好用 打开编辑器 → 选择扩展

2020-09-27 11:40:07 5997 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除