无名之辈-_-

原创 常用css样式总结

纯css实现三角形

原创 2020、2021、2022年常用总结

一、常用的css样式总结(1)使用标签上传文件图片设置type='file’时，去除input自带的原有的样式 input[type="file"] { display: none; }(2)设置文字超出一行隐藏或者超出多行隐藏显示省略号white-space:nowrap; /* 强制文本一行显示 */text-overflow:ellipsis; /*添加省略号*/word-wrap:break-word;/*英文长单词换行，默认长单词是不换行的*//* 超出

原创 自定义弹框

【代码】自定义弹框。

原创 react跳转到下个页面保存当前页面状态

从A页面跳转到B页面，从B页面返回A页面保留A页面的填写的内容。

原创 NodeJS学习总结

使用时有几点注意： module.exports 可以暴露 任意数据 不能使用 exports = value 的形式暴露数据，模块内部module 与 exports 的隐式关系 exports = module.exports = {} ，require返回的是目标模块中 module.exports 的值。nodejs是ecmscript的核心语法，nodejs中不能使用BOM和DOM的API,他的顶层对象是global,可以用globalThis访问顶层对象；用于提取公共的函数，简化代码。

原创 css实现正反翻页效果组件

【代码】css实现正反翻页效果组件。

原创 移动端图片上传裁剪二次封装

移动端图片裁剪

原创 uview-ui表单使用总结

其余的其它属性看官网吧，切记rules一定要写正确，要不他提交的时候this.$refs.uForm.validate()点击没有反应，一直不能触发。如果是动态配置的表单，使用v-for循环，校验规则不确定是否必填可以在validator函数判断。官网地址：https://v1.uviewui.com。常用的手机号身份证之类的都可以直接用。uView自带验证规则。

原创 video视频背景层级过高解决方案

uni-app video

原创 websocket使用

webSocket

原创 树形数据的增、删、改、查、排序

树形数据进行上下排序，修改，新增

原创 vue3开源项目

vue3

原创 vue递归渲染树形结构数据

一个可以通过其“name”选项递归渲染自己的组件

原创 vue函数式组件

vue的函数式组件

原创 绘制路线轨迹，设置标记

echarts画路径图

原创 前端计算常用方法

2、decimal插件计算（用decimal可以解决精度缺失的问题）3、moment的diff函数计算时间段的时间间隔。1、Math.abs()得到结果的绝对值。

原创 vue实现锚点功能

锚点功能实现

原创 实现一个带有不一样样式的滑块

普通的滑块：如果要设置带有特别样式的滑块，如类似于这样的：你可以设置滑块的透明度为0，样式用图片代替，滑动到某一段距离，展示另一张图片。具体例子如下：在微信小程序中实现： <view class="slider"> <view class="img"> <image :src="sliderSrc" mode="" style="width: 100%;height: 100%;"></image> </view>

原创 vue中使用微信jssdk语音聊天功能

原创 js、jquery操作原生dom常用方法总结

1、给标签的某个属性赋值，获取某个属性的值$('#id').attr('属性','值');$('#id').attr('属性');documnet.getElementById('').getAttribute("");documnet.getElementById('').setAttribute('属性','值');//例如 <input id="range" type="range" min="0" value="0" class="slider" oninput="change(

原创 微信小程序实现分享海报

