半度℃温热-优快云博客

原创 ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server

客户端不支持服务器请求的身份验证协议；考虑升级 MySQL 客户端。

2024-11-16 23:10:50 890

原创 Element-ui Select选择器自定义搜索方法

element-ui Selec选择器自定义搜索方法

2024-11-15 14:43:45 1054

原创 __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined

未明确定义。您正在运行Vue的构建，它期望这些编译时功能标志通过捆绑器配置全局注入，以便在生产捆绑包中获得更好的优化。Vue.js应用程序正在使用ESM（ECMAScript模块）打包构建，并且它期望在打包配置中全局注入某些编译时特性标志，以便在生产环境中更好地进行优化。是一种JavaScript模块打包技术术语，指的是从最终打包中移除未使用的代码的过程。就是其中一个特性标志。当这个标志没有定义时，Vue会使用默认值，但定义它可以有助于优化。

2024-11-15 14:21:39 838

原创 ERROR TypeError: AutoImport is not a function

TypeError: AutoImport is not a function 原因：unplugin-vue-components 插件的版本问题。Vue3基于Webpack，在vue.config.js中配置。当unplugin-vue-components的版本小于0.26.0时，使用以下写法....

2024-11-15 10:14:40 865 1

原创 JS版本号比较大小

在项目开发和运行的过程中，总是少不了各类升级。例如某个功能组件需要更高的依赖库、数据项需要进行兼容等等问题。遇到此类问题开发者需要使用版本号来解决。版本号通常由三部分组成：主版本号、次版本号和修订版本号。当你做了向下兼容的功能性新增时，就需要升级次版本号；当你做了向下兼容的问题修正时，就需要升级修订版本号。通常来说升级会涉及到三个点：向下兼容、协商升级、拒绝服务。

2024-04-17 22:53:28 1025

原创 React中redux、react-redux、@reduxjs/toolkit状态管理库的使用方式

【代码】React中redux、react-redux、@reduxjs/toolkit状态管理库的多种使用方式。

2024-04-17 22:04:41 795

原创 JS实现大数相加

在JavaScript中，进行大数相加时，由于JavaScript的Number类型有一定的精度限制，直接相加可能会导致精度损失。

2024-04-10 21:39:27 764 1

原创 vue3中keep-alive的使用及结合transition使用

# 正确用法1. 在组件中使用（这里结合了 transition 内置动画组件）```javascript

2023-08-29 15:29:16 2675 2

原创 Vue导出当前页面为PDF文件

Vue导出当前页面为PDF文件。# 下载插件```javascriptnpm install html2canvas --savenpm install jspdf --save```# 创建导出函数文件htmlToPdf.js```javascript// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default {}

2023-01-06 15:30:39 681 1

原创 vue中实现导出、下载文件

Api// 导出/下载import request from './request';export default { exportData(params) { return request.post('/export', params, { responseType: 'blob' }); },}注意：responseType: ‘blob’下载/导出函数export function downLoad(res, filename) { // res

2022-04-13 18:42:32 6744 4

原创 element-ui的Upload上传图片、文件封装

上传文件<template> <el-upload action="#" list-type="picture-card" :file-list="fileList" accept=".jpg,.jpeg,.bmp,.png,.pdf,.doc,.docx,.xls,.xlsx" : before-upload="beforeUpload" :http-request="uploadFile"> </el-upload></temp

2022-04-13 18:17:07 1086

原创 ECharts之横向柱状图一

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-18 08:54:36 6119

原创 ECharts之横向柱状图二

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-17 09:05:35 3859 2

原创 ECharts之3D立体柱状图一

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-16 08:54:40 2955

原创 ECharts之3D立体柱状图二

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-15 17:10:22 1942

原创常用的正则表达式

# 特殊校验- **手机号码：**`/^(\+86)?1[3-9][0-9]{9}$/ （支持+86）`- **固话（电话）：**`/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/`- **Email（邮箱）：**`/^(\w-*\.*){6,}@(\w-?)+(\.\w{2,})+$/`- **身份证（18位）：**`/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-

2021-08-23 17:49:07 2858 1

原创 JS中slice和splice的区别

# slice()**1、String中**- 语法 `string.slice(start, end)` 抽取一个子字符串- 描述 `slice()`将返回一个含有字符串`string`的片段的字符串或返回它的一个子串。但是该方法不修改`string`- 参数 `start：`要抽取的片段的起始下标。如果是负数，那么该参数声明了从字符串的尾部开始算

2021-08-16 15:08:12 1176 1

原创 es6中Set、Map、WeakSet和WeakMap的区别

Set Set 类似于数组，本身是一个构造函数，用来生成 Set 数据结构，成员值是唯一且无序的，常用于数组去重 Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化 Set 数据结构允许存储任何数据，无论是基本数据类型值或者是对象引用 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（=

2021-08-13 15:33:07 1002

原创 vue中使用mockjs模拟接口

效果图安装npm install mockjs --save // 三选一就可以了cnpm install mockjs --saveyarn add mockjs新建mock目录 mock目录下新建index.js和json文件 mock下的index文件，注意每改接口后都要重启才能生效// 引入外部资源const fs = require('fs')const path = require('path')const Mock = require('mockjs')

2021-07-22 19:54:28 1835 8

原创 vue中添加水印效果

效果图创建warterMark.js文件在src 目录下创建utils文件，在utils里新建warterMark.js文件let watermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let ca

2021-07-21 16:22:08 1225 2

原创 vue格式化时间

效果图简单实用，不需要下载插件，在项目中也可以这样用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>格式化时间</title> <style>

2021-07-17 13:50:20 1220

原创 element-ui表格多级表头、表头换行

