- 博客(96)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 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关注的人