- 博客(96)
- 资源 (2)
- 收藏
- 关注
原创 vue2中使用jsx基础
总结:如果子组件里传过来的不是个对象,那直接render里{scope} 没问题。如果写个方法,return, 直接回显就是[object,object]。下面一个示例包含一些基础的方法使用、v-if的用法、v-show、v-for的使用, 这里就偷个懒了,不挨个拆分来细讲了。在父组件中直接使用scope, 我们这时候页面上显示的是undefined, 实际上他是一个object。这时候,我们在页面上看到的就是 [object,object]如果子组件里面用的插槽中传参是一个对象,子组件child01中。
2024-08-02 15:41:03
470
原创 nvm管理node版本问题处理集合
在nvm的安装路径下找到settings.txt文件,如果没有,可以新建一个,其实这个文件可以理解为nvm的配置文件。
2024-08-02 13:13:15
308
原创 前端计算精度丢失问题
toFixed也有精度丢失问题,直接main.js中改写toFixed方法。vue项目中直接装插件。方式二: 封装js方法。
2024-01-10 19:24:45
573
原创 elementUI表格勾选框判断选择相同的内容才能进行后续逻辑处理;否则拦截提示
2、判断是否相同的内容 的公共方法,tableSelectArr是勾选的数据集合。不满足条件给出提示:请选择同一个年级 、分数的学生。可多选需满足条件:同一个年级、同一个分数;3、按钮位置增加判断、拦截。1、先对勾选数据进行赋值。
2023-06-26 13:36:58
1167
原创 toFixed精度丢失问题
10.3950 * 3935.00 用toFixed(2) 得到的是40904.32 实际应该是40904.33。在main.js中直接复制下面代码即可。在main.js中直接复制下面代码即可。
2023-06-05 17:08:43
524
原创 vue(vue3)实现监听切出当前窗口,切回当前窗口调用查询接口
注意: vue中使用,需要及时移除掉监听。比如说2个界面都写了监听方法,然后多次来回切换2个界面,多次切换不同的窗口,会导致调用的接口多次执行,影响性能。
2023-06-05 16:55:22
2963
原创 vue中使用FullCalendar实现自由拖拽日历活动(包含获取当前视图开始时间与结束时间,动态渲染接口日历活动数据)
1、安装FullCalendar相关插件npm install --save "@fullcalendar/core"npm install --save "@fullcalendar/interaction"npm install --save "@fullcalendar/daygrid"npm install --save "@fullcalendar/vue"2、引用,静态数据进行拖拽(此时没有请求任何接口)<FullCalendar ref="fullCalendar" :o
2022-03-29 11:09:36
6823
5
原创 echarts折线图汇总要点
1、过滤掉部分横坐标不展示代码完整部分: xAxis: { type: 'category', boundaryGap: false, data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], axisLabel: { // 计算并展示部分横坐标
2022-03-22 16:02:50
1665
原创 js实现小写金额转大写
公共方法: /** 小写金额转大写金额 */ dealBigMoney(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) { return '数据非法' } let unit = '千百拾亿千百拾万千百拾元角分'; let str = '' n += '00' const p = n.indexOf('.') if (p >= 0) { n = n.substring(0,.
2022-03-18 15:15:29
1956
原创 利用element日期组件,封装季度组件, 实现日、周、月、季度切换,默认禁用部分日期选择(附带:获取昨日、昨日所在周、昨日所在月、昨日所在季度等方法)
1、 季度组件封装,创建一个 quarterDate.vue文件<!-- 季度组件 --><template> <div> <el-popover placement="bottom" width="270" trigger="click"> <div class="el-date-picker__header"> <button
2022-01-21 16:23:08
4990
5
原创 elementUI表格合计行放顶部,合计行渲染所有数据的和(不是计算当前分页的和)
效果图如下:咋们可以借用样式将合计行置顶// 表格合计行放顶部.summaryMethodTop.el-table { display: flex; flex-direction: column; .el-table__body-wrapper { order: 1; }}让后端将合计行的数据返回一个obj,字段跟表格数据字段保持一致,然后再合计方法getSummariesMethod中进行渲染 sums[index] = isNaN(this.sumObj[colum
2022-01-14 16:37:12
1969
3
原创 vue实现指定区域自由拖拽、打印功能
先看下效果图,实现指定区域内内容自由拖拽,不超出。动态设置字体颜色及字号;设置完成实现打印指定区域内容,样式不丢失。1、运行命令npm i vue-draggable-resizable -S, 安装拖拽插件vue-draggable-resizable,并引入使用(下面引入是放入main.js文件中)import VueDraggableResizable from 'vue-draggable-resizable'// optionally import default stylesimpo
2021-11-06 14:38:09
3997
2
原创 vant兼容问题之van-popup组件在ios上出现重叠问题
van-popup组件在ios上出现重叠问题利用更改挂载节点来解决此问题。<van-popup v-model="pickerRuler" position="bottom" :get-container="$parent.getContainer"> <div class="content"> </div> </van-popup>created(){ this.popDivContainer = document.crea
2021-07-31 14:43:44
2699
原创 elementUI表格编辑状态下,如何获取修改过的行
表格再编辑状态,需要获取到哪一行数据被修改了,面对这样一个场景,我们可以结合element的row-click事件以及动态的监听$watch来实现。tableList,代表表格的数据, rowIds代表需要记录的id数组的集合 /** 编辑状态下,监听行数据是否变化 */ rowClick(row, column, event) { // 编辑状态下对修改过得行数据的id进行保存 if (this.isUpdateTableList) { const ro
2021-05-21 17:45:30
1460
原创 elementUI table固定列底部滚动轴无法拖动问题
解决方法:<style scoped lang="scss"> /deep/.el-table--scrollable-x .el-table__body-wrapper { z-index : 1; } </style>
2021-01-13 17:10:18
558
原创 vue3中知识点总结(持续更新)
1、具名插槽Vue3 具名插槽 Named Slots 文档地址// 具名插槽添加<slot name="submit"></slot> // 具体地方使用submit插槽时// v-slot:submit 可以缩写为#submit<template v-slot:submit> <span class="btn btn-danger">Submit</span></template>// 或者<templ
2021-01-11 15:16:35
1799
原创 Vue3初探之基于rollup打包发版至npm
第一步:在lib文件下创建index.ts文件;导出所有的组件为组件名export { default as Switch } from './Switch.vue'export { default as Button } from './Button.vue'第二步:创建rollup.config.js在根目录下import esbuild from 'rollup-plugin-esbuild' // plugin-esbuild将ts变为jsimport vue from 'rollu
2020-12-13 14:30:05
2204
4
原创 Vue3初探之运行报错( Cannot find module ‘vue-loader-v16/package.json‘)解决方法
查看 vue -V 版本保证在4.5.0及以上正常创建项目 vue create projectName项目创建成功之后,运行npm run serve 项目报错:解决方法:(如果你没安装yarn, 可以全局安装一下,这里亲测用npm安装vue-loader也会有问题)需要安装vue-loader,执行命令yarn add vue-loader...
2020-12-11 14:36:37
593
1
原创 Vue3尝鲜之Suspense异步组件(踩坑)
Suspense组件是Vue3中的知名功能之一。它们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验。值得庆幸的是,Suspense组件非常容易理解,它们甚至不需要任何额外的导入!可以解决异步请求的困境; Suspense是Vue3推出的一个内置的特殊组件; 如果使用Suspense,需要返回一个Promise创建第一个组件:AsyncShow<!--* @Description: Suspense - 异步请求好帮手* @Author: Rulyc
2020-12-09 17:47:25
5236
12
原创 APP中嵌入h5,如何通过window.WebViewJavascriptBridge进行交互
本文主要是涉及这样一个需求,公司的移动端项目比较多,但是不想安装过多的APP,于是所有项目以H5的形式开发,最后嵌入进APP的壳子中,继而只需要安装一个app; 那么这里边存在一个问题,h5与原生app如何进行交互呢?原生app跳转进相应的H5界面,需要携带一些用户信息,本文主要是通过window.WebViewJavascriptBridge悄悄的进行数据交互。本文主要站在h5的角度进行讲解:第一步: 创建一个bridge.js文件,编写如下公共代码:/* eslint-disable *///
2020-12-01 15:57:41
1664
1
原创 vuex的基本用法(提炼公共文件import all vuex modules)
1、第一步是你的package.json中需要有 “vuex”: “3.5.1”; 如果没有安装vuex,就先安装一下2、 在src下创建一个文件store,store下创建一个文件modules, index.js; 下面继续创建文件最终的目录文件如下:从最里面开始:store/modules/vuex/modules 文件用于存放项目中所有的需要利用vuex存储的数据文件;这里里global.js为例store/modules/vuex/modules/global.js 中: exp
2020-11-13 09:08:20
382
原创 elementUI表格气泡乱串、闪烁、位置偏移问题解决(自制气泡,计算位置,箭头永远指向当前元素)
elementUI表格中插入气泡,会出现bug"来回切换tab页气泡会乱串",导致这个问题的原因是,elementUI底层是通过js绘制的气泡,挂在到body中,通过display:none来控制显隐;当我们来回切换tab页的时候,时而出现display:block;的情况,这时候上一个界面的气泡就再新界面出现,导致气泡乱串了。为了解决这个问题,尝试过好几种方式,目的就是让气泡隐藏成功或者销毁成功,但是发现这种思路只会让气泡乱串出现的频率降低,并不能从根本上解决问题,而且还会带来新的界面bug。下面先介绍
2020-09-10 11:17:29
1045
原创 纯css绘制气泡,支持适应最大宽度,最大高度
https://blog.csdn.net/CuiCui_web/article/details/107225702之前这边文章中的方式是利用js来进行控制的,然后有一个局限,不支持适应最大宽度;另外如果强行设置宽度比较大,会被左侧菜单遮挡,即使给z-index:9999,也没用。看下图展示,2种方式解决之前的不足。(后续可能会更新elementUI表格种气泡乱串问题解决方案)公共部分数据定义:data(){ return{ business: { id
2020-09-07 22:56:31
342
原创 推荐几款适用于uniapp开发【全端支持】的UI框架,方便开发
1、uview https://www.uviewui.com/尤其针对底部tabbar动态显示,给出了优化方案,采用还是原生得tabbar基础组件:表单组件:数据组件:反馈组件:布局组件:导航组件:其他组件:2、Thor UI组件库 https://thorui.cn/doc/组件列表:3、 GraceUI http://grace.hcoder.net/manual/info/167-110.html组件列表:...
2020-08-31 10:47:12
22571
5
原创 uniapp之复选框支持全选,多选,反选
具体效果图如下:官方给出的https://uniapp.dcloud.io/component/checkbox是不能直接实现全选,反选,功能的。需要在逻辑中进行转化。下面我们一起来看看实现的过程:首先声明一下,顶部的搜索框及新增按钮是封装在一个公共组件里边,如果需要复制代码,可以忽略此部分。数据定义部分:data() { return { all:'aa', isAllSelected: true, // 是否全部被选中 checkedList :[], // 默认选中的值
2020-08-27 08:58:47
12435
11
原创 uniapp使用指纹识别功能,异常温馨提示(2种方式,官方api验证或用plus.fingerprint进行验证)
要使用指纹识别功能需要具备条件:1、确认当前设备环境是否支持指纹识别,2、当前设备是否设置密码锁屏,3、当前设备是否已经录入指纹。使用官方api,省略第二步。方式一: 官方api方法App端自2.3.8版本起开始支持生物认证,更低版本或想使用指纹功能,可以采用方式二,或者去插件市场官方api链接: https://uniapp.dcloud.io/api/system/authentication实现方式:第一步:uni.checkIsSupportSoterAuthentication:
2020-08-26 12:22:38
4021
13
原创 利用vuex关闭当前tab页签
如图: 点击删除按钮,关闭当前tab页签在vuex的js文件中写如下方法:(如果没有vuex的js文件,可以自己写一个,参考另外一篇文章,讲解vuex的)/** * @class closeNow * @description 关闭当前界面页签(如在工作项详情界面,点击删除按钮,关闭当前这个页签) * @param {Object} state vuex state * @param {Object} param { tagName: 要关闭的标签名字, vm:.
2020-08-21 14:48:39
3516
原创 长界面tab切换到其他界面,保留原来得位置(即来回切换界面,滚动条位置不变)
从详情页跳转显示其它页面,再跳转回来时,最好能保留原来的位置原理就是通过document.getElementById("businessDetails").scrollTop = 位置值, 来设置滚动条的位置的本文是有一个功能,界面进行缓存,基于keep-alive缓存界面基础上实现的1 、有其他界面跳转进入的详情界面第一步:在点击跳转界面,跳转代码哪里统一加一个路由携带参数params: {clickEvent:'tableList' }this.$router.push({ name:
2020-08-21 14:25:40
3269
原创 wacth监听是值改变才会执行,那么组件传值,值没变,这时候需要进行操作,怎么办呢?
看似这个问题是无解的,组件传值,值没变,然后启用了keep-alive,生命周期函数,只有初次有效。这时候该怎么去解决这个问题呢?思路: 我们让传值的这个字段发生变化,并且只要操作了,就让他与众不同。怎么与众不同呢,拼接随机数? 随机数也是可以相同的; 我们可以拼接时间。在传值前进行拼接,这时候永远都会执行watch监听,然后在watch监听中进行截取。父组件中:(引入子组件,并传值)子组件watch监听中:这里注意,如果界面进行缓存了,在tab切换,生命周期失效的时候,在父组件的钩子函数中
2020-08-20 11:56:12
770
原创 elementUI表格中气泡位置偏移
1、气泡位置偏移这个问题出现,是由于,需求要求打破了常规模式,要求“elementUI表格内容根据高度来判断是否显示气泡”,这时候我们会发现,气泡在底层代码中是以实际高度的位置来判断气泡显示的位置,而不是以我们在样式中设置的height这个判断。“elementUI表格内容根据高度来判断是否显示气泡” 这个需求的实现见文章 https://blog.csdn.net/CuiCui_web/article/details/106531997由上图就可以看到,这个问题的根本原因就是上面说的,底层中是以实
2020-08-13 17:03:59
2514
原创 堆叠条形图鼠标移入tooltip中提示过滤为0元素,实现自定义气泡
具体实现效果图如下:这样看上去更清爽一些。实现代码如下:tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter: function (params) { var res = `${params[0].name} <br/>`
2020-08-13 08:55:29
398
原创 js基础及常考面试题之 [] == ![]结果为true, []==[]结果为false 详解
[] == ![]第一步: !优先级高于==,故而先计算 ![]; 所有的对象都是true,所以 []为true; 所以!true就为false即: [] == false第二步:如果有一个操作数为布尔类型,则将布尔类型转化为数值类型即: [] == 0第三步: 将另一个操作类型转化为数值类型,[]转化为数值类型为0即 0 == 0故: 结果为 true[] == []左右两边类型相同,都是数组类型;但,数组或者对象在比较的时候,是比较他们的引用地址如: var a = []; va
2020-08-03 19:42:11
977
原创 react之组件通信(父与子,子与父)
父给子传递通过props传递数据或者方法, 子组件用this.props.xxx进行接收eg://父组件<div> <child content={item}/></div>//子组件 child<div> {this.props.content}</div>子给父传递子组件绑定事件, 然后通过this.props.xxx() 调用父组件中的方法, 去修改父组件中的数据//子组件<div onclick={th
2020-07-10 09:03:03
267
原创 通过css绘制气泡解决文字溢出,鼠标移入出现气泡,移出隐藏气泡(支持多行文本,单行文本)
首先看一下效果图:这个场景是非常常见的,而大多数的方法,就是通过字数来控制,v-if= word.length>20 就显示elementUI中的气泡;这种做法,我们会发现它有弊端,部分分辨率下,一行文本展示的字数是不同的,这就会导致大屏幕下,字数没有超出就显示了气跑了; 小屏幕下,字数超出了,却没有气泡。下面介绍一种方法,目前发现的最佳方案。通过css解决这个问题,这种场景下我们可以不用elementUI中的气泡,我们可以自己用css实现,然后样式上与项目中其他使用过elementUI气泡的
2020-07-09 12:34:59
2904
原创 pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)
1、 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )2 修改viewer.js代码this.textLayer.textContentItemsStr 为pdf中的具体内容,是一个数组如果需要对数据操作,可以在这个定时器中进行更改代码3、 模拟一个上传界面在test.html中编写了一个原生的上传事件每上传一个pdf,都会打印出数组也可以直接在地址栏输入文件名字,http://localhost:63342/pd
2020-07-07 17:06:42
14142
4
原创 node(express)实现增删改查、分页等接口
https://blog.csdn.net/CuiCui_web/article/details/107042226这篇文章中介绍过如何连接数据库了,这里就不做过多的介绍。1、 首先我们安装两个包,一个是解决跨域问题,还有一个是node中post请求参数会拿不到,需要借助插件npm i cors --save 解决跨域问题npm i body-parser --save post请求参数2、 在app.js中引入const bodyParser=require('body-parser');c
2020-07-03 17:25:55
4165
原创 react初体验之表格增删改查,新增与编辑为公共的弹窗组件(父子组件传值,修改数据)
本实文主要是用react+elementUI实现一个后台管理系统中最常见的功能,表格(增删改查、分页); 新增和修改弹窗是一个公共的子组件。接口是用node(express)实现,可以看下一篇文章(node+mysql分栏中)。1、 父组件中先引入要使用的组件及方法import React, { Component } from "react";import axios from 'axios'; // 引入axiosimport { Table,Button, MessageBox, Messa
2020-07-03 17:03:58
5144
原创 mysql基础篇之mysql在已有表中添加自动增加的主键(或任意一个字段)
1、语法:alter table student_info add id int(11) PRIMARY KEY AUTO_INCREMENT;如果你是想添加任意字段,alter 表名 student_info add 字段名 字段类型添加之前:添加之后:
2020-07-02 11:01:00
931
原创 后台接口基础篇 之 node连接数据库编写接口,通过aixos请求进行访问接口(前后端分离)
本文主要初步介绍如何用node连接数据库,编写接口;后续持续更新利用node搭建后台!1、在node(express) 项目中安装mysql npm install mysql2、编写接口,连接数据库,创建一个js文件var express = require('express');var router = express.Router();const mysql = require('mysql'); // 引入数据库var connection = mysql.createPoo
2020-06-30 14:53:40
583
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人