效果图安装Element-uinpm i element-ui -S引入 Element-ui 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import 'element-ui/lib/theme-chalk/index.css'import

2021-06-01 17:36:21 2118 2

原创微信小程序实现新闻轮播、禁止手动竖向滑动

效果图片WXML 在 swiper-item 上加入 catchtouchmove 方法，截获竖向滑动<view class="container"> <view class="news"> <image class="icon-news" src="/images/news.png"></image> <swiper class="swiper" autoplay circu

2020-12-29 16:04:06 1779 2

原创微信小程序base64转为二维码、条形码图片

亲测可以显示Page({ data: { qrCodeUrl: null }, onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发 }, onShow: function () { this.getQrCode() }, // 获取二维码 getQrCode() { wx.request({ url: '', data: {}, header: { 'c

2020-12-15 15:48:13 2247 1

原创 element-ui自定义非必填字段的格式校验

场景 element 表单里非必填的字段需要校验格式时使用注意 rules 里面非必填字段不要加上 required 属性<template> <div class="container"> <el-form ref="elForm" :inline="true" :model="form" :rules="rules" size="small"> <el-form-item label="姓名" prop="name"&

2020-12-14 10:56:40 3049 2

原创 vue中两种history和hash模式的使用

vue2.0中的history和hash模式 1. history模式import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ mode: 'history', routes: [ { path: '/', name: '', component: '' } ]}) 2. hash模式import Vue f

2020-11-26 19:37:36 5677

原创微信小程序中使用Echarts统计图

效果图下载github：https://github.com/ecomfe/echarts-for-weixin解压之后把 ec-canvas 文件拷贝到小程序项目中WXML<view class="container"> <view class="echarts"> <ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas> </view&gt

2020-11-05 10:43:57 6136 17

原创 vue3.0常用eslint配置详解 .eslintrc.js

规则值" off " 或者 0，关闭" warn " 或者 1，警告" error " 或者 2，报错.eslintrc.js配置module.exports = { root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找 env: { // 预定义的全局变量，这里是浏览器环境 amd: true, es6: true, commonjs: true, node: true, jquery: true, br

2020-10-28 16:02:56 7672 2

原创 vue3.0常用配置详解 vue.config.js

在项目文件下的根目录创建 vue.config.jsmodule.exports = { baseUrl: '', // 从 Vue CLI 3.3 起已弃用，请使用 publicPath publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', // 输出文件目录 outputDir: 'dist', // 静态资源目录 (js, css, img, fonts) assetsDir: 'assets', /

2020-10-28 15:24:02 2357

原创微信小程序table表格自定义组件实现

效果属性属性类型默认值必填说明tabDataArray[ ]否数据源columnsArray[ ]是数据列settingObject{ }否自定义样式配置项columns属性类型默认值必填说明labelString是表格标题propArray是表格中需要展示的数据列onclickBooleanfalse否为某一列设置点击事件，若同时为多列设置了点击事件，则只有第一个生效

2020-10-22 17:16:22 12498 40

原创微信小程序map自定义组件实现

效果实际手机效果不会点击时突然闪一下，气泡弹窗也不会被其他坐标点挡住图片鼠标放在图片上可以看到使用的图片名称子组件WXML<map id="map" setting="{{setting}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 100%;">&lt

2020-10-16 11:24:59 4124 2

原创微信小程序实现tabs标签栏自定义组件

效果子组件WXML<view class="tabs"> <view class="tab-item" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" data-value="{{item}}" bindtap="changeTab"> <text class="tab-text {{currentIndex == index ? 'active'

2020-10-12 21:09:38 3375 4

原创微信小程序中observer的详解

概述 observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段效果

2020-09-29 20:55:21 13784 2

原创微信小程序实现星级评价和效果展示

效果图片WXML<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"

2020-09-26 16:10:28 3031 1

原创 JS中浅拷贝和深拷贝的几种实现方式

概念深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。它们最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。简单来说，假设B复制了A，当修改B时，看A是否会发生变化，如果A变了，说明是浅拷贝；如果A没变，那就是深拷贝浅拷贝1. 用 = 号赋值引用地址let obj = { name: '李四', age: 20, sex: '男', tel: /^1[345789]\d{9}$/, address: undefined

2020-09-22 21:07:29 5148 21

原创 ajax的深入理解及封装

概念 AJAX： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） AJAX 不是新的编程语言，而是一种使用现有标准的新方法，一种用于创建快速动态网页的技术 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个

2020-09-22 14:57:04 1400

原创微信小程序实现列表项左滑删除效果

效果图图片WXML<view class="container">  <view class="address"> <view class="left"> <view class="icon"> <image src="../../images/address.png"></image> </view>

2020-09-12 11:29:06 2055

原创微信小程序实现上传图片功能

效果图WXML<view class="img-wrap"> <view class="txt">上传截图</view> <view class="imglist"> <view class="item" wx:for="{{imgs}}" wx:key="item"> <image src="{{item}}" alt=""></image> <view class='d

2020-09-10 11:51:12 15191 40

原创微信小程序禁止转发和长按转发

禁止当前页面转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发}禁止当前页面长按转发分享到个人时可以长按转发，分享到群聊里不能长按转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.showShareMenu({ withShareTicket: true })},/** *

2020-09-05 18:29:30 10472 6

原创微信小程序动态设置页面标题

JOSN文件里设置页面标题{ "navigationBarTitleText": "首页"}JS文件里动态设置页面标题这里设置的标题会覆盖 JOSN 文件里的标题，最好去除 JOSN 文件里的标题/** * 生命周期函数--监听页面加载*/onLoad: function (options) { wx.setNavigationBarTitle({ title: '电影' })},...

2020-09-05 17:09:37 1897

空空如也

空空如也