- 博客(103)
- 收藏
- 关注
RSS订阅
原创 一些常用的东西
清除浮动css.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
2019-10-10 15:42:36
277
原创 继上一篇,设置弹框次数以及自适应图片弹框,部分机型(vivo)老手机不显示的问题
使用 requestAnimationFrame 和 setTimeout 的组合，确保在浏览器的下一帧渲染时才显示，这解决了 vivo 手机上的渲染时机问题。晕 弹框直接显示都出不来了,现在还有用这种老的机型的,但是没办法咯~ 前端遇到这种兼容性的问题就要勇于解决。渲染队列：使用 requestAnimationFrame 确保正确的渲染顺序。这确保了只有在图片真正加载完成后才显示弹框，避免了空白或闪烁。使用独立的状态控制显示，而不是直接依赖数据加载。正确的渲染时机：等待图片加载完成。
2024-11-28 17:37:33
471
原创 v3里h5 根据后台配置的图片自适应显示弹框里的图片,里面配置多张,点击x关闭下一张打开,限制弹出次数
没有定义弹框的宽高,而是根据图片的宽高,去自适应每个图片的大小,那么我们一张配置1000, 一张配置500, 一张配置250,那显示的每张图片关闭后的效果大小图片都是不一样的~完成, diaData.value[proxy.$global.AD_POSITION_HOME_POPUP]这里面就是个数组对象,大家可以去模拟。添加 margin: 0 和 padding: 0 确保没有额外的间距。中途遇到一个问题,设置了宽100%,显示的话却是90%;配置多张,点击关闭,下一张打开,以此类推。
2024-11-25 13:54:54
383
原创 git当前分支有本地记录,如何迁移到另一个分支
执行git add . git commit -m “” 和之前都一样。在执行 git stash save “feat:提交的东西”切分支之后执行 git stash apply。首先 git add .
2024-11-25 10:14:20
345
原创 elment-ui的折叠tree表单实现纯前端搜索,展开收起功能
根据categoryName进行前端模糊搜索,会递归categoryList 里面所有的值,包括children,children的不固定多少级,比如我所有一个haha,不管是哪一级,都会把,包含这个haha的都展开,别的项目也不会隐藏。之后参考代码路径src\views\goods\category\index.vue。纯前端去实现这个查询的功能,后台返回的是个数组对象,前端要给他包装成树结构先展示。在获取列表数据的时候也进行初始化数据。这样就实现纯前端去模拟搜索的效果。记录一下本次做的一个很扯的需求。
2024-11-19 13:53:01
812
原创 根据多选的选择,动态匹配/生成接口里面的数据
最近遇到一个需求,一开始以为接口里面只会返回三个数据,就直接调取接口,页面写三个html结构接口数据放在那里了,后来接口又加了两条,因为前端这边没写结构,就没出来…一个是下面的期数,期数接口传递当前id,上面有多少个name,就把他的相应id传递给第二个接口。后台分了两个接口去区分: 一个接口显示上面的name部分。我的路径:之后看src\views\partner\partner\index.vue。所以直接给他改为动态匹配的,不管后续后台这边添加多少条,都能保证数据出来。
2024-06-18 11:04:35
333
1
原创 vue中,(iframe)如何实现一个页面跳转链接,点击链接不是新开一个页面,而是在当前页面显示
昨天突然来一个需求,管理系统中,点击页面返回的接口信息,是一个链接,但是你不能去跳转到另一个页面,而是点击的时候,如果有这个链接,在当前页面进行显示,就像是这个页面的内容一样。样式也要携带进去,完美解决!我们用到的有iframe。
2024-03-07 10:53:33
760
原创 elment-ui部分ui组件在移动端也能实现自适应
最近有移动端的项目迁移到pc端,pc端那一套用的是element-ui的后台框架,所以难免有一些样式不兼容的问题,之前很久的时候也处理过这些,但是很久没处理忘了==,这个我直接用的是layout布局,手写div整上去的,目前遇到这俩,之后有了多更新。
2023-11-30 10:26:10
4535
2
原创 小程序项目在hbuilder里面给它打包成app
小程序项目临时有些登录需求，需要把（小程序某些功能通过条件编译让它显示到app上）小程序打包成app的话就必须需要一个打包的证书，证书的话就要去重新生成，苹果电脑可以去自动生成证书，平时是用windows进行开发的所以就要借助第三方工具（香蕉云编）去生成证书，但是小程序打包成app，还有一些一些app不兼容的插件，识别不到插件路径等，明明小程序上是成功运行的，但是打包成app就会报错，识别不到那个插件，这个目前在排查，等排查好了在总结。密码随便填写，点击下载 就会生成一个p12证书，我们的证书就生成好了。
2023-03-06 12:43:51
1807
原创 vue中管理系统首页改造pc端和移动端都能显示自适应
判断当前设备是手机端或者pc端，根据设备展示页面 在项目中经常会遇到支持 pc端 与手机端的需求。端和手机端尺寸差距很大，一个文件很难实现这种需求。这个时候就需要判断当前的设备，根据设备来跳转不同的路由。根据这种不同的页面，进行适配两套，在移动端以及pc端的展示，成功解决。在 App.vue 中判断当前设备进行跳转路由。
2023-02-27 13:40:48
2575
原创 Hbulider上如何打包
点击打包，就进入一个等待的过程，5分钟或50分钟不等。选择一个比较人流比较小的时间点，中午大概就可以打包好。因为前端开发是在测试环境上进行开发代码的，开发完再去看你开发的效果，这个要在哪里看呢？https://www.pgyer.com/ 这个里面去发布到我们的手机。就会跳转到发布应用，把刚才打包好的那个包拖拽过来就可以了。苹果的较麻烦，还需要获取一个uuid权限这个整好后总结。之后就生成了二维码可以进行下载，此为安卓的方法。进入到控制台 就可以看到你刚才打包的版本了。从详情进去，点击更新。
2022-10-27 09:36:44
1742
原创 elemet-ui的树结构使用lazy load搭配加载数据，以及默认选中一级节点
html代码： <!-- 左侧树结构部分 --> <div class="outsideBox"> <div class="treeClass"> <el-tree ref="tree" :data="data" :highlight-current="true" :default-expanded-keys="
2022-04-14 11:48:31
2502
原创 element-ui及时清除验证规则
误区之前使用的一直是重置表单(this.$refs[formName].resetFields(); )还是会报红,正确的使用方法使用清除验证(this.$refs[formName].clearValidate(); ),但是使用这个的时候要注意还要清除表单数据,尤其是在点击el-dialog的关闭事件和表单的取消按钮时候,不然会出现打开弹窗时,虽然没有报错,但是还有有值的bug;处理的思路先写一个重置表单的公共函数;再调用这个函数,提高函数复用...
2022-03-03 09:38:45
1766
原创 css 文本两行显示，超出省略号表示
重点：text-overflow: ellipsis;只对display：inline；起作用例子：a{display:block/inline-block;width:100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}b{display:inline; //正确display：inline-block //错误，b标签里的字超出不能显示省略号（…）}//一行white-space: nowra
2022-02-22 14:54:58
1179
原创 vscode格式化
//将设置放入此文件中，以覆盖默认设置{/* Easy Sass插件 /“easysass.formats”: [{“format”: “compressed”, //压缩“extension”: “.css”}],“easysass.targetDir”: “./src/styles”, //自定义css文件输出路径/ 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化网 */// tab 大小为2个空格“editor.tabSize”: 2,// 100 列后换行
2022-02-21 15:40:54
367
原创 element-ui改造表格样式
element-ui中没有只有外边框，我内边框不要的表格 所以就做了下小改造改造之后的效果：代码 <el-table class="table-detail" :header-cell-style="{ background: '#F7F8FA', color: '#333333' }" :data="tableData" style="width: 100%" > <el-table-column pro
2021-12-13 11:03:47
2547
原创 iview中的表格render搭配使用Tooltip 文字提示
iview这个库用的很少，虽说很多ui库都是一样的，element-ui是使用template里的插槽 用的较熟悉一些，iview的是需要搭配render使用， 所以自己看了一下网上的，都不是我要的效果，就自己梳理了下效果如下图：在这里插入图片描述自己这边也应用了两行在换行 超出…显示data 你的表格数据中： { title: '申请描述', key: 'name', width: '300px', r
2021-12-10 10:57:30
3119
原创 js，vue中限制文本框只能输入数字小数点
<el-input v-model=“item.money” @keyup.native=“UpNumber” @keydown.native=“UpNumber” />//代码UpNumber(e) {// 输入框中只允许输入数字e.target.value = e.target.value.replace(/[^\d]/g, ‘’)// 输入框中只允许输入小数点和数字，小数点后只能跟一位e.target.value = (e.target.value.match(/^\d*(.?
2021-11-25 14:43:46
1062
原创 vue导出文件，前端处理后台返回的数据获取json不全的问题
链接：https://www.cnblogs.com/min77/p/13858415.html 解决
2021-11-18 17:13:00
628
原创 vue保留两位小数
@keydown.native="handleInput2" handleInput2 (e) { e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null console.log(e.target.value); },
2021-11-15 15:35:14
1950
原创 element-ui 解决在IE（ie）浏览器下选择高度会出现空白的问题
测试在测第二轮 ie浏览器下，elemnt-ui的表单出现了以下这种情况仔细检查样式发现，el-select的高度为50px(正常的)，但是其直接父级.el-form-item__content的高度就是50.8px。select和父级本身都没有样式语句导致这个现象。至于是为什么，我也还一头雾水。不过多次尝试后发现了以下解决办法：给el-form-item__content加上display:flex;...
2021-09-07 14:46:41
625
原创 element-ui 使用load进行加载
(红框为机构，下面没圈的为部门)需求是这样的， 后台返回的数据中，tree结构有的返回子节点数据了，有的没有返回子节点数据，需要在点击的时候 调取接口，在进行加载当前父节点下的子节点数据所以，这个时候就可以使用load进行加载节点这里只用关注 lazy :load=“loadNode” （两者搭配使用，否则没有效果） 具体可以看官方文档html代码 <el-tree ref="tree" :data="data" lazy :load="loadNode" :hig.
2021-09-03 16:45:38
2096
原创 element-ui默认设置tree根节点展开并为选中状态
html代码：主要用到三个组件中的属性：1：:highlight-current=“true” 设置选中颜色的2：:default-expanded-keys=“idArr” 设置默认展开的3：:default-checked-keys=“idArr” 设置选中的具体介绍可以去看官方文档 <el-tree :data="CatlogTreeData" node-key="id" ref="treeFather" :highlight-current="true" :default-
2021-09-01 14:56:57
4163
原创 element-ui限制只能输入数字小数点保留两位
用element-ui的number修饰符的话， 是可以达到只能输入数字的效果，但是同时它把e也算进去了，算是数学的科学计算法把…所以限制了一下文本框的，可输入小数点，数字<el-input v-model="addForm.cgxe" oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value" type="number" placeholder="采购限额" maxlength
2021-09-01 10:29:39
1879
原创 element-ui实现表格按照第一页的顺序点击分页自动排序
代码html代码直接 prop绑定index即可 <el-table-column property="index" label="序号" width="50"> </el-table-column>获取数据的方法 // var newItem =res.data.data.list.forEach((item,index) =>{ //res.data.data.list 表格数据 forEach为
2021-08-26 14:30:20
344
原创 递归方式拿树结构的子项item的id数据
后台返回的格式[{"name":"xxxxxxx集团","id":"001","items":[{"flag":"false","name":"普通用户岗（分散采购）","id":"8a86a6197ae1cd61017ae1d23f6a0001","items":[]},{"flag":"false","name":"系统管理岗（分散采购）","id":"8a86a6197ae1dea0017ae1ed8a050003","items":[]},{"name":"xxxxxx有限公司","id":"10
2021-08-20 10:38:10
488
原创 限制按钮只向后台发一次请求的节流防抖
jsexport function Dobounce(fn, t) { let delay = t || 500; let timer; return function () { let args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => { timer = null; fn.apply(this, args);
2021-08-19 20:28:17
182
原创 element-ui拿到可选择的树结构id,以及default-checked-keys更新错误，父级别禁用
最近项目中再做一个 选择为树组件的需求，页面内容大概为这样可折叠，可选择，在点击详情回显的时候，根据后台返回的数据（id），来勾选用户选择的信息html代码 <div class="checkboxClass"> <el-tree :check-strictly="true" :data="allWorkList" :default-checked-keys="checkIds" @check='getname' show-chec
2021-08-17 14:45:00
1145
原创 问题待解决
<template> <div class="pageContent"> <div id="systemOrganBox"> <!-- 左栏树结构 --> <div class="outsideBox"> <div class="treeClass"> <!-- <el-tree :default-expand-all='true' ref="tree"
2021-08-16 11:20:26
381
原创 element ui 的树形结构，点击节点动态增加子节点并自动展开
<el-tree ref=“tree” @node-click=“handleNodeClick”>异步获取数据，并用append或updateKeyChildren增加子节点updateKeyChildren通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性 (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组假如你的节点数据没有一个唯一的key(一般是id)，则不能用，但是这个方法第二个参数是数组，比较方便this.$re
2021-08-11 14:59:48
8960
1
原创 element-ui处理多选checklist的数据，根据后台要求处理选中的id并以逗号形式拼接
第一种方式 this.checkList 为选中数据 this.allWorkList 为你页面渲染的数组 let arrName = this.allWorkList.filter(item => { return this.checkList.includes(item.name) }); let arrId = arrName.map(v => { return v.id + ','; }); consol...
2021-08-10 10:11:49
818
原创 element-ui的upload组件使用按钮弹出上传框
这篇总结之后element-ui的踩坑记录场景是： 我点击按钮想弹出上传框，结果选中它的ref元素加click事件压根不生效后来用的是： <el-upload **ref="upload"** class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :b
2021-08-03 17:04:20
1552
原创 一些项目中用到的校验规则vue+element-ui
这篇之后就记录一下，项目中用到的校验规则把，方便之后在遇到了，直接拿来用（社会信用代码，身份证号，手机号）目前这么多，之后用了在补！社会信用代码/submit.vue 页面引入import { isvalidPhone, CheckSocialCreditCode } from '@/assets/js/validate.js';应用： 1:手机号let validPhone = (rule, value, callback) => { if (!value) { cal
2021-08-03 11:19:46
889
原创 vue一个页面触发另一个页面的方法
之前很早的时候总结过，不过那一篇是，父组件里面嵌套子组件的情况下，进行传参，从而实现调取页面 的方法。今天总结一下，两个页面不嵌套，兄弟组件的情况下，调用另一个页面的初始化方法1:首先：导入VUE实例，创建一个Bus.js2:在你要用的页面导入，并用$on去传递你用的方法3:哪个页面想要用到，直接用emit去接收（我这里是请求成功后初始化列表）...
2021-08-02 11:04:16
4111
1
原创 element-ui修改tree树结构的展开收起图标
转自:添加链接描述<template> <div> <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" default-expand-all :expand-on-click-node="false"> <span slot-scope="{ node, data }" class="custom-tree-node"> <
2021-07-26 10:24:01
1218
原创 设置谷歌浏览器，实现跨域获取数据
因为之前用的都是很常见的 解决跨域的办法1:后台设置 header2：前台设置代理但是这次新搭建的项目，说的是google设置跨域后联调，到时候配置里面要改下环境地址去实现跨域。没接触过这种，就上网查了一下， 通过cmd去设置，把我这边的设置方法罗列一下，能帮到有需要的人，之后自己也能方便查看没设置之前为这样：1：首先找到谷歌的属性，文件所在位置复制2：win+r进入 cmd窗口， cd进入你的文件所在路径3：随后后面拼上chorm.exe 如后面的一串 chrome.exe --di
2021-07-21 16:49:39
889
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人