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 · 9952 阅读 · 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 · 15859 阅读 · 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 · 12208 阅读 · 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 · 2759 阅读 · 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 · 11387 阅读 · 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 评论