- 博客(71)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 基于 element-ui 表格组件 el-table 导出表格数据
方法一：前端处理，直接导出 e-table 组件的表格数据。方法二：请求后端接口，返回blob文件流。
2024-05-11 16:32:42
731
原创 uniapp rich-text 富文本组件在微信小程序中自定义内部元素样式
（1）全局配置filter方法，实现富文本内容截取转换，附上‘rich-txt-p’样式类。（2）在app.vue中编辑‘rich-txt-p’内容，即富文本需要自定义的样式。解决方案：将传入的富文本内容截取并添加自定义样式类名。注：需要用 ::v-deep 深度绑定。rich-text 富文本组件在。
2024-02-18 08:55:21
1358
原创 解决 uniapp 开发微信小程序 不能使用本地图片作为背景图 问题
使用微信小程序自带转换方法wx.getFileSystemManager().readFileSync(img, 'base64')在vue文件中调用 urlToBase64 方法，这边默认图片都放在 static 文件夹下。在静态资源文件夹下创建sass文件，如 base64-img-store.scss。在uni.scss文件中引入 base64-img-store.scss。将转换后的base64编码放到对应url里，样式变量名称可自行定义。vue文件<style lang="scss">中使用。
2023-11-17 12:43:46
3149
转载 JS 数组or对象数组去重
一、数组去重（2.利用includes去重3.利用map去重4.利用indexOf去重5. 利用单层for循环去重6.利用双层for循环去重7.利用递归去重8.利用Array.filter和map对象数组去重（性能较高）9.利用Array.filter和Array.includes 对象数组去重二、对象数组去重（1、es5冒泡排序法，去重arr2、es5新建数据双重循环，去重arr23、es6的Map()，去重arr34、es5，对象法去重arr4。
2023-05-09 18:34:43
631
1
原创 uniapp input 实现验证码输入交互
html部分：验证码数组循环input输入框，最后一个输入框限制只能输入1个长度的值；输入监听、删除监听、焦点监听。可以控制台打印 this.$refs.input[0].$el.childNodes 查看元素结构。验证码输入，支持复制粘贴。
2023-04-07 15:28:16
1383
2
原创 uniapp-导航栏自定义按钮动态显隐
场景描述：导航栏自定义按钮根据条件显示隐藏1、按钮定义代码：2、按钮显示示例3、解决方案：通过dom节点获取元素“uni-page-head-ft”，这边可以根据类名（document.getElementsByClassName）、选择器（document.querySelectorAll）两种方式获取特别注意：“uni-page-head-ft”元素在dom里面查到存在两个值，应该是直接默认左右各一个，要根据自己实际代码选择控制哪个元素扩展：...
2022-02-17 10:08:46
2492
3
原创 vue-cli3搭建的vue项目中使用jquery-实测可以用
vue-cli3搭建的vue项目中使用jqueryhttps://www.bbsmax.com/A/LPdon1mO53/vue中引入并且使用jquery,修复使用eslint时报 $、 jquery找不到的错误_飞歌Fly的博客-CSDN博客_eslint jqueryvue是双向数据绑定，为啥还需要jquery 呢，因为vue在某些情况下需要操作dom,而vue操作dom又过于麻烦。①首先在package.json指定需要下载的jquery版本,然后npm install,安装jquery②安装好后，.
2022-02-11 03:00:05
354
转载 vue实现鼠标划过时元素显隐
vue中鼠标划过监听事件：mouseover、mouseout、mousemove、mouseenter、mouseleave一、传统（类似于js/jq）方式，获取元素dom信息，修改style示例：<ul> <li class="" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"> </li></ul>methods:{
2021-11-25 11:00:07
3398
原创 nginx 同一域名下部署多个vue项目
一、vue项目修改1.route配置2.vue.config.js配置文件修改（vue-cli3，之前的版本是修改webpack配置文件）二、nginx配置文件修改参考文章：使用 nginx 同域名下部署多个 vue 项目，并使用反向代理多个history模式vue项目的nginx配置...
2021-10-08 17:39:57
235
原创 IOS唤起键盘，移动端页面放大
问题描述：ios 点击 input\textarea 输入框唤起键盘后，页面放大且不容易恢复原样解决：html header 头部加入 meta 声明<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">其实这句是写移动端页面必备的，禁止页面放大缩小，草率了。。。扩展：1...
2021-08-27 09:45:32
1618
原创 element-ui dialog z-index 递增问题
问题：若el-dialog中要对图片进行预览，那么图片预览dialog可能会被上一层dialog遮挡，即图片预览不显示在最上方（也可是el-dialog嵌套其他dialog的情况）图示分析：观察el-dialog开启关闭，会发现dialog元素的z-index层级每次都增加2（el-dialog可以是同一元素也可以是不同元素），el-image的z-index默认2000，el-dialog的z-index值大于el-image的z-index值解决方法：设置el-image 的 z-ind
2021-07-08 18:16:40
5907
原创 前端实现pdf在线预览
概述：pdf在线预览，包括PC端浏览器、IOS、Android，开发过程中遇到的问题及解决方案【1】iframe 直接打开pdf文件（可用于PC端）<iframe src="pdf文件地址" width="100%" height="100%" frameborder="0"></iframe>存在问题：移动端会直接弹出pdf下载页面，不支持pdf在线预览【2】<object> <embed>标签 打开pdf文件（可用于PC端、IOS）解
2021-06-28 19:30:00
6351
1
原创 下载并打包多个文件
描述：后端返回文件（一个至多个）访问地址，下载并压缩文件，且同一个分类的文件为一个文件夹，最终下载的压缩包里包含一个至多个文件夹，文件夹里包含一个至多个文件主要代码：/** 该项目中接口返回文件资料列表格式--主要取出文件夹名称、文件名称、文件访问地址 list:[{ id: '', projectName: '', expands: { wjlb1: [{ id: '',
2021-05-27 09:33:40
312
原创 uniapp-checkbox勾选-刷新清空
案例描述：列表页-可勾选项目（包括全选、全不选）进行操作问题描述：全选、全不选切换无问题，勾选部分项目-刷新列表（重新请求列表接口即重新渲染列表，不是刷新网页）之后-上次已勾选的项目仍展示勾选样式解决：刷新列表之后触发勾选初始化操作（写在定时器内）解决原因：猜测应该是页面渲染先后问题，初始化操作设定一段时间后（页面完全渲染之后）进行代码示例：主要涉及代码段<checkbox-group @change="checkboxChange"> <view v-f
2021-05-18 18:24:39
4677
原创 el-dialog关闭后清除校验以及重置数据
参考文章：vue使用el-dialog关闭后重置数据的最佳方法（1）el-dialog绑定close事件（2）close事件内定义关闭窗口后需要做的操作1、清除表单校验---this.$refs[formName].clearValidate() //this.$refs.formName.clearValidate()2、重置数据（1）this.$refs[formName].resetFields() //this.$refs.formName.clearValidat...
2021-05-13 19:03:26
4403
4
原创 自定义滚动条样式css
效果图：（突然觉得这个挺好看的，就记一下，hhh） /*滚动条样式*/ .film-box-swiper::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; /*滚动条滑块按钮的颜色*/ scrollbar-face-color: rgba(196,170,128,0.8); /*滚动条整体颜色*/ scrol...
2021-04-26 15:57:28
168
翻译 iframe自适应高度（随内容高度变化）
转载（来源忘记了。。。）<!--内容部分--><div class="con"> <iframe id="mainFrame" name="mainFrame" src="main.html" style="width:100%;" frameborder="0" scrolling="no" onLoad="this.height=100" ></iframe></div>$(function () { //时间控制每
2021-04-07 09:28:13
11144
4
原创 vue router路由模式 hash改为history 对应配置
本地项目运行下对应修改配置：1.router 配置文件index.js2.vue.config.js (vue cli4.x) publicPath属性 "./" 改为“/” （对应报错：页面404）3.index.html 中调用的文件路径采用绝对路径‘/’，相对路径下页面刷新页面会出错参考文章： vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法 解决vue route...
2021-03-26 17:35:45
1636
原创 vue 监听网页关闭/浏览器关闭事件
参考博文：vuejs中监听窗口关闭和窗口刷新事件的方法1.methods中定义窗口关闭/浏览器关闭之后处理内容，例如删除cookie、session、local storage 等methods: { beforeunloadHandler(e) { console.log('关闭窗口之后') }}2.mounted 绑定窗口关闭监听事件mounted() { window.addEventListener('beforeunload', e =&g
2021-01-06 10:17:40
19965
6
原创 Git-常用命令（不定时更新）
git branch -a #查看所有分支git branch #查看本地分支git checkout dev #直接切换分支（dev：对应分支名称）git checkout -b dev origin/dev #在本地创建分支dev并切换到该分支（第一个dev：本地分支命名，可不与远程分支一致；第二个dev：远程分支命名）git pull origin dev #把gitLab上dev分支上的内容拉取到本地git push origin --dele...
2020-12-03 17:07:58
553
原创 原生table踩坑之单元格空隙与边框圆角不能共存
参考博文：CSS偶有所得 - table 边框加圆角踩坑一、消除单元格空隙border-collapse: collapse;二、表格边框圆角border-radius: 4px;生成表格单元格无缝隙但圆角也不存在了，解决方案：/* 消除掉外边框 */border-style:hidden/* hack一下加个阴影 */box-shadow: 0 0 0 1px #d8d8d8;...
2020-11-25 17:04:12
362
原创 element-ui 组件的 table 复选框，翻页记忆功能
比较简单的方法，利用element-table 属性参考文章：element-ui 表格翻页多选后仍然记忆所选项，数据回显稍微复杂的方法：参考博客：element-ui 组件的 table 复选框，翻页记忆功能
2020-09-14 11:15:12
581
原创 理解自适应布局和响应式布局的区别-CSS
简单的理解：直观：自适应布局实现方式：转载参考：（转） 响应式和自适应区别 （注：文章内提到的media 查询选择css 样式 应该是属于响应式布局实现方式，而不是自适应布局）参考文章：响应式布局和自适应布局详解...
2020-09-04 10:58:41
1618
1
原创 图片保持清晰度不变形填充父元素
场景：div里包裹img，img大小可缩放，但不改变图片清晰度，不变形object-fit 属性 对图片进行剪切，保留原始比例object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。object-fit: fill|contain|cover|scale-down|none|initial|inherit;object-posi..
2020-09-02 09:10:15
281
原创 css 设置图片缩放不变形
（1）设置image 属性{ max-width: 100%; max-height: 100%;}可实现图片在指定父元素内等比例缩放，但不保证宽高同时充满父元素，如果想要达到图片充满父元素且保持清晰度，最保险的方法是提供与父元素等比例的设计图参考文章/博客：div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧css图片按比例缩放不变形（2）设置css属性image-rendering --- 注意浏览器兼容性 auto 使用默认算法，..
2020-08-25 21:38:08
4632
转载 IOS系统中微信/浏览器 手机端输入框input无法输入
最近两天做移动端活动页面时，遇到一个问题：IOS系统中，微信移动端的input都不能输入了，本地环境和安卓手机都是没问题的。这就尴尬了，然后网上搜了一下，有人说可能是user-select导致的，我检查了一下自己的less,果然有相关的重置代码。那么为什么要加下面这句呢？input, textarea { -webkit-user-select: none; }其实是用来禁止用户进行复制选择的。这是webkit内核浏览器下的一个bug，具体可以参考这篇文章：(https://bugs
2020-08-11 23:51:50
1394
转载 element form 表单enter触发页面刷新
问题：在使用el-input组件时，为了操作方便，监听了@keyup.enter，默认会执行form的submit事件，直接enter键提交，但是首次提交时会出现页面刷新。方法一：el-from 加上 @submit.native.preventelement官网文档W3C 标准中有如下规定：When there is only one single-line text input field in a form, the user agent should accept Enter in tha
2020-08-11 10:56:04
845
原创 uniapp 去掉page页面导航栏返回按钮---H5
1、配置导航栏 autoBackButton 属性autoBackButton Object true 标题栏控件是否显示左侧返回按钮 "path" : "pages/login", "style" : { "navigationBarTitleText": "设置", "app-plus": { "titleNView": { "titleSize": "18px", "aut..
2020-07-09 08:43:54
13445
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人