- 博客(26)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 VUE 项目适配PC屏幕的方案及解决办法
这个完整的适配方案通过插件和动态脚本的结合，实现了 Vue 项目在各种屏幕宽度下的自动适配。无论用户如何调整窗口大小，都能保持样式的一致性和稳定性。
2024-08-20 10:40:17
442
1
原创 【el-date-picker】element-ui中设置日期选择当前及大于当前的日期
【代码】【el-date-picker】element-ui中设置日期选择当前及大于当前的日期。
2024-01-09 15:54:24
2234
原创 微信分享图文链接，引用JSSDK1.0.4出现的问题及解决方法
jssdk是否配置为安全域名 --> 修改分享图片尺寸添加参数 --> 打印各种api日志 --> 修改公共配置文件中的appId --> 是否是jssdk版本问题 --> 服务器白名单问题 --> 公众号是否认证过期问题…微信版本的7.0.3版本在调用sdk1.4版本的时候会出现ios 自定义的分享没问题，但是安卓的自定义分享出现问题，需要把之前即将废弃的方法加进来。使用微信jssdk1.0.4版本进行H5图文分享，现图片与描述分享之后不展示内容，排查问题并解决。
2023-08-21 11:09:28
323
原创 VUE自定义日历组件，计算年月日，上个月份的空白展示，点击某一天进入详情页面
产品提出需求，需要日历来配置每一天的商品价格。刚开始使用的element-ui的el-calendar组件，由于样式、跳转、点击事件等功能都不好控制，所以自己写了一个日历组件。样式我在这里就不详细写了，大家各取所需。
2022-09-09 16:52:03
1914
1
原创 VUE实现从一个页面跳转到另一个页面的指定位置
例如，从网站的首页点击跳转到指定页面的底部。首页 home<div @click="toPath('/targetPage#target')"> <p>点击跳转</p></div>methods:{ //点击跳转方法 toPath(path) { this.$router.push({path: path}) }}跳转到的页面 targetPage<div class="location" id="target"&
2022-03-02 14:07:27
5345
4
原创 git命令查看提交代码行数和次数
1.打开需要查看的项目目录2.复制命令右键点击Paste查看某个用户提交代码次数git log --author="用户名" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -查看所有用户的提交次数git l
2021-12-09 16:56:23
8638
原创 路由跳转未更新数据
在后台管理中会经常出现，打开一个新的页面，保存修改，返回数据未更新，可以试试这个办法在watch函数中监听路由变化watch: { '$route': function (){ //重新请求新页面的数据信息 }},亲测有效：D...
2021-11-24 18:05:30
330
原创 HTML a标签vue动态跳转拨打电话页面 （移动端）
动态跳转拨打电话页面<a :href="'tel:'+ contactNumber">data() { return{ contactNumber:'' }}直接拨打电话<a href="tel:18235972222">18235972222</a>分享小干货 ：）
2021-09-22 14:48:05
713
原创 IE11 flex align-items: center垂直不居中
兼容IE11.flex-content{ min-height:100px; display:flex; align-items:center; }.flex-container:after{ content:''; min-height:inherit; font-size:0;}效果图没有垂直居中居中之后效果亲测有效 ：）！！
2021-08-30 17:32:48
430
原创 a链接跳转到指定页面的固定位置
需要跳转的a链接这里跳转的是vue页面<a href="/specifyPage#aaa"><a/>如果跳转到html页面<a href="a.html#aaa"><a/>指定位置页面的固定位置<div id="aaa"></div>：D ❀❀
2021-08-12 10:32:53
940
原创 Vue中使用websoket
项目需要实现移动端的客服聊天界面，类似微信的聊天界面，需要做到实时通讯，所以使用了websocket一、什么是websoketwebsoket是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通讯websoket可以建立服务器主动向客户端发送数据，实现双向连接通信，并且建立持久的通信二、如何使用mounted() { this.initWebSocket();}methods:{ //点击发送消息按钮 webc
2021-08-02 16:55:10
1210
原创 Vue+Element-ui上传图片压缩
vue+element-ui上传图片压缩详情请查看element-ui官网html<el-upload :action="uploadUrl" list-type="picture-card" multiple accept=".png,.jpg,.jpeg,.bmp" :on-change="change" :before-upload="beforeUpload" :on-success="uploadSuccess"> <i cla
2021-07-20 17:13:50
301
原创 Nuxt引入vue-lazyload，图片懒加载
npm$ npm i vue-lazyload -Syarn$ yarn add vue-lazyload在plugins文件夹新建vue-lazyload.js文件import Vue from 'vue'import VueLazyLoad from 'vue-lazyload'const loadimage = require('../static/i.gif')const errorimage = require('../static/i.gif')Vue.use(VueL
2021-07-20 16:42:59
1806
原创 实现左边框与字体齐平，类似于时间线样式
最终实现效果：具体实现：css主题思路：定位左边框与元素齐平，设置高度，设置li元素的最后一个元素的div左边框样式隐藏.secondLineStyle{ position: relative;}.borderLeftStyle { position: absolute; height: 124%; left: -22px; top: 23px; border-left: 2px solid #e4e7ed;}.secondLineStyle:last-chil
2021-07-16 16:18:54
180
原创 使用CSS怎么让Chrome支持小于12px的文字
针对谷歌浏览器内核，加webkit前缀，用transform：scale()进行缩放p span { font-size:10px; -webkit-transform:scale(0.8); display:block;}<p> <span>我变小了</span></p>快试试吧 ：）！！
2021-07-01 14:19:30
226
原创 自定义input复选框样式
正常的input复选框样式有一丢丢的不符合我们所需要的亚子，哈哈哈让我们改变一下input[type="checkbox"] { width: 22px; height: 22px; display: inline-block; text-align: center; vertical-align: middle; line-height: 18px; position: relative;}input[type="checkbox"]::before { conte
2021-06-23 15:43:13
631
原创 Vue $emit 子组件向父组件传递参数
传递一个参数时子组件this.$emit('newNodeEvent', param)父组件<Subcomponents @newNodeEvent="getChildData($event)" />methods: { getChildData(value) { console.log(value); },}传递多个参数子组件this.$emit('newNodeEvent', param1, param2,...)父组件<Subcom
2021-06-22 17:31:33
181
原创 Nuxt.js Vue服务端渲染
❀介绍Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。❀特性基于 Vue.js自动代码分层服务端渲染强大的路由功能，支持异步数据静态文件服务ES2015 + 语法支持打包和压缩 JS 和 CSSHTML 头部标签管理本地开发支持热加载集成 ESLint支持各种样式预处理器： SASS、LESS、 Stylus 等等支持 HTTP/2 推送❀nuxt
2021-06-11 17:12:30
868
原创 设置li标签的小短线
实现这样的效果，可以设置 li 的右边框，使用last-child的border为none去掉最后一个元素的右边框 即可代码如下list:[{...}]<li class="lis" v-for="(item, index) in list" :key="index"> {{item.name}}</li>.lis { text-align:center; width:100px; height:20px; border-rig.
2021-06-11 16:40:29
359
原创 img标签和span标签不在同一条线上
写代码遇到一个小问题，发现img图片和span不在同一条线上解决办法：给img标签添加 vertical-align: middle;属性即可<div> <img src="img.png" alt="" style="width:20px;vertical-align:middle;"> <span>这是一段文字</span><div>希望可以帮助到大家 ：D...
2021-06-10 14:45:21
933
原创 最值得推荐的前端移动开发框架
Vant 一个轻量级开源的移动端Vue组件库https://youzan.github.io/vant/#/zh-CN/Mint UI 基于Vue.js的移动端组件库http://mint-ui.github.io/#!/zh-cnMand Mobile 是面向金融场景设计的移动端组件库，基于Vue.js实现https://didi.github.io/mand-mobile/#/zh-CN/homeOnsen UI 是一个专门为移动应用程序设计的UI组件，包含符合原生iOS和
2021-06-01 09:55:49
967
1
原创 Google浏览器报错Failed to read the ‘localStorage‘ property from
项目一直都好好的在生产环境运行着，今天打开发现报错。查找度娘，都说修改google浏览器的设置，如下：修改之后，并没有什么卵用~~突然想起上周摸鱼，探索浏览器的拓展插件，有一个自定义鼠标光标的插件，可能跟插件有关系。解决办法：检查浏览器的插件，然后关掉它，就可以正常运行啦，也不报错了（这就告诉我们，不要随便下载浏览器插件，按需所取，哈哈哈）第一次写文章，是个小白：），希望各位大神多多指教~~...
2021-05-31 10:03:21
1093
空空如也
vue 使用 el-calendar日历组件怎么设置禁用今天之前的日期呀？
2022-04-25
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法？
2021-07-19
使用element-ui的Notification，提示消息超过页面高度则无法显示
2021-07-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人