- 博客(46)
- 收藏
- 关注
RSS订阅原创 vue/H5图片压缩/压缩后上传
需要先把上方代码进行封装，在utils创建js文件，我的命名为（common.js）,将上方代码复制到js文件内，然后把封装的方法给抛出暴漏出来进行调用。如果有其他方式也可以抛出也可以，或者直接写在vue文件内，因为项目中使用比较多，所以进行了封装。因为目前使用的H5,只写了uniapp+Uview插件进行压缩上传。图片压缩：通过canvas进行图片压缩。在data中定义压缩大小限制。使用Uview上传组件。在vue文件中进行调用。
2025-03-21 11:55:20
279
原创 uniapp H5 微信小程序嵌套H5网页出现白屏问题
3：修改每次打包的js文件，让每次打包后js名称不一样（主要目的让浏览器不读取缓存的js，每次从服务器重新获取新的js文件进行加载显示；vue项目实现原理一样，可以参考以下文章：）1：在微信：我的-设置-通用-存储空间-缓存；点击清理就可以了（如果面向大客户群，此方式不合适）2：在webView嵌套，url后面拼接时间戳，保证每次url都不一样就可以解决（亲测有效）在最外层创建vue.config.js文件，将以下代码复制其中，重新打包。
2025-03-17 09:42:38
284
原创 vue打包项目，根据时间戳进行每次生成不一样，防止浏览器缓存
每次生成不一样可以解决浏览器缓存问题，但是对应着，每次发布新的包，加载速度会慢，以为获取的并不是浏览器已经缓存的静态资源文件。如果需要让vue根据时间戳进行命名打包，需要再vue中增加进行以下配置。
2025-03-17 09:41:24
126
原创 css错峰布局/瀑布流样式（类似于快手样式）
你可以方便地同时设置主轴方向和换行方式，而不需要分别设置这两个属性。这种简写方式在处理复杂的布局时非常有用，可以减少代码量并提高可读性。用于指定元素内部是否允许发生页面、栏目或区域的分隔。避免在该元素内部发生分页或分列。
2025-03-06 11:33:14
264
原创 Vite搭建Vue3+ts并引入常用组件
没有node_modules，需要自己npm i下载一下。创建router目录，在里面创建index.ts。在vite.config.ts中引入。在vite.config.ts中引入。出现一下就是项目创建完成。在main.ts中引入。在main.ts中引入。
2024-10-28 10:46:52
700
原创 vue3 引入echarts（未使用Ts）
padding: [0, 0, 0, 0], //name文字位置 对应 上右下左。nameTextStyle Y轴上方name样式调整。grid:{ // 让图表占满容器。在项目需要使用的页面进行引入。grid 确定是否铺满区域。官网引入echarts。
2023-11-15 10:04:40
167
原创 uniapp H5扫码
uniapp原生scanCode扫码h5端不支持，要在h5端使用扫码需要引入第三方插件或者使用微信的jdk来实现，这里我使用的第三方组件进行实现。其中qrcodeSucess方法是扫码成功的方法，会抛出参数。插件文档写的有，以下是我写方式进行引入。uniapp官网插件地址。
2023-11-06 10:43:05
1695
5
原创 node.js安装以及环境配置
打开安装的目录（默认安装一般在C:\Program Files\nodejs）在安装目录下新建两个文件夹 【node_global】 【node_cache】打开【系统属性】-【高级】-【环境变量】，在系统变量中新建。打开后 nodejs启动程序以及添加到系统环境变量中。最后在系统变量中添加%NODE_PATH%新版的nodejs安装时同时也安装了npm。打开安装文件 右键属性-安全。进入后编辑系统变量中的Path。测试安装express模块。修改用户变量的path。
2023-08-28 15:50:37
147
原创 vue3+ts+vite页面添加水印效果（Watermark）
在app.vue中引入watermark.js方法，如需单个页面使用就在需要水印的页面引入。这里展示的接口数据展示为水印，如需写死 直接写onMounted。项目创建watermark.ts文件复制以下代码。调用 watermark(‘水印’);
2023-06-15 09:35:10
1012
原创 搭建vue项目
1，安装node环境下载地址为：https://nodejs.org/en/输入：npm install -g cnpm –2，搭建vue项目1.安装全局vue-cli脚手架npm install -g vue-cli2.创建项目vue init webpack vue001如果报name can no longer contain capital letters.是因为项目名字首字母不能大写 Vue build==>...
2022-04-11 10:39:11
668
原创 vue获取dom节点后打印undefined
mounted挂载之后获取dom节点出现undefined，1.使用this.$nextTick（），在这个函数方法中调用2.因为页面使用v-if、v-show、v-for，原因获取不到dom节点，这时候需要在updated函数中调用updated() { this.$nextTick(function(){ //调用需要执行的方法 }) },...
2021-12-03 11:17:14
1216
原创 vue定义网页title
在router.js中加上meta属性，定义title显示的内容meta: { title: 'js去除对象内部为空的字段' }然后再main.js中引入一下代码，进行遍历meta中的title属性router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } n...
2021-11-29 11:47:03
633
原创 css设置滚动条(包含IE)
::-webkit-scrollbar滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button滚动条两端的按钮 ::-webkit-scrollbar-track外层轨道 ::-webkit-scrollbar-track-piece内层滚动槽 ::-webkit-scrollbar-thumb滚动的滑块 ::-webkit-scrollbar-corner边角 ::-webkit-resizer定义右下角拖动块的样式 详细的css属性...
2021-11-24 13:59:06
650
原创 vue项目引入公共头部底部
1.在components文件下创建头部（header.vue）和底部（footer.vue）文件，名字自定义2.修改router下的index.js，把头部文件和底部文件在index.js进行注册import header from '@/components/header'底部同理，3.在app.vue文件中引入注册import header from "./components/header"components:{ header}如果定义的标签..
2021-11-19 14:18:08
2546
原创 vue引入依赖失败
FetchError: Invalid response body while trying to fetch https://registry.npm.taobao.org/less:抛出这样的错误，是因为npm引入的镜像报错我这里使用的淘宝镜像更改一下镜像安装源就可以了# 查看自己的安装源npm config get registry# 更换npm源为国内淘宝镜像npm config set registry http://registry.npm.taobao....
2021-11-19 13:53:36
909
原创 vue引入less
1.npm install less less-loader --save引入less依赖2.在build文件中的webpack.base.conf.js中添加{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }module: { rules: [{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' } ...
2021-11-19 13:47:41
547
原创 vue创建项目
1.全局安装vue-cli脚手架npm install --global vue-cli若安装失败，使用管理员权限运行cmd2进入要创建vue项目的目录下执行vue init webpack "项目名"全部回车就行说明：Project name==>项目名称 自己输入； Project description==> 项目描述 自己输入； Author==> 项目作者 自己输入； Vue b...
2021-11-19 11:59:00
361
转载 vue面试题
原文链接：https://blog.youkuaiyun.com/JHXL_/article/details/121349822文章目录Vue谈谈你对Vue的理解Vue的常用指令Vue的优缺点v-if和v-show双向数据绑定原理vue和react的区别computed 和 watch 有什么区别？SPA是什么vue中methods、watch、computed之间的差别对比以及适用场景VNode是什么请求接口所在生命周期数据更新了页面没有渲染怎么办组件通讯说说你对MVVM的理解父子
2021-11-19 11:12:59
602
原创 CSS样式初始化
/* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /*.
2021-11-17 10:40:18
266
原创 css特殊符号
基本形状▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605✦ 10022 2726 ☀ 9728 2600 ◆ 9670 25C6 ◈ 9672 25C8▣ 9635 25A3标点,特殊符号« 171 00AB » 187 00BB ‹ 139 008B › 155 009B “ 8220 201C ” 8221 201D‘ 8216 2018 ’ 82
2021-11-16 15:09:51
3858
原创 iframe高度自适应
<iframe src="./page/header.html" id="iframepage" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" onLoad="iFrameHeight()"></iframe>onLoad="iFrameHeight()"必要 调用iFrameHeight()事件 id需要在事件中使用// 头部高度自适应function iF...
2021-11-08 18:00:29
131
原创 js简繁转换
// 网页简繁体转换// 本js用于客户在网站页面选择繁体中文或简体中文显示，默认是正常显示，即简繁体同时显示// 在用户第一次访问网页时,会自动检测客户端语言进行操作并提示.此功能可关闭// 本程序只在UTF8编码下测试过，不保证其他编码有效// -------------- 以下参数大部分可以更改 --------------------//s = simplified 简体中文 t = traditional 繁体中文 n = normal 正常显示var zh_default = 'n.
2021-11-05 14:22:59
992
1
原创 nuxt/vue使用font-awesome
先在官网Font Awesome，一套绝佳的图标字体库和CSS框架下载文件压缩包之后把解压文件放在vue/nuxt静态文件夹中，因为我用的是nuxt，所以只展示nuxt内的（vue大致相同）若是局部使用，在文件夹中引入css文件下的font-awesome.min.css若是全局引入，在nuxt.confing.js中link下{ rel: 'stylesheet', href: '../font-awesome/4.7.0/css/font-awesome.min.css' .
2021-10-20 17:03:31
547
原创 H5调用手机扫码
<button @click="tel()">检票1</button><div>测试：{{text}}</div>tel(){ var that = this; uni.scanCode({ onlyFromCamera: true, success: function (res) { console.log('条码类型：' + res.scanType); console.log('条码内容：' + res.resul.
2021-10-12 16:29:33
1268
原创 js文字滚动
<div id="marquee"> <div id="marquee_text"> <a href="#">关于2020年度市总工会委托审计项目质量评价结果的公告</a> <a href="#">上海市2021年全国五一劳动奖和全国工人先锋号公示</a> <a href="#">上海市总工会2021年度部门预算</a> <a href="#">第六届全国职工优秀技术创新成果交流活.
2021-09-24 10:38:17
229
原创 js获取图片宽高
let image = "图片路径";//创建对象let img = new Image();img.src = imageimg.onload = function{ // 打印 console.log("width:"+img.width+";hegiht:"+img.height) };在onload中使用this指向会报错；需要改为箭头函数img.onload = () => { /.
2021-09-15 11:33:51
98
原创 js一些正则校验（笔记）
手机号替换中间四位为****var tel = "13286953333";var reg = /^(\d{3})\d{4}(\d{4})$/;tel = tel.replace(reg, "$1****$2");console.log(tel);
2021-09-13 15:09:27
150
原创 nuxt使用swiper
一、安装vue-awesome-swipernpm install vue-awesome-swiper --save二、安装swipernpm install swiper --save三、在pligins目录下创建vue-swiper.js文件import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)四、修改nuxt.config.js文.
2021-08-27 15:26:27
1935
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人