- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue项目pc端页面适配
pc端适配包括不同分辨率的适配以及放大缩小网页的适配。适配方法如下：1、rem适配。（依据网页根节点字体大小根据ui设计稿计算缩放比（以1920*1080为例，顶部标题字体大小为25px）在具体使用时直接调用函数，比如设计稿高为100px，则height:px2rem(100)，即转化为相应的rem。页面加载时设置页面默认根节点大小，监听页面变化时重设根节点字体大小。......
2022-07-08 09:44:18
4354
1
原创 vue实现水平时间线与蛇形时间线
二、蛇形时间线效果图<template> <div> <div style="width: 100%; display: flex; position: relative; margin-top: 20px" > <div style="width: 10%; margin-left: 30px"> <div> <!-- 开头 --> .
2022-05-16 15:48:14
2756
原创 vue-pdf预览乱码问题、打印乱码多一页空白问题
一、解决乱码问题参考；https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7将github上红色背景代码删除、绿色背景代码替换上；二、解决多一页空白问题；找到pdfjsWrapper.js文件上面替换注释的代码即可 '@supports ((size:A4) and (size:1pt 1pt)) {' + ...
2022-05-12 10:31:50
2724
原创 vue项目实现pc端适配
1、安装依赖包cnpm i lib-flexible --savecnpm i postcss-px2rem --save2、main.js文件引用// main.jsimport 'lib-flexible'3、在node_modules包里找到lib-flexible文件夹下的flexible.js文件修改其中的宽度，将宽度改为当前页面的宽度function refreshRem(){ var width = docEl.getBoundingClien
2022-04-29 16:49:48
2298
8
原创 js数组循环返回数据，常见数组循环比较
一、已知数组，返回出符合数组元素的新数组。const foods = [{ name: "汉堡包", group: 1 },{ name: "薯条", group: 2 },{ name: "咖啡", group: 3 },{ name: "可乐", group: 4 },];const arr = [2, 3];已知两个数组返回新数组[{ name: "薯条", group: 2 },{ name: "咖啡", group: 3 }]1、for循环 var n...
2022-04-14 16:12:09
2739
原创 html+css页面内容设置水平垂直居中
一、未知宽高设置文本水平垂直居中<div class="app_container"> <div class="content">水平垂直居中文字</div></div>1、绝对居中+水平位置.app_container{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}2、flex属性居中.app_contai
2022-04-01 10:11:59
571
原创 JS修改数组键名
初始数组let arr=[{'name':'张三','age':'18'},{'name':'李四','age':'20'},{'name':'王二','age':'24'}]console.log(arr)设置修改后键名与初始键名对应关系const keyMap={ name:'label', age:'value'}修改键名函数function updateArrayKey(array,keyMap){ //修改数组键名 let objArr.
2022-03-31 15:02:44
1498
原创 vue+vant实现自定义键盘样式
最终效果如下面所示代码部分<!-- 英文 数字 键盘 --><div class="allBoard"> <van-popup v-model="show_allBoard" position="bottom" :overlay="false" overlay-class="displayNone" > <div class="plate_number_box">
2022-03-31 14:29:00
2815
原创 微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能，需求是弹框生成二维码功能，所以根据需求自定义了一个弹框组件，后续其他地方也可以用到。最后效果图如下dialog部分<!--components/dialog/dialog.wxml--><view class='dialog-custom' wx:if="{{visible}}"> <view class='dialog-mask' bindtap="clickMask"></view> <view.
2022-03-18 10:14:48
1427
原创 vue手机端页面设置overflow:scroll后滚动不流畅问题
解决方法：在overflow:scroll地方也就是需要滚动的部分加上css，.content{ -webkit-overflow-scrolling:touch;}或者在全局样式处加上代码，避免每个地方都需要重复书写，*{ -webkit-overflow-scrolling:touch;}...
2022-03-17 14:05:28
1393
原创 JS中new Date()表示昨天、今天和明天的开始时间和结束时间
//昨天new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -2)//今天new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1)//明天new Date(new Date(new Date().toLocaleDateString()).getTime() +24 *.
2022-02-17 16:34:08
4187
2
原创 vue手机端自定义弹框，并设置背景不能滚动
效果图这里我封装了一个组件，便于不同地方、不同场景调用<template> <section class="wmassageMask" @touchmove.prevent> <div class="messageMaskContent" ref="msk"> <div class="title"> <h1 style="color: #fff">{{ showTitle...
2022-01-11 14:16:07
880
原创 vue+element table组件点击行选中同时高亮
<template> <div class="compoent-content"> <!--数据展示部分--> <div class="formList"> <el-table ref="elTable" v-loading="listLoading" :key="tableKey" :data="optionsList" :empty-te.
2022-01-10 11:43:11
542
原创 vue手机端常用功能
一、详情页返回列表页记住滚动条位置；二、上拉刷新数据；下拉加载更多数据；三、返回顶部；四、左上角返回到指定页面；ss五、ios系统与安卓系统日期格式问题；说明:ios系统时间格式不支持毫秒和特殊符号短横线；this.currentDate = new Date(timeRemoveMill(day).replace(/-/g, "/"))function timeRemoveMill(time) { // 时间去掉毫秒 if (time) { let date =...
2021-12-27 11:11:43
789
原创 vue页面实现显示当前动态时间
<div>{{ FormatTime(nowTime) }}</div>data() { return { timer: undefined, nowTime: new Date(), };},created() { // 显示时间 this.timer = setInterval(() => { this.nowTime= new Date().toLocaleString(); });},// 销毁定时器b...
2021-10-26 10:47:25
796
原创 使用element-ui调用table表格错位问题
一、问题描述：使用element-ui调用table组件，经常会遇到切换菜单时表格显示错位问题。二、问题现象：三、问题原因：el-table的高度自适应，在页面动态切换后出现错位问题。四、解决方案： ①在el-table上添加ref="elTable"（elTable可以自定义）。 ②在页面加载时加上下列代码。this.$nextTick(()=>{...
2021-09-02 10:31:40
2766
2
原创 Vue项目本地运行设置自动打开浏览器
目前统计了三种可操作的方法,仅供参考:一、在package.json文件中的scripts下的serve属性后面增加--open"scripts":{ "serve":"vue-cli-service --open",},二、在config文件夹下面的index.js文件中设置(VueCli2)autoOpenBrowser:true,三、在vue.config.js文件中devServer这是open为true(VueCli3+)devServer:{ ...
2021-08-19 09:50:17
378
原创 页面滚动条样式设置
一、全局滚动条样式设置：::-webkit-scrollbar { width: 4px; height: 4px;}::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background-color: #99a9bf;}::-webkit-scrollbar-track { -webkit-box...
2021-08-18 17:20:55
10058
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人