前端
关注
分享
扫一扫
文章平均质量分 73
游人区
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
webpack5 基础配置
利用webpack5 打包 html，优雅书写支持多语言的利于 SEO 优化的官网原创 2022-12-29 16:47:44 · 1188 阅读 · 3 评论 -
iPhone 手机浏览器 font-size 失效问题
问题电脑端浏览器显示正常，iPhone手机浏览器却异常，如下图 用Safari调试iPhone手机网页，可以看到设置了 font-size: 12px 但实际浏览器渲染的字体大小却是 16px解析因为 Font Boosting 字体提升Webkit 给移动端浏览器专门提供的属性 ，因为移动端屏幕小，原始页面宽度大，在移动端浏览器浏览网页时的字体会比较小，看不清，Font Boosting 会自动把字体变大，方便浏览。解决直接为该失效元素加一行代码：text-size-adjust:原创 2022-05-15 17:22:56 · 1606 阅读 · 0 评论 -
CSS 修改SVG颜色并且宽高自适应
需求下图中的图案和文字根据网站的主题色更新缩放屏幕大小时，图片可以根据屏幕大小自适应默认图片的 svg 代码<svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon"> <rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#ff原创 2022-02-21 15:42:05 · 5361 阅读 · 0 评论 -
VUE报错：Uncaught SyntaxError: Unexpected token ‘＜‘
报错起因将Vue 路由 设为 history 模式后打包, 首页访问没有任何问题，跳转到子路由 /apollo/search/ 也没有问题，但刷新子路由 /apollo/search/ 就会报错：Uncaught SyntaxError: Unexpected token '<'查询过程刚开始以为是 js 打包发布过程中导致的 js 缺失，重新打包发布仍然出现问题，排除此因。查询后端 nginx 设置是否有问题，询问后端没有问题，排除后端原因最后查看报错 js 的路径，恍然大悟，正确的路径原创 2022-02-14 17:23:36 · 3703 阅读 · 2 评论 -
creat-react-app 修改打包路径
需求：将打包后的文件放到 myApp.org 文件夹 (非 build文件夹) 中，并且此文件夹放在该仓库的外面，即相对于根目录…/方法1：更改 .env 配置配置 package.json 命令{ "homepage": ".", //新增此项，打包后的静态文件引入路径改为相对路径'./' "scripts": { "start": "react-scripts start", "build": "react-scripts build", }}新建 .env原创 2021-10-14 17:42:15 · 3930 阅读 · 1 评论 -
vue打包后的静态文件上传到CDN，如何设置静态文件域名？
在搞资源文件全球加速时需要将 JS,CSS,IMG 等静态资源放到 CDN 服务器上，WEB 网站上引用CDN 上缓存的资源，因为网站用vue-cli 搭建的，所以需要对 vue-cli 配置文件 (vue-config-js) 进行修改，修改打包后的index.html中静态资源引用路径。vue.config.jsmodule.exports = { publicPath: process.env.NODE_ENV === "production" ? "https://resource.xxx.原创 2021-07-30 18:50:31 · 4694 阅读 · 4 评论 -
You may have an infinite update loop in a component render function.
1. 报错代码<ul> <li v-for="(item, i) in rankList" :key="item.ID" > <sparklineBar :data="item.priceList.reverse()" :limit="item.priceList.length" /> </li></ul>运行上述代码时，vue报错：You may have an原创 2021-03-22 17:38:11 · 9149 阅读 · 0 评论 -
vue 返回前一个页面操作
需求描述点击返回按钮返回到前一个页面当没有前一个页面时，默认跳到首页1. 方法一此方法根据浏览器默认的历史记录操作 window.history 。但是此方法存在一个问题：当前一个页面并非本网站（为第三方）页面则会跳到第三方页面如：从 baidu.com --> https://bscproject.org/#/project/1点击返回时会跳到 baidu.com并不会跳到 https://bscproject.org/具体实现方法：<a href="javas原创 2021-03-02 16:24:51 · 4123 阅读 · 0 评论 -
echarts5.0 去掉 hover 折线变粗方法
发现问题今天 echarts 版本更新至5.++，发现鼠标悬停在折线图上，折线变粗，这个效果和我的需求相悖，所以想办法去掉此效果解决过程emphasis折线图的高亮状态。属性：scale：boolean 类型，默认true。表示是否开启 hover 在拐点标志上的放大效果。lineStyle：包含属性：{ color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }原创 2021-02-19 19:02:27 · 4017 阅读 · 0 评论 -
阻止 form input 输入框按回车自动提交表单
发现问题：写东西时发现form 表单 中的 input 在 按下回车键（enter）时自动提交表单，而且在地址栏中显示提交的内容，这个东西就很鸡肋，我如果填的是密码，就会感觉这东西很不正规，那咱就找解决方法吧！解决过程在搜索时发现原来在 form 表单中只有一个 input 输入框时按回车键浏览器默认会触发表单提交，默认这两个字对 js 来说首先想到的就是 阻止浏览器默认行为，在此奉上一份vue 阻止事件冒泡，捕获方法文章，方便查阅解决方法找到问题的原因，那解决就很简单了，阻止浏览器默认行为不就得原创 2021-01-21 16:51:21 · 1207 阅读 · 0 评论 -
前端利用 i18n 实现多语言切换
前端实现多语言切换 ： 实现前端页面的资源国际化一、vue 中引用 vue-i18n 实现国际化安装 vue-i18nnpm install vue-i18n新建语言文件包： cn.js / en.js …cn.jsexport default { lang: 'cn', hello: '你好',}en.jsexport default { lang: 'en', hello: 'hello',}新建一个 i18n.js 中引入 vue-i18n （前提是要.原创 2020-11-17 17:01:01 · 5371 阅读 · 0 评论 -
前端 JS 调起打印机打印页面
window 对象有一个简单的方法可以直接调起打印机打印整个页面内容window.print();但是真正应用的时候肯定需要一个按钮点击打印，这个按钮肯定不需要显示在打印内容中，那如何打印指定部分的内容呢？这时候我们一定会想到 JS 中的截取内容方法——字符串截取（slice, substr, substring）Bingo，直接上代码：<body> <!--startpart--> <section> 需要打印的内容 </section>原创 2020-11-03 12:25:22 · 7268 阅读 · 3 评论 -
前端利用 ipfs 上传文件
IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。内容可寻址：通过文件内容生成唯一哈希值来标识文件，而不是通过文件保存位置来标识。相同内容的文件在系统中只会存在一份，节约存储空间版本化：可追溯文件修改历史点对点超媒体：P2P 保存各种各样类型的数据...原创 2020-10-30 18:34:05 · 6896 阅读 · 13 评论 -
比较两个一维数字或字符串数组里的值是否相同
前提比较两个一维数字或字符串数组里的元素是否相同。数组长度相同，里面的元素顺序可以不同，但元素的内容相同。实现function compareArr(arr1,arr2){ //先比较两个数组的长度是否一样，若不一样那肯定是不相同 if(arr1.length!=arr2.length){ return false; } //初始化相同的元素个数为0 var count = 0; for (var i = 0; i < arr1.length; i++) {原创 2020-09-28 11:05:22 · 993 阅读 · 0 评论 -
如何用手机访问本地页面？
需要将你本地的页面用localhost域名打开，并且确保你的手机和电脑在同一个局域网内（例如：电脑和手机连接同一个WiFi）1. 用localhost域名打开需要以下任意一种编译器webstorm: 右上角在浏览器中打开，默认就是localhost方式vscode: 需要安装 Live Server找到页面右键选择 Open with Liver Server 打开此页面sublime: 需要安装 SublimeServer 插件(1). 打开sublime，ctrl + shif.原创 2020-09-01 17:55:50 · 3674 阅读 · 0 评论 -
filter drop-shadow 阴影
简介filter：滤镜drop-shadow：给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本浏览器兼容性filter 函数1.blur(px)给图像设置高斯模糊,值越大越模糊。默认是0，可设置css长度值，但不接受百分比值。2.url()接受一个XML文件。该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。如：filter: url(svg-url#element-id)3.hue-rotate(deg)给原创 2020-06-02 14:51:40 · 5894 阅读 · 0 评论 -
css clip-path 画五角星
简介使用裁剪方式创建元素的可显示区域，实现区域裁剪。浏览器兼容性常用的三种方法1. clip-path: circle(50px at 50px 50px)以 50px 50px 的坐标为圆心裁剪一个半径 50px 的圆；2. clip-path: ellipse(30px 40px at 50px 50px)以 50px 50px 的坐标为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆；3. clip-path: polygon(50% 0, 100% 50%, 50% 10原创 2020-06-02 14:15:09 · 1581 阅读 · 0 评论 -
js progress 滑动条实现投资计算器
此文为js实现投资计算器，并且对复投与非复投的盈利进行对比。如下图：技术方面就用到一个简单的滑块，因为感觉比较简单所以打算手写一下，不想再因为这一个小东西引入一个庞大的UI插件，该文就此诞生。滑块核心js就这么一点点，其余均为盈利计算。// 移动端事件onTouchEvent(e) { // 滑块移动横向距离 this.touchx = e.touches[0].pageX - 40; this.computedAmount(e.target.id);},// pc 端事件.原创 2020-05-08 18:50:15 · 490 阅读 · 0 评论 -
input type="number",鼠标悬停关闭提示语
最近刚发现input 设置type="number"之后，鼠标悬停会出现提示语：请输入有效值。两个最接近的有效值分别为xx和xx。 一、问题想要输入的值确实为number格式，又可以输入小数，不限制小数位，所以要把这讨厌的提示去掉，该怎么做呢？二、解决方案1.设置title设置title为空之后提示内容也即为空，所以不显示，代码如下<input type="number...原创 2020-03-25 10:38:20 · 3977 阅读 · 1 评论 -
vue路由相对路径跳转
今天写东西遇到多层路由，路由之间跳转时需要相对路径，因此查了一下官网用到了append属性和router.resolve方法，因此列出具体的使用方法。今天写东西遇到多层路由，路由之间跳转时需要相对路径，因此查了一下官网用到了append属性和router.resolve方法，因此列出具体的使用方法。append 属性类型: boolean默认值: false设置 append 属性后...原创 2019-09-03 16:08:32 · 5707 阅读 · 3 评论 -
vue axios 拦截器
若需要对http的请求参数做一些复杂的处理，统一的配置，或者对返回的结果进行处理，此时需要一个 拦截器 interceptors1.下载axiosnpm i axios2.配置参数// 引入axiosimport axios from 'axios'const qs = require('qs');// 解决跨域请求cookie问题axios.defaults.withCr...原创 2020-03-23 16:51:01 · 343 阅读 · 0 评论 -
npm报错 gyp: No Xcode or CLT version detected!
报错：No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'....原创 2020-03-04 16:56:02 · 4223 阅读 · 1 评论 -
JS实现16进制转字符串
将一个十六进制的值转为普通的UTF字符串function hexTostr(hex) { var trimedStr = hex.trim(); var rawStr = trimedStr.substr(0, 2).toLowerCase() === "0x" ? trimedStr.substr(2) : trimedStr; var len = rawStr.length; ...原创 2020-01-20 15:37:05 · 6334 阅读 · 0 评论 -
Uncaught TypeError: Cannot assign to read only property 'exports' of object
1. 错误：vue 运行时报错：Cannot assign to read only property 'exports' of object '#<Object>'2. 解决过程：搜索一些方法都是在说 webpack 同一个文件 不可以用 import 引入然后再用 module.exports 输出,只能用 export 输出weeks.jsmodule.export...原创 2019-12-20 17:18:21 · 2824 阅读 · 4 评论 -
vue-cli 项目搭建
1. 初始化需要安装 nodevue-cli 2.x# 全局安装 vue-clinpm install --global vue-cli# 创建一个基于 webpack 模板的新项目vue init webpack my-project(my-project为自己项目的名称)# 打开项目运行cd my-projectnpm run devvue-cli 3.x# 全局安...原创 2019-11-27 17:27:18 · 441 阅读 · 1 评论 -
word-break 与 word-wrap
break-word会对过长的单词做词内断词处理，这样单词始终会在容器中，不会溢出容器break-all很暴力的一种处理方法，过长单词先断词处理，占满一行，然后再换行处理每次看到这两个css属性都是一种眼晕的感觉，今天就来总结一下。首先我们来来分别介绍一下这两个属性有哪些值：word-break:值描述break-all允许单词内换行keep-all&nb...原创 2019-09-03 16:00:50 · 957 阅读 · 0 评论 -
vue相同的路由根据参数不同 ，刷新数据
最近更新博客时需要在导航栏里增加一个分类的列表，但是分类的路由是同一个路由，只是后面的参数id不同，点击切换不同的列表时，发现URL正常了，但不是我想要的结果引子最近更新博客时需要在导航栏里增加一个分类的列表，但是分类的路由是同一个路由，只是后面的参数id不同，点击切换不同的列表时，发现URL正常了，但不是我想要的结果。因为就算路由发生了变化，数据还是没有变化，因为调用的依然是同一个组件，...原创 2019-09-03 16:11:04 · 1409 阅读 · 0 评论 -
Module build failed: SyntaxError: Unexpected token
1.vue router 按需加载时报错写法：{ path: '/product', component: () => import('./pages/product'),},运行时报错：Module build failed: SyntaxError: Unexpected token解决方法：...原创 2019-09-05 11:47:13 · 7864 阅读 · 0 评论 -
js 数组方法大全
总结一下js中数组的一些方法以下所有例子中的 arr 数组均为 [1, 2, 3, 4, 5]，并且每个例子之间的arr相互不影响var arr = [1, 2, 3, 4, 5];一、遍历（9种方法）数组的遍历都 不会 改变原数组1. forEach作用： 对数组进行遍历返回值： undefinedvar arr2 = arr.forEach((value, index...原创 2019-09-06 11:35:49 · 1301 阅读 · 0 评论 -
iOS 改变input disabled 默认的字体颜色
本以为改变input[disabled]的字体颜色只需要改变color和opacity就可以了，结果发现在iPhone手机和Mac的Safari浏览器中都不起作用。所以接下来我们来研究一下它。1.设置 -webkit-text-fill-colorinput:disabled,input[disabled] { -webkit-text-fill-color: #2c363f; ...原创 2019-11-21 14:29:45 · 1841 阅读 · 0 评论 -
js 自定义事件的使用和触发
1. 事件的创建JS中，创建事件方法，是使用Event构造器：var myEvent = new Event('eventName');为了能够传递数据，需要使用 CustomEvent 构造器：var myEvent = new CustomEvent('eventName', { detail:{ // 将需要传递的数据写在detail中，以便在EventLi...原创 2019-10-25 17:47:48 · 507 阅读 · 0 评论 -
js字符串方法大全
文章目录string对象构造函数concat方法 连接字符串indexOf 获取索引值startsWith endsWith includescharAt charCodeAt codePointA fromCharCodesubstr(fromIndex,length)substring(startIndex,endIndex)slice(startIndex,endIndex)split()分...原创 2019-10-24 14:38:43 · 1254 阅读 · 0 评论 -
js 排序算法
冒泡排序相邻两个对比，小的在前，function bubbleSort(arr) { for (var outer = arr.length - 1; outer > 0; outer--) { var isSort = true; for (var inner = 0; inner < outer; inner ) { if (arr[i...原创 2019-10-24 13:48:38 · 892 阅读 · 0 评论 -
国际手机号码格式化 和 手机邮箱中间部分用****替换
国际手机号码格式化1.下载libphonenumber-jsnpm i libphonenumber-js2.普通js用法在下载的文件里找到 libphonenumber-js --> bundle,这个文件夹里的js都是打包后的libphonenumber-js,根据项目需求引入不同的文件<script src="libphonenumber-max.js"><s...原创 2019-10-24 10:48:12 · 2703 阅读 · 0 评论 -
vue 动态生成二维码 qrcode
1.下载 qrcodenpm i qrcode2.在所需组件使用qrcode<template> <div> <img :src="qrcode" width="192"> </div></template>>import QRCode from 'qrcode'export default{ d...原创 2019-10-23 17:09:04 · 3270 阅读 · 0 评论 -
js cookie,sessionStorage,localStorage 操作
sessionStorage// 设置sessionStorage.setItem(name, val);// 获取sessionStorage.getItem(name);// 删除sessionStorage.removeItem(name);// 清空sessionStorage.clear();localStorage// 设置localStorage.setIt...原创 2019-10-21 18:37:02 · 519 阅读 · 0 评论 -
简单ajax与jsonp封装方法
ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本ajax函数封装function ajax(obj){ var defaults={ type:"get", url:"#", data:{}, dataType:"j...原创 2019-09-11 11:22:21 · 230 阅读 · 0 评论 -
js提取图片主体色设置为盒子的背景色
此处用到了jquery.adaptive-backgrounds.js插件问题因为产品提出需求要将头像的主体色设置为父元素背景色，所以找到了好用的jquery.adaptive-backgrounds插件用法引入jQuery.js和jquery.adaptive-backgrounds.js引入文件之后,按照下面这样即可完成一个简单的demo：$(document).ready(f...原创 2019-09-01 10:13:39 · 1692 阅读 · 0 评论 -
vue打包时报错 Error: No PostCSS Config found in 的解决方法
vue 项目打包时报了如下错误：Error: No PostCSS Config found in...没有postCss配置因此添加一个postcss.config.js文件放在根目录下postcss-loader是为了兼容css3,自动给css添加前缀的webpack插件module.exports = { plugins: { 'autoprefixer': { b...原创 2019-10-09 10:06:03 · 2867 阅读 · 0 评论 -
Module build failed: Error: Cannot find module 'node-sass’
在 vue 项目打包时报了Module build failed: Error: Cannot find module 'node-sass’这个错误，于是下载node-sass依赖npm install node-sass --save-dev结果还是报错然后百度说通过淘宝镜像下载即可，然后配置淘宝镜像npm install -g cnpm --registry=https://r...原创 2019-10-09 10:03:15 · 2013 阅读 · 1 评论