实现前的注意事项：1、使用的是微信小程序官方的canvas组件官方文档地址2、在canvas中不能绘制网络图片，需要使用wx.getImageInfo({}),文档地址注意最好在画布绘制之前对图片进行转化，我在绘制画布的过程中转化时获取到的地址一直是空的，感觉这个接口是异步的，设置了async、await也不起作用。 wx.getImageInfo({ src: '网络图片地址', success: (res) => {

原创 富文本显示相关问题总结

1、原理就是利用正则表达式选中img标签添加图片样式 let content = data.content.replace(/<img[^>]*>/gi, function(match, capture) { //这里注意要判断一下img标签中原本有没有style属性 if(match.search(/style=/gi) == -1){ match = match.replace(/\<img/gi,'<img style=""'); } r

原创 node版本管理器的安装

注意：在使用cmd进行操作时要选择以管理员身份运行1、安装nvm直接下载nvm安装 (推荐使用nvm-setup.zip)[地址]：官网地址下载安装包之后，点击直接安装，注意nvm安装的路径不能有空格和中文，比如安装在E:\Program Files、E:\Program Files\管理都不可以，不然会报上述错误，所以在选择安装路径的时候一定注意。2、安装完成后，常用命令：nvm // 会提示nvw下的相关命令nvm ls

原创 从当前页面返回上个页面，并在当前页面修改上个页面的数据

目前的需求是这样的，在A页面发布图片内容，在A页面有一个按钮选择定位，要跳转到B页面，选择之后并返回A页面展示，A页面之前填写的信息要保留。（1）在 原生微信小程序中实现方法：在B页面中返回A页面的方法中写入： let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.setData({ title:this.data.title, }) wx.navigateBack({

原创 小程序中引入vant总结

原生小程序中引入：1、安装npm i @vant/weapp -S --production2、修改project.config.json配置"setting":{ "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ] }3

原创 vue轮播图插件

百度了一下常用的有三种：1、vue-awesome-swiper使用：npm install vue-awesome-swiper@3 --save-dev（要注意这个时候安装就是一个坑，一定要指定版本号，要不然你接下来就是一堆错）;页面引入： <div> <swiper class="banner" :options="swiperOption" ref="mySwiper"> <swiper-slide v-f

原创 扫描普通二维码进入小程序

1、登录微信公众平台2、点击开发管理——>开发设置——>扫普通二维码链接打开小程序，点击添加配置：打开添加配置：3、配置完成后可以用草料把你的测试链接生成二维码，扫描二维码之后就会进入小程序。4、在你配置的小程序功能页面你可以在onload中获取到你配置的https路径onLoad: function(options) { if (options.hasOwnProperty('q') && options.q) { // 通过下面这步解码

原创 移动端pdf文件预览

在vue项目中使用pdf插件安装：npm i -D vue-pdf页面引入import pdf from 'vue-pdf' // 引入插件注册组件components: { pdf, },使用：当你的pdf文件只有一页的时候可以直接使用：//url是你pdf的文件路径<pdf :src="url"></pdf>当你的pdf有多页时：<pdf :src="url" ref="pdf" v-for="i in page" :key="i"

原创 echarts使用总结

1、圆环图，设置显示百分比效果图：代码如下：//el是绑定的数据名称，val是所占的数据，sum是总数，persent是数据占总数的百分比,color是设置环的颜色，是一个数组。在这里要注意的是了解echart的这些配置。（1）、title用于设置圆环中间的文字，当你中间文字的大小不同，颜色不同时，可以参考下列格式设置text。textStyle.rich可以分开设置样式。 makeUpEcharts(el, val, sum, persent, color) { var opt

原创 使用elementui表格全选功能总结

项目需求：表格中添加全选功能，然后还要单独点击的时候进行一个请求，后台判断是否可以选中。点击全选的时候不进行判断是否可以选中，并且有分页切换时要记住上一页选中的数据。解决方法：1.单独点击进行校验使用select事件： <el-table :data="tableData" style="width: 100%" @selection-change="selectionChange" ref="table" :border="border" @select="selectionRowChan

原创 小程序自定义标题

如果我们需要给标题加上按钮，图片，复杂的样式的时候，系统的标题就不能满足我们的要求了，这时我们需要自定义标题：1.在定义的页面路径的page.json中实现如下代码：{ "path": "pages/index/index", "style": { "navigationStyle": "custom" //自定义标题要使用custom }},2.自定义组件,在components文件夹下面，定义一个customTitle.vue页面，写入如下代码：要注意小程序的顶部是由：状态栏+标题栏

原创 h5页面的头部返回箭头或者手势返回到指定的页面

解决这个问题我们需要用到window.history的pushState方法，不了解这个可以去百度了解一下：（下面粘贴上我百度的对他的解释）window.history.pushState(data, title, targetURL);@状态对象：传给目标路由的信息,可为空@页面标题：目前所有浏览器都不支持,填空字符串即可@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data。1.我的h5页面时使用webview嵌套在小程序中的，我想在打开的多个h5

原创 webview内嵌h5和微信小程序的相互跳转

1.在微信小程序里面使用内嵌h5页面，需要主要要在微信公众平台：开发管理——开发设置——业务域名中配置你内嵌的页面用到的域名。2.微信小程序跳转到h5页面使用标签:主要如果页面跳转到这个webview标签页面，src后面的参数是带不过去的比如：’…/webview/webview?src=https://api.com/list?id=1&token=sdjiwboaxne’你会发现list后面的参数都带不过去，你需要进行编码一下：let src = "https://api.com/lis

原创 vue中使用百度地图获取地理位置

1.首先要在百度地图官网(http://lbsyun.baidu.com/)上面新建实例，获取百度地图的密钥：ak2.index.html页面引入百度地图的js <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>3.在你的项目webpack.base.conf.js文件里面加上下面这句：![在这里插入图片描述](https://img-b

原创 jq+html+css实现普通的轮播图

//首先要在head中引入jq，大家可自行下载到项目中<script src="./js/jquery.min.js"></script> //html代码 <div class="banner"> <div class="pic"> <ul> <li><a><img src="./images/banner-1@2x.png"

原创 对接腾讯云及时通讯总结

1.在腾讯云官网上创建应用，获取到相应的SDKAppID和相应的秘钥信息。2.可以下载官方的即时通讯例子参考官方demo进行开发。3.使用npm安装SDK文件:(1)像uni-app开发的小程序在项目之前没有用到npm管理依赖(项目根目录下无package.json文件)，现在项目根目录执行命令初始化npm工程:npm init -y(2)安装SDKweb项目使用命令：// IM Web SDKnpm install tim-js-sdk --save// 发送图片、文件等消息需要的 C

原创 el-tree固定大小时，超出部分设置滚动条

<el-tree ref="tree" :highlight-current="true" :props="treeProps" :data="treeData" :render-content="renderContent" :filter-node-method="filterNode" @current-change="treeSelect"></el-tree>//css样式代码.el-tree { min-width: 100%; display

原创 git常用命令总结

1、workspace(工作区) -------add------> Stage(暂存区) ----commit-----> repository(本地仓库) ------push----> remote(远程仓库)新建：在当前目录新建代码库：$ git init新建一个目录，将其初始化为git代码库$ git init project-name(项目名称)下载一个项目和他整个代码历史$ git clone url(项目地址)配置用户信息：显示当前的Git配置

原创 编辑和添加使用同一个elementui组件封装弹框遇到的问题

这类问题一般会在同一个弹框里面用v-if和v-else判断显示那个表单出现的问题：1.遇到打开页面新增弹框就出现了校验是否非必填项的情况?比如这种情况：我们可以在弹框关闭和打开弹框的时候设置一下重置表单或者清空验证。但是要注意在打开弹框的时候要使用nextTick，不然在dom没有加载渲染完，重置表单会报错openDialog(){ this.openDialog = true; // 打开弹框,要注意重置表单要写在打开弹框的后面，不然不起作用. this.$nextTick(()

原创 promise.all和promise.race

1.Promise.all可以将多个promise实例包装成一个新的promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。Promise.all在处理多个异步的时候非常有用，比如当一个页面需要多个ajax的数据加载完成之后才显示，之前都只显示loading状态等等。需要特别注意的是，Promise.all获取的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的。即function1接收的结果在前。