- 博客(61)
- 收藏
- 关注
RSS订阅原创 antDv table组件滚动截图方法的实现
获取页面上截图区域的dom节点，这里需要注意的是这里不能直接创建dom元素必须要在template上写上dom节点，然后再获取。这里做一个优化，考虑到性能的问题，我们把清理子节点这步动作放在截图完成之后就把它清理完，优化后的代码是这样的。那我们截图获取dom的时候当然不能获取他们俩共同的父级div，这样截图的图滚动隐藏的那部分就消失不见了。注意不能这样子的哦 ，要使用cloneNode进行节点克隆，不可以直接在太岁头上动土的哦！如果用场景一的方法，对于场景二产生的效果是这样的。完美呈现，给自己个赞呀！
2023-08-04 20:40:49
849
原创 关于antDv table组件pagination分页器跳转页数置空（输入框）置空问题
翻了组件文档发现没有这个组件配置，所以只能用原生操作dom更改值。修改这红框内input的值。
2023-08-03 19:14:04
496
原创 js实现（二级）树形数组拷贝及其关键key值的转换
在很多项目场景中都会使用到下拉级联组件，组件的数据格式有时候跟后端返回的数据格式也有些差异，这就需要我们手动的去转换为组件对应的格式
2022-09-25 13:14:03
610
原创 css实现大屏模块动画切换效果
偶然间在网上看到一个小demo，效果看起来挺好的，就写篇文章记录一下，方便后续项目开发效果如下详细代码如下<template> <div class="container"> <div class="item-box"> <div class="item" @click="clickChart('1')" style="transform: translate(-22.4%, -33.5%) scale(0.33)">1<
2022-05-25 17:22:45
1276
原创 cesium绘制地图国/省/市/区边界线
在项目开发中又这样一种需求：需要在地图上绘制边界。第一次使用cesium绘制线条的方法出现以下的情况，线条交错很明显不是我们想要的代码如下const regionData = [];regionJson.features.forEach(item => { item.geometry.coordinates.forEach(itm => { itm.forEach(ii => { regionData.push(...ii);
2022-04-27 11:36:59
5749
4
原创 js实现多维数组(数组矩阵)去重
在项目开发过程中需要对多维数组（数组矩阵）进行去重处理，现用以下两种方法实现定义一组数据let listArr = [[1,2],[3,4],[1,2]]第一种 冒泡排序实现handleUnique(arr) { for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { if (arr[i][0] === arr[j][0] && a
2022-04-26 19:11:40
1105
原创 echarts dataZoom 文本显示不完整
此篇文章记录datazoom文本显示不完整的解决办法显示不完整是这样的预期结果是这样的这里放出关键代码dataZoom: [ { type: "inside", xAxisIndex: [0, 1], start: 0, end: 100, }, { show: true, xAxisInd
2022-02-23 16:00:05
2111
3
原创 js遍历两数组找出不同的元素、相同元素以及数组去重的实现方法
// 取两数组中不同元素 /** * @description 原理:array为合并后的数组 indexof为从前往后查找，索引从0开始，lastIndexOf为从后往前查找，索引仍然从开始算起（仍然为0）这是关键 */ function handleDoubleArrayDifferenceParams(arr1,arr2){ return arr1.concat(arr2).filter((result,idx,array) => { return array.index.
2021-10-21 19:40:45
1184
原创 uniapp多列数据分级加载省市区（级联选择器）
在项目过程中遇到这样种需求：后台给出一个树形查询省区市的接口，一开始请求省数据，然后再选择省去动态联网加载市区数据。由于后台的数据和uview组件库中或uniapp picker组件的省市区的数据对不上，要自己重新设计，经过一番尝试，我是这样解决的。<template> <view class="sel-box" style="width: 100%;"> <picker mode="multiSelector" :range="multiSelector" :rang
2021-09-30 15:45:23
4545
1
原创 uniapp nvue页面数组过滤（遍历）/重新赋值时，数据循环渲染（v-for）出现数据闪烁的问题
问题描述uniapp开发移动端时，在nvue页面中，需要对当前数组进行过滤(搜索),然后对该数组重新赋值的时候，页面重新渲染会把原来存在的数据一个一个的移除掉，比如说一个list数组原来有30条数据，然后我把list这个数组筛选10条数据，就会出现页面在那一直闪烁着移除数据的情况，看着就很不爽。废话就不多说了，经过几番挣扎，我是这样解决的。解决方案首先在data中声明一个变量 status 控制渲染数据盒子的显示隐藏，初始化 status = true；然后在数据渲染的地方使用 v-if = "sta
2021-09-24 20:29:00
2364
原创 css实现盒子内的元素左对齐、居中对齐和右对齐效果
下面以一个简单的表单为例 效果图如下 分别为左、中和右css实现方式：外层盒子使用 flex 布局里面每一项左对齐 margin-right:auto; 居中对齐 margin-left:auto;margin-right:auto; 右对齐 margin-left:auto下面放一段实例代码 仅供参考.formItem { display: flex; flex-direction: column; margin-right: 30rpx; .item { display:
2021-03-25 17:14:03
13921
1
原创 uniapp制作特定的带下拉列表的input输入框
根据项目需求制作特定的input输入框下面是效果图以下只放些关键代码template<view class="item"> <text class="symbol">*</text> <text>系统角色:</text> <view class="input"> <view class="inputStyle" v-if="userFormList.inputRoleList&&userFormL
2021-03-25 17:03:15
4203
2
原创 vue uniapp实现分段器效果
此举只是记录下用vue动态改变样式效果先展示下效果template部分<view class="countTime"> <text class="title">折扣和就餐时间</text> <view class="wrap"> <view class="box" v-for="(item,index) in discountList" :key="index" @click="toggleItem(index)"> <
2021-03-15 17:14:45
1997
原创 uniapp css实现轮播图片逐渐放大效果
下面是最终效果template部分这里是从后台拿到的图片数据<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500"> <swiper-item v-for="(item,index) in swiperList" :key="item.restaurant_id"> &
2021-03-12 10:42:31
1215
原创 uniapp结合uView组件库做项目中遇到的系列问题（一）
一、使用u-image组件显示图片时 H5正常显示 小程序显示不了//小程序不能显示 H5可以显示<u-image width="100%" mode="widthFix" :border-radius="10" :fade="true" :src="img.imgSrc | imageUrl"></u-image>//H5 小程序可以显示<image :src="img.imgSrc | imageUrl" mode="widthFix" class="image"
2021-01-23 18:09:06
12217
3
原创 uniapp日期时间选择器的实现
由于项目需求需要，尝试过使用Vant组件库 但是一直出现问题 插件市场的插件又不太符合需求，使用就查了相关资料，最终捣鼓的效果如下：首先现在根目录下创建util文件夹放dateTimePicker.jsdateTimePicker.jsfunction withData(param){ return param < 10 ? '0' + param : '' + param;}function getLoopArray(start,end){ var start = start |
2020-11-04 16:21:13
19745
14
原创 uniapp上传图片的样式功能的实现
效果如下HTML<view class="img-container"> <label for="img">现场图片:</label> <view class="note-image-box"> <view class="note-image-item" v-for="(item,index) in imageLists" :key="index"> //右上角删除图标 <view clas
2020-11-04 10:15:21
1537
1
原创 文本溢出隐藏两端对齐
// 文本溢出隐藏overflow: hidden;// 显示省略符号来代表被修剪的文本。text-overflow: ellipsis;display: -webkit-box;// 显示两行-webkit-line-clamp: 2;-webkit-box-orient: vertical;//文本两端对齐text-align: justify;
2020-10-27 17:21:00
151
原创 vue项目中使用Echarts 和Echarts中水球liquidFill插件
如果大家需要使用水球liquidFill插件的话，请参考这篇文章 https://blog.csdn.net/weixin_43953710/article/details/101761760这里需要注意的是，如果项目中的水波颜色需要是渐变的话，类似设置为这样color: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
2020-09-11 14:50:24
1352
原创 关于Echarts 3D柱状图改为柱子大小（粗细）的问题
这个问题之前我也百思不得其解，今天下午偶然发现，在series配置项下加上barSize属性即可，这个属性官方的配置文档没有写！！！
2020-09-04 16:03:49
1396
原创 Echarts实现正弦曲线和散点图
在做项目中需要在同一幅图中展示正弦曲线和散点图，而且正弦曲线的周期必须为一个周期且需跟着散点的数据进行联动，在网上找了好多资料，无果，只好自己硬着头皮干，下面是这部分的代码已封装成一个Vue组件<template> <div :id="id" :class="className" :style="{height:height,width:width}" /></template><script> import echarts from 'ec
2020-09-01 18:38:37
1620
2
原创 element-ui级联选择器动态加载数据
最近在做的项目中有级联选择器动态加载数据的需求，而看了相关的官方文档实例代码，讲的还是比较模糊，所以找了相关资料，最终的实现代码如下首先要准备两个后台接口（因为我的是二级联动，所以只需要两个接口，以此类推），如果没有后台接口的话可以使用mock模拟假数据<template><el-cascader v-model="el_value" :props="props" @change="handleChange" placeholder="请选择" :clearabl
2020-08-10 17:30:57
4744
2
原创 如何将一组字符串倒序（去重）输出
首先，先做一组字符串倒序输出的效果var str = 'aaabbbbcccddddeeeeffff'var newStr = Array.from(str).reverse().join('')console.log(newStr) // ffffeeeeddddcccbbbbaaa当一组字符串需去重并倒序输出时 则①先把字符串转化为数组，然后再反转数组转化为字符串 var str = 'aaabbbbcccddddeeeeffff' var newStr = Array.from(s
2020-08-10 12:54:00
781
原创 js将多个字符串合并成一个数组
闲话不说了哈，直接上代码 var allArr = [] allArr.push('2020-07-31 21:00') allArr.push("2020-08-07 21:00") allArr.push("2020-08-17 21:00") allArr.join(',') console.log(allArr)然后控制台显示是这样的
2020-08-07 21:34:56
7120
原创 vue过滤器实现时间数组转换
最近在vue项目开发中遇到一个时间转换的需求，使用vue过滤器filter和map方法进行实现代码如下 （下面是项目中这个需求的特定代码）<template><div><input type="text" :value="['Fri Jul 31 2020 20:45:51 GMT+0800 (中国标准时间)','Fri Aug 07 2020 20:45:51 GMT+0800 (中国标准时间)']|dateFilter" style='width:600px;hei
2020-08-07 21:15:53
394
原创 Echarts实现数据可视化
最近在学echarts可视化，然后就做了这个数据可视化分析界面，使用fast-mock平台模拟数据，通过axios访问接口数据 Github地址具体实现效果如下
2020-08-07 10:11:41
738
原创 关于在fastmock或者easymock平台上模拟响应式数据（根据入参数据动态返回）
在平时的前后端分离项目开发中，前端有可能会遇到携带参数请求数据的这种需求，根据官方文档现在做一下具体操作。首先需在fastmock或者easymock平台上创建接口，然后输入一下代码{//_req:用来接收传入的参数"content": function({_req, Mock}) { const array = [{ id: 1, name: 'zs', age: 20, sex: 'male' }, {
2020-08-06 14:28:57
1198
原创 vue项目中filter过滤器中如何获取data中的数据
首先生命一个全局变量thatvar that然后在生命周期钩子函数中改变this的指向create: function () { that = this;}最后直接在过滤器中使用that调用data中的数据即可
2020-08-05 22:04:17
5344
原创 前端开发中类型转换的一些操作
String类型转Number类型var a = '5'console.log(typeof a) //Stringconsole.log(typeof Number(a)) //Numberconsole.log(typeof +a) //NumberNumber转Booleanvar a = 3console.log(typeof a) // numberconsole.log(typeof Boolean(a)) // booleanconsole.log(typeof !!a)
2020-07-30 21:04:58
149
原创 微信小程序发送订阅消息（云开发实现）
最近做项目时需要用到订阅消息这个功能，为了实现这一功能，可让我一顿好找啊。查看了众多博客和相关文章，还是没找到比较详细且适合小白的博客，所以在此我整理了一下我自己写的代码，这是对自己的一份总结，也希望可以帮助跟我一样还在路上的朋友。首先，需要在微信官方文档查看一下实现订阅消息的步骤订阅消息其次，因为发送订阅消息需要使用到云开发，所以在项目开始先需对项目进行云开发初始化。注意：云函数运行前需要部署，如果你不熟悉云环境的话，还是先创建一个吧，不要创建两个，如果有两个环境更不要两个环境之间切来切去，不然这将是
2020-07-06 18:23:39
3316
2
原创 vue实现评论列表
案例数据使用localStorage持久性存储 全局过滤器实现时间格式化代码部分<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte
2020-06-02 13:10:10
1332
原创 基于node的留言本 v2
本案例模块化开发使用了express框架，express-art-template模板引擎渲染，处理post请求的中间件body-parser，MongoDB数据库进行数据的CRUD入口文件var express = require('express')var router = require('./router-mongo')var bodyParser = require('body-parser')var app = express()app.use('/node_modules/
2020-06-02 11:54:51
174
原创 基于文件的数据存储--node实现留言本案例
案例中所用到的第三方模块均以npm方式下载入口文件back.jsvar express = require('express')var router = require('./router')var bodyParser = require('body-parser')var app = express()app.use('/node_modules/',express.static('./node_modules/'))app.use('/public',express.static
2020-06-01 21:46:42
219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人