
vue.js
inticaler
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
uniapp 开发H5中适配底部安全区域不生效的解决方法
uniapp 开发H5中适配底部安全区域不生效的解决方法原创 2024-04-23 17:39:52 · 3212 阅读 · 0 评论 -
vue实现elementUI table表格树形结构-使用懒加载时-解决子节点增删改后,不刷新子节点数据问题
在使用element-ui的table组件时,使用树形结构,并使用了懒加载,可出现了一个问题,在对当前节点添加一个子节点数据,或删除一个子节点数据时,当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供实时刷新子节点数据的方法。原创 2023-06-16 15:50:06 · 3366 阅读 · 0 评论 -
总结vue2和vue3挂载自定义组件
vue2,vue3挂载自定义组件原创 2023-04-18 16:28:01 · 1418 阅读 · 1 评论 -
js使用正则表达式匹配富文本框中的img标签
【代码】js使用正则表达式匹配富文本框中的img标签。原创 2023-04-13 11:02:28 · 930 阅读 · 0 评论 -
elementUI 自定义表单数组校验
【代码】elementUI 自定义表单数组校验。原创 2023-04-11 10:22:56 · 709 阅读 · 0 评论 -
git实现版本回退
git命令实现版本回退原创 2023-02-27 14:41:16 · 181 阅读 · 0 评论 -
vue3自定义组件挂载到body下
vue3自定义组件挂载到body下。原创 2023-02-21 17:12:25 · 3853 阅读 · 1 评论 -
使用axios发送jsonp请求
使用axios发送jsonp请求原创 2023-02-09 15:20:04 · 1424 阅读 · 0 评论 -
Utils工具库
1. 从URL中获取参数并转为对象(也可借助第三方的qs包实现)2. 检查对象是否为空。4. 文本复制到剪贴板。5. 计算数组平均值。原创 2023-01-04 10:22:42 · 703 阅读 · 0 评论 -
javascript小技巧
javascript小技巧原创 2022-10-11 11:10:00 · 251 阅读 · 0 评论 -
省市区树形数据,每一级添加“全部”选项
例如有如下格式的省市区数据,业务需要分别为省、市、区添加“全部”选项。原创 2022-10-09 11:35:10 · 451 阅读 · 0 评论 -
ES6中的一些新特性
一、var顶层对象,在浏览器环境指的是window对象,在Node指的是global对象2、使用var声明的变量存在变量提升的情况在函数中使用使用var声明变量时候,该变量是局部的而如果在函数内不使用var,该变量是全局的二、let1、let是ES6新增的命令,用来声明变量只要块级作用域内存在let命令,这个区域就不再受外部影响let不允许在相同作用域中重复声明注意的是相同作用域,下面这种情况是不会报错的,因此,我们不能在函数内部重新声明参数三、const四、区别。...原创 2022-07-20 11:05:28 · 448 阅读 · 0 评论 -
兄弟组件进行传值(显示有先后顺序)
在开发中会遇到两个兄弟组件,哥哥执行完毕之后弟弟显示,哥哥隐藏,这种情况下我们就需要重新考虑执行先后顺序比如新建中间件,bus.js,让各个兄弟共用同一个传值事件机制。在child_1.vue(哥哥)组件中,绑定事件在child_2.vue(弟弟)组件中,触发事件获取值然后就可以在弟弟组件中获取到哥哥组件的data值喽...原创 2022-07-05 10:15:01 · 473 阅读 · 0 评论 -
require.context()的用法详解
require.context(directory,useSubdirectories,regExp)directory:表示检索的目录useSubdirectories:表示是否检索子文件夹regExp:匹配文件的正则表达式,一般是文件名例如 require.context("@/views/components",false,/.vue$/)1、常常用来在组件内引入多个组件。2、在main.js中引入大量公共组件...原创 2022-06-07 11:29:48 · 520 阅读 · 0 评论 -
vue + iview表单提交自动定位到错误的地方
在main.js中定义全局方法Vue.prototype.$errorScroll = function errorScroll(dom){ this.$nextTick(() => { let isError = document.getElementsByClassName('ivu-form-item-error') document .querySelector(dom) .scrollTo({ behavior: 'smooth', top: heightToTo原创 2022-05-30 19:29:34 · 921 阅读 · 0 评论 -
正则表达式收集
1. 数字(整数或者浮点数)//可以是整数也可以是浮点数//正数正则var posPattern = /^\d*\.?\d+$/;//负数正则var negPattern = /^-\d*\.?\d+$/;//数字正则var numPattern = /^-?\d*\.?\d+$/;console.log(posPattern.test("42.2"));console.log(negPattern.test("-42.2"));console.log(numPattern.test原创 2022-05-12 17:03:54 · 549 阅读 · 0 评论 -
vue项目中axios请求统一配置了超时时间,怎样在一个单独接口请求时重设超时时间
统一配置默认超时时间:const httpAxios = axios.create();//创建实例let Config = { TIMEOUT: 6000,//设置超时时间为6秒 baseURL: { dev: window.BASEURL_01, prod: '' }};httpAxios.defaults.timeout = Config.TIMEOUT;项目中普通api接口请求:export function postRefresh(data) { retur原创 2022-05-08 00:29:29 · 9951 阅读 · 0 评论 -
vue设置全局webSocket,并在对应页面接受消息通知处理
最近项目中有用到了webSocket,然后在收到消息之后需要在不同的页面进行处理。所有就需要在不同的页面监听并进行对应的消息处理。首先,在app.vue中添加socket初始化,并设置发送消息,接收消息和心跳检测的处理。// App.vueexport default { data() { return { // socket参数 socket: null, timeout: 10 * 1000, // 45秒一次心跳 timeoutObj: null, // 心跳原创 2022-04-29 11:39:27 · 15858 阅读 · 17 评论 -
解决vuex数据在页面刷新被重置的问题
vuex数据是保存在内存中的,页面每次刷新都会导致vuex里的数据被重置,目前的方案是在页面刷新前把数据存到localStorage在App.vue内操作:export default { name: 'App', data() { return { } }, created() { //解决vuex数据在页面刷新被重置的问题 //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.ge原创 2022-04-26 11:01:28 · 1804 阅读 · 0 评论 -
H5搭配Vant实现列表页的下拉刷新和上拉加载功能
最新项目中使用混合开发,要用到h5,其中包括列表页的功能,所以来总结一下实现方式:template代码如下:<van-pull-refresh class="sh_pullRefresh" v-model="options.isPullLoading" @refresh="onRefresh"> <template v-if="!options.isLoading"> <van-list v-if="tableData.length" v-model原创 2022-04-17 15:41:49 · 1422 阅读 · 0 评论 -
vue安装less并全局引入less/sass文件
1.npm install less less-loader --save2.配置less: 路径:build---webpack.base.conf.js添加{test:/\.less$/, loader:'style-loader!css-loader!less-loader'}3.想使用全局less,先安装插件1)npm install sass-resources-loader --save-dev2)在build/utils.js中找到return{}return {原创 2022-03-23 18:58:08 · 1128 阅读 · 0 评论 -
关于低代码自定义表单的思路和想法
最近在做项目时,遇到一个需求,需要页面配置自定义表单,然后供其他页面使用。大概整理了下思路,如下:一、渲染规定好的组件,配置并保存表单,包括布局。提前规定好可以使用的表单组件(表单组件封装,包括下拉框数据,日期选择等)。 借助插件vueDraggable来实现拖动排序。 设置自定义表单的配置项。二、在用到自定义表单的地方进行渲染。根据配置好的数据来进行渲染表单,(借助component)。...原创 2022-03-23 14:12:07 · 1014 阅读 · 0 评论 -
vue中异步组件的使用与配置说明
在组件引用中我们有时会用到异步组件。这里简单介绍下异步组件的配置与使用// Promise 异步组件Vue.component( 'async-webpack-example', // `import` 函数返回一个 Promise. () => import('./my-async-component')) // 高级异步组件const AsyncComponent = () => ({ // 加载组件(最终应该返回一个 Promise) component原创 2022-03-23 13:50:47 · 1568 阅读 · 0 评论 -
关于微信小程序使用wx.downloadFile和wx.getFileSystemManager().saveFile()保存文件在本机找不到文件的说明
downloadFile和saveFile调用成功后返回的地址都是以wxfile://开头的,这是微信自己的内部存储空间。但是android是可以在本地查询到的:内部存储/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/***/文件名,中间那个***是个长字符串,不知道是什么规则生成的;ios是无法查询到具体的文件的。...原创 2022-03-16 19:04:19 · 12205 阅读 · 3 评论 -
关于webSocket建立前后端连接,并进行心跳机制的实现
最近在做一个后台实时通知的项目,项目中用到了socket来实现前后端建立通信,在此记录一下。<template> <div> <h1>测试webSocket</h1> <div id ="aaa" style="height: 300px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;"></div>原创 2022-03-15 13:46:16 · 4704 阅读 · 2 评论 -
表单校验方式(手机号,固定电话,邮箱,营业执照,银行卡号)
最近在做后台的用户信息整理,要用到一些表单校验,在之前没有处理过营业执照这种的表单校验,正好借此机会整理一下,欢迎大佬们提出宝贵意见。表单引入:<FormItem label="联系人手机" prop="liaisonPhoneNumber"> <Input v-model.trim="newForm.liaisonPhoneNumber" clearable placeholder="请输入联系人手机"></Input></FormItem&g原创 2022-03-08 16:02:19 · 2464 阅读 · 0 评论 -
vue使用ivew 的插件tree-table供用户选择权限
<tree-table ref="tree" :height="clientHeight" :data="powerOpt" :columns="columns" show-checkbox show-header children-key="child" arrow-icon-down="md-arrow-dropdown" arrow-icon-right="md-arrow-dropright" @on-check-change="onCheckChange">&.原创 2022-03-04 16:28:38 · 610 阅读 · 1 评论 -
vue项目使用webSocket前后端建立连接推送消息
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>websocket通讯</title></head><!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> --><script> .原创 2022-03-04 16:23:45 · 1029 阅读 · 0 评论 -
Vue 消除Token过期时刷新页面的重复提示
1、问题现象 页面长时间未操作,再刷新页面时,第一次弹出“token失效,请重新登录!”提示,然后跳转到登录页面,接下来又弹出了n个“Token已过期”的后端返回消息提示。2、原因分析 当前页面初始化,有多个向后端查询系统参数的调用,代码如下: created () { // ======================================================================== // 获取需要的系统参数,注意:getParam原创 2022-03-03 15:42:53 · 2684 阅读 · 2 评论 -
element-ui中el-drawer组件打开自动聚焦问题
el-drawer组件设置了withHeader为false的情况下,会自动聚焦里面的可聚焦的第一个组件,例如dataPicker的弹框或者input框,select框等解决方法:// html修改<el-drawer :visible.sync="drawerShow" :with-header="true" :wrapperClosable="true"></el-drawer>// 样式修改/deep/ .el-drawer{ .el-d.原创 2022-02-24 15:29:59 · 2758 阅读 · 0 评论 -
有赞组件vant密码输入框input在微信小程序里隐藏显示密码有问题
<van-field value="{{ pwd}}" placeholder="请输入密码" border="{{ false }}" clearable class="form-input-item" password="{{passwordShow}}" icon="{{ passwordShow ? 'closed-eye'..原创 2022-02-15 10:20:33 · 1228 阅读 · 4 评论 -
vue在less中使用css3 calc 被解析 的问题
在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位,全部按照百分比计算,此例中的计算被less编译成calc(96%)。原因分析less的计算方式跟calc方法有重叠,两者在一起有冲突解决方案width:e("calc(100% - 4rem)");width:calc(~"100% - 4rem");...原创 2022-02-15 08:57:07 · 464 阅读 · 0 评论 -
解决iview表单中时间选择起的验证失败问题
1. type="datetime"的验证方式:<DatePicker v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>chooseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}],后面添加 pattern: /.+/可验证;2. type="dateran原创 2022-01-18 09:14:23 · 1121 阅读 · 0 评论 -
iView Input 输入框表单非空校验,默认值是 Number 类型校验失败
问题描述iView 按照 Form 组件文档用法写非空校验,当表单数据有默认值并且默认值类型为 Number校验失败,手动输入可以校验成功。问题原因官方已经给出回答,校验规则默认是string。而手动输入的时候Input组件会把输入内容转为字符串。解决办法默认值设置为字符串类型,或者用自定义校验。...原创 2022-01-16 13:02:13 · 1424 阅读 · 0 评论 -
vue3.0新功能
一、创建方式改变import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')二、组件中的模板结构可以没有根标签<template> <p>{{ name }}</p> <p>{{ age }}</p> <p>{{ sex }}</p> <button @c原创 2021-12-18 14:40:35 · 223 阅读 · 0 评论 -
vue2.5安装sass步骤和需要注意的点
1. sass依赖于node-sass,所以要先安装node-sass,但是现在如果直接使用 npm install node-sass --save来安装的话,会造成node-sass版本过高,运行不了。所以按照以下命令安装指定的版本。npm install node-sass@4.14.1 --save-devnpm install sass@1.26.5 --save-devnpm install sass-loader@7.3.1 --save-dev2. 在build文件夹下的web原创 2021-08-22 18:08:47 · 846 阅读 · 0 评论 -
vuex的基础使用
vuex中包含有:state,getters,mutations,actions,modules,mutations_type。import Vue from 'vue'import Vuex from 'vuex'import state from './state'import getters from './getters'// import mutations from './mutations'import mutations from './mutations_type'im原创 2021-08-10 14:06:47 · 166 阅读 · 0 评论 -
element中el-upload和vue-cropper结合实现上传头像裁剪大小
通过这两个插件很容易就能实现裁剪图片的功能,但其中有一个难点就是,裁剪后的图片要上传到服务器,(依然使用原先的el-upload上传图片的接口)我们知道,el-upload上传图片的接口需要一个file对象,而vue-cropper裁剪后返回的图片是base64或者clob,这时我们就需要用到formData来进行转换,并且还要注意上传时要指定headers的上传方式。以及接收参数的类型(formData)。...转载 2021-08-02 16:58:50 · 915 阅读 · 0 评论 -
vue实现HTML转PDF (已解决清晰、页边距、图片跨域导出等问题)
最近有需求做简历打印的功能,就又花时间研究了一下html转图片导出,里面牵扯到多页pdf导出时的分页和页边距问题,清晰度问题以及图片跨域问题等。我们一个一个来解决。一、先说HTML转PDF的实现方法1. 我们要先添加两个模块第一个.将页面html转换成图片npm install --save html2canvas 第二个.将图片生成pdfnpm install jspdf --save2. 在utils文件夹下面创建一个htmlToPdf.js文件,写入如下代码:// 页面导原创 2021-07-12 09:51:29 · 11385 阅读 · 55 评论 -
json.stringify()与json.parse()的区别,json.stringify()的妙用
一、JSON.stringify()与JSON.parse()的区别最近做项目,发现JSON.stringify()使用场景真的挺多,我们都知道JSON.stringify()的作用是将JavaScript 对象转换为 JSON 字符串,而JSON.parse()可以将JSON字符串转为一个对象。简单点说,它们的作用是相对的,我用JSON.stringify()将对象a变成了字符串c,那么我就可以用JSON.parse()将字符串c还原成对象a。let arr = [1,2,3];JSON.转载 2021-06-29 11:20:57 · 360 阅读 · 0 评论