vue
Fansr_
Hello World
展开
-
vue+element自定义日历公共组件
自定义日历样式原创 2022-08-25 15:25:57 · 996 阅读 · 0 评论 -
vue项目pc端页面适配
pc端适配包括不同分辨率的适配以及放大缩小网页的适配。适配方法如下:1、rem适配。(依据网页根节点字体大小根据ui设计稿计算缩放比(以1920*1080为例,顶部标题字体大小为25px)在具体使用时直接调用函数,比如设计稿高为100px,则height:px2rem(100),即转化为相应的rem。页面加载时设置页面默认根节点大小,监听页面变化时重设根节点字体大小。......原创 2022-07-08 09:44:18 · 4448 阅读 · 1 评论 -
vue监听页面滚动后右下角出现返回顶部按钮
滚动到一定页面后el-table标题吸顶效果原创 2022-06-16 17:05:02 · 393 阅读 · 0 评论 -
vue使用pdf.js预览文件及相关使用问题
vue使用pdf.js预览文件原创 2022-06-16 10:33:59 · 1057 阅读 · 0 评论 -
vue+element table表格鼠标右键点击弹出菜单
vue+element table表格鼠标右键点击弹出菜单原创 2022-06-07 15:09:43 · 4284 阅读 · 0 评论 -
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 · 3041 阅读 · 0 评论 -
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 · 2826 阅读 · 0 评论 -
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 · 2317 阅读 · 8 评论 -
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 · 2909 阅读 · 0 评论 -
vue手机端页面设置overflow:scroll后滚动不流畅问题
解决方法:在overflow:scroll地方也就是需要滚动的部分加上css,.content{ -webkit-overflow-scrolling:touch;}或者在全局样式处加上代码,避免每个地方都需要重复书写,*{ -webkit-overflow-scrolling:touch;}...原创 2022-03-17 14:05:28 · 1456 阅读 · 0 评论 -
vue项目使用qrcodejs2生成二维码
vue项目使用qrcodejs2生成二维码原创 2022-03-10 14:27:12 · 1537 阅读 · 0 评论 -
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 · 895 阅读 · 0 评论 -
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 · 581 阅读 · 0 评论 -
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 · 801 阅读 · 0 评论 -
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 · 829 阅读 · 0 评论 -
使用element-ui调用table表格错位问题
一、问题描述:使用element-ui调用table组件,经常会遇到切换菜单时表格显示错位问题。二、问题现象:三、问题原因:el-table的高度自适应,在页面动态切换后出现错位问题。四、解决方案: ①在el-table上添加ref="elTable"(elTable可以自定义)。 ②在页面加载时加上下列代码。this.$nextTick(()=>{...原创 2021-09-02 10:31:40 · 2845 阅读 · 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 · 409 阅读 · 0 评论