前端
关注
分享
扫一扫
LifeFuture1994
这个作者很懒，什么都没留下…
展开
-
uniapp 的uni.getImageInfo接口API 获取失败
原因：如果你的图片很小，一般小于10kb,小程序会自动把你的图片转换成base64位，呢么就会导致你使用uni.getImageInfo接口报错，所以上面列出了，取消此功能的方法，这样就可以正常使用了，但是缺点是请求个数变多。原创 2023-06-16 15:38:02 · 4604 阅读 · 0 评论 -
js 监听div的resize事件
我们平时在监听resize变化时，一般监听的都是window/body。可以绑定onresize的标签 body可以绑定onresize的对象 window只有一个起作用,后定义覆盖前定义的但是有时我们希望监听div的resize变化该怎么办呢？尤其是现在css提供了resize属性。转载 2023-01-29 13:08:06 · 1012 阅读 · 0 评论 -
Element-UI el-upload组件，上传失败，但是依然显示文件列表
最近在使用element-ui的 el-upload组件，发现一个问题，就是我在上传文件过程中，上传失败了，文件列表还展示，非常尴尬。转载 2023-01-18 16:45:06 · 3426 阅读 · 0 评论 -
前端实现HTML转PDF下载的两种方式
在项目工具方法存放文件夹utils中创建// 导出页面为PDF格式} else {}}}})}}}以上两种实现方式各有优劣，方式一是纯前端实现，需要引入第三方插件，可能会导致项目体积增加。方式二虽然更加简洁，但a标签的download属性为HTML5新增属性，可能存在兼容性问题。如果有需要，可以根据自己情况来选择。转载 2022-12-16 15:05:20 · 3227 阅读 · 1 评论 -
ElementUI的row col布局在span超过24时仍并在一起的解决方案
1、首先要注意，row 的 type 必须是 flex。转载 2022-12-14 11:07:14 · 1464 阅读 · 1 评论 -
Vue Element UI 表格中的Input输入无法展示（真解，不骗人）
要给input赋值初始值转载 2022-11-18 15:05:51 · 4873 阅读 · 0 评论 -
使用require.context实现前端工程自动化
使用require.context实现前端工程自动化 - 简书翻译 2022-02-21 17:17:58 · 136 阅读 · 0 评论 -
vue 带参数跳转打开窗口
如果参数在路径中：router.js path: '/project/:id'var { href } = this.$router.resolve({ path: '/project', query: { id: this.id }});window.open(href);获取参数：this.$route.query.id如果参数不在路径中：1.不打开新窗口： path: '/projectlist' , name: '项目列表...转载 2022-01-13 11:57:26 · 303 阅读 · 0 评论 -
Vue transition实现点赞动画效果
爱心效果材料：爱心图标两个，没有我这种 icon 组件的用 png 图片代替<transition :name=" isLike ? 'zoom' : '' " mode="out-in"> <!-- 爱心图标 --> <icon data="@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon> <icon data="@icon/unl...转载 2022-01-07 14:26:10 · 2252 阅读 · 0 评论 -
element-ui Upload多文件一次上传，获取选择的文件的数量
<el-upload ref="fileUpload" v-loading="fileloading" class="upload-file" :action="uploadUrl" :multiple="true" :limit="9" :on-preview="handleFilePreview" :on..转载 2021-12-29 18:43:57 · 4927 阅读 · 0 评论 -
Vue - 生命周期函数(activated)
● <keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。● 如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时转载 2021-12-27 13:09:57 · 1607 阅读 · 0 评论 -
el-input 输入手机号
<el-form-item label="手机号：" prop="phone"> <el-input v-model="identityForm.phone" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="identityForm.phone = $event.target.value" :placeho...原创 2021-12-20 19:30:36 · 2056 阅读 · 0 评论 -
svg icon 引入
手摸手，带你优雅的使用 icon - 掘金转载 2021-12-20 13:40:18 · 232 阅读 · 0 评论 -
el-input 标签只能输入纯数字
el-input 标签只能输入纯数字 - 简书转载 2021-12-09 16:27:48 · 500 阅读 · 0 评论 -
tinymce-vue使用教程
转自：tinymce-vue使用教程 - 简书一、资源下载npm install tinymce -S //当前版本^5.1.1npm install @tinymce/tinymce-vue -S //当前版本^3.0.1二、安装语言包资源下载后,在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目转载 2022-01-04 16:04:19 · 11879 阅读 · 2 评论 -
Token和Session 原理及优缺点
转自：Token和Session 原理及优缺点 - 简书Session和Token的区别一、cookiehttp请求时无状态的。就是说第一次和服务器连接并登陆成功后，第二次请求服务器仍然不知道当前请求的用户。cookie出现就是解决了这个问题，第一次登陆后服务器返回一些数据(cookie)给浏览器，然后浏览器保存在本地，当用户第二次返回请求的时候，就会把上次请求存储的cookie数据自动携带给服务器。如果关闭浏览器cookie失效(cookie就是保存在内存中)如果关闭浏览器cook转载 2021-11-22 22:36:41 · 4803 阅读 · 0 评论 -
vue 常见的事件修饰符及其作用
常见的事件修饰符及其作用.stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡； .prevent：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）； .capture：当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。如 div1中嵌套div2中嵌套div3.capture中嵌套div4，那么执行顺序..原创 2021-09-13 13:03:23 · 1116 阅读 · 0 评论 -
浏览器缓存原理
1、components放置全局组件的文件夹2、转载 2021-09-13 10:16:53 · 383 阅读 · 2 评论 -
element-UI中el-select下拉框可搜索时候，filter-method自定义搜索方法
使用element-UI框架的使用，我们经常使用el-select下拉框，很多时候还需要使用可搜索的下拉框，然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法，但是却没有详细介绍怎么用，这里简单介绍一下用法，希望对大家有点帮助在el-select中加入filterable属性，就开启了搜索功能，然后我们用:filter-method="dataFilter"可以自定义一个搜索筛选条件，在这里来写我们自己的逻辑代码注意筛选的时候首先要把输入的值赋值给下转载 2021-08-31 18:37:27 · 12306 阅读 · 3 评论 -
解决element-ui的表格 列的 边框线消失的bug
转自：https://www.cnblogs.com/shuen/p/10196545.html如上图所示，边框线消失了，解决方法如下添加css代码，如果是修改全局，则到全局样式文件添加.el-table__row{ td:not(.is-hidden):last-child{ right:-1px;} }如果是修改局部，则用样式穿透添加，在当前页面的css文件添加/*注意deep两侧都要有空格*/.current_page_classname /deep/ ..转载 2021-08-18 16:39:42 · 4377 阅读 · 0 评论 -
将数组格式的字符串转换成数组
转自：https://www.cnblogs.com/shy0113/p/12064590.html 由于数据传输的原因，有时我们得到的是字符串形式的数组（比如：str='["a","b","c","d"]',写成str="['a', 'b', 'c', 'd']"，使用JSON.parse()的时候会报错）。要将这种字符串还原成数组对象，有如下两种方法。1，使用 eval() 函数转换（1）eval()函数可计算某个字符串，并执行其中的的JavaScript代码。我们可以借助它来将字符...转载 2021-08-05 16:49:39 · 14847 阅读 · 1 评论 -
如何在uni-app正确使用web-view
转自：https://www.jianshu.com/p/adc72eae0593最近在开发个人的一个小项目的时候遇到一个问题，原因是有一个列表，在点击某一项的时候要跳转到详情，这个详情是一个外部链接，并不是内部的查了一下uni-app的文档，嗯，很好，果然很顺利的找到了web-view组件，然后很天真的直接把web-web放到列表中<template> <view class="history"> <view class="list转载 2021-08-02 19:14:29 · 2484 阅读 · 0 评论 -
el-select 下拉框数量过多的处理方法之一
Element-ui 下拉列表 选项过多时如何解决卡顿问题当使用Select选择器时，如果下拉列表有几千个几万个，因此通过滚动条一个个的去找不是很现实， 这时可以对select设置filterable属性，可以在下拉控件里进行搜索。例如:<body> <div id="app"> <el-select v-model="value" filterable placeholder="请选择"> <el-opti转载 2021-07-12 15:55:08 · 7584 阅读 · 2 评论 -
el-tab 切换卡顿
切换的时候卡顿 使用v-if 给里面对应的子组件使其直接从DOM中去除其实这两个tab都是同一个子组件 但是就是由于卡顿的原因 所以每个我tab都写了一遍原创 2021-07-12 11:16:08 · 2182 阅读 · 0 评论 -
el-dialog的“数据残存”小问题
一般情况下其实不用添加v-if，但是visible属性其实控制的是弹框的display:none属性，所以如果这个弹框组件被多处使用，呢么可能存在“数据残存”的问题，呢么v-if，相当于是重新加载DOM,数据不会受到上次的影响，可以解决这个问题。...原创 2021-06-29 16:34:22 · 639 阅读 · 2 评论 -
Element-UI 表单验证规则rules 配置参数说明
rules: { name: [ /*required 是否必填 trigeer 触发检查的方式 blur 失去焦点时检查 change 值发生改变时触发*/ { required: true, message: '请输入活动名称', trigger: 'blur' }, /*min 最小值 max 最大值 注意: type默认为string min和max则为最小长度和最大长度 当需要设置成数字的最小值和最大值时 type:'nu.转载 2021-06-21 21:11:37 · 2576 阅读 · 1 评论 -
el-image 点击遮罩层取消预览功能
// 点击mask关闭图片预览 clickMaskClosePreview(e) { // 使用addEventListener,会出现点击点击两次才触发的情况 if (e.target.getAttribute('class') === 'el-image-viewer__mask') { // this.$refs.preview.showViewer = false this.imgPreviewShow ...原创 2021-05-26 16:36:28 · 1765 阅读 · 0 评论 -
v-model实时更新带来的render问题
现象：el-input等输入卡顿原因： v-model input 重排重绘，具体可参考https://blog.youkuaiyun.com/dobility/article/details/969939511、方法一：把el-input 等使用v-model组件抽离，组件之间的 render 是互不影响的，因此可以通过抽离组件的方式，来实现组件区域化的 render，避免整个大组件 render2、方法二：使用.lazy 修饰符*在输入框中，v-model 默认是同步数据，使用 .lazy 会.原创 2021-05-25 10:28:32 · 451 阅读 · 0 评论 -
前端服务器图片链接地址url 转化为 File 对象（适合用于图片更新编辑的时候）
思路：第一步：页面上需要一个不带src 的 img标签 <img id="img" crossOrigin="anonymous" v-show="false" />v-show（display:none） 是为了让其加载 但是不显示出来，触发后续的img.onload事件第二步：设置img标签，在img.onload事件中获取 file对象export function urltoFile(imgUrl, imageName) { var image = new.原创 2021-05-19 10:48:22 · 2650 阅读 · 0 评论 -
ie页面性能优化（持续更新）
1、使用按需加载子组件的方式，引入子组件 此方法针对页面具有优化，使其在页面效果上更加优秀，在chrome上体现效果不大，但是ie上具有很好的效果，比起之前不再呢么卡顿 components: { engineeringCurve:() => import("./engineeringCurve"), drillingFluidCure:() => import("./drillingFluidCure"), designResources:() =>..原创 2021-05-10 16:58:25 · 1187 阅读 · 0 评论 -
vue axios pdf，gif 文件流的方式下载 前端处理方式
// 方式一：页面下载 显示下载进度 window.location.href = ip + '/xxx/xxx' + row.id // xxx是接口地址而非文件在服务器地址// 服务器上文件地址方式必须确定 前端项目没有路由拦截 trainApi.downFile(params).then((res) => { //方式二、 axios 文件流下载 不显示下载进度 let blob =...原创 2021-04-30 17:06:11 · 432 阅读 · 1 评论 -
深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。示例代码如下转载 2021-03-26 18:16:56 · 204 阅读 · 0 评论 -
vue批量注册全局组件
vue批量注册全局组件在公共组件中多次引入的问题。如某个组件使用频次在两次以上，建议注册为全局组件，以便后续开发便捷使用，防止在父组件中无休止的引入、注册带来的不便：第一种方法：main.js//引入vueimport Vue from 'vue'//引入全局组件import componentName from ‘@/component/component’//注册为vue全局组件Vue.component('componentName',componentName).转载 2021-03-26 16:29:37 · 505 阅读 · 0 评论 -
window.open是不是和html中的a超链接
window.open是以本窗口为父窗口弹出来的子窗口 是父子关系 window.open() 里面有一些参数，是否显示状态栏、滚动栏等。<a href>是正常的页面跳转... 可以说跟前一个页面无关系..原创 2021-03-22 15:56:44 · 379 阅读 · 0 评论 -
JS 下载文件两种方式总结
后端返回Blob对象（文件流），完成导出、下载功能：1.介绍BlobBlobBlob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。JS 下载文件下载文件分为两种形式，哪两种方式取决于后台；如果后台服务器的静态目录有可供下载的静态资源，后台人员告知你文件路径，直接window.location.href方式获取即可； 如果后台服务器无可供下载的静态资源，返回的是一个文件流(resp...原创 2021-03-11 10:51:51 · 11239 阅读 · 0 评论 -
el-table实现表头内容换行显示
表头单元格换行：方式1： <el-table-column header-align="center" align="center" width="60"> <template slot="header"> <div>密度</div> <div>(g/cm³)</div> </template> ...原创 2021-03-09 18:49:55 · 1489 阅读 · 0 评论 -
echarts 地图 json js 文件无需查找
1、vue项目中npm install echarts --save安装echarts依赖2、main.js中引入相关依赖import echarts from 'echarts'//注意：echarts3.0以后已经不包含地图文件了，需要手动引入china.js文件import 'echarts/map/js/china'//将echarts绑定到vue的原型上Vue.prototype.$echarts = echarts重点要说的是这里import 'echarts...原创 2021-02-23 17:47:00 · 487 阅读 · 0 评论 -
vue router.beforeEach
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!auth.loggedIn()) { next({ path: '/.原创 2020-12-14 20:53:29 · 196 阅读 · 0 评论 -
Vue导航守卫beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave
Vue导航守卫beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave（注意不是路由守卫）Vue导航守卫以我自己的理解就是监听页面进入，修改，和离开的功能。每个守卫接受三个参数to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行转载 2020-12-14 19:58:06 · 356 阅读 · 0 评论 -
vue 404页面的设置
{ name:'404', path:'/404.html', component: ()=> import('../page/NotFound/view.vue'),},{ path:'*', redirect:{ name:"404" }}// 或者可以不写 重定向到404而是直接首页 如果首页需要登录的话 设置路由守卫 再决定继续跳转到首页还是登录页面// 或者可以不写 重定向到404而是直接首页 如果首页需要.原创 2020-12-14 18:14:09 · 881 阅读 · 0 评论