qq_40994735的博客

【代码】uni-app 图片临时存本地。

Element ui 表格动态合并。

导出PDF

各种正则验证案例

组件目录1.表格组件数据转换js文件使用步骤1 导入对应的组件和js文件2 修改对应avue 表格的js column 第一个插入对应数据3 调用方法1.表格组件<template> <el-table :data="tableData" border style="width: 100%" :show-header="false" :span-method="arraySpanMethod"> <el-table-column prop="titleOne"

/** * 邮箱 * @param {*} s */export function isEmail (s) { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}/** * 手机号码 * @param {*} s */export function isMobile (s) { return /^1[0-9]{10}$/.test(s)}/** * 电话号码

/**axios封装 * 请求拦截、相应拦截、错误统一处理 */import axios from 'axios';import QS from 'qs';// 请求超时时间axios.defaults.timeout = 60000;// post请求头axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';// 请求拦截器axios.interce

export const filterForm = (form) => { let obj = {}; Object.keys(form).forEach(ele => { if (!validatenull(form[ele])) { obj[ele] = form[ele] } }); return obj;}

导入相关插件import { DragControls } from "three/examples/jsm/controls/DragControls"; //拖拽控件 import { TransformControls } from "three/examples/jsm/controls/TransformControls"; //可视化平移控件代码objects 为存储移动的mesh模型。<template> <div id="myThree" ref=

threejs版本选择"dependencies": { "@types/three": "^0.126.1", "three": "^0.126.1", },代码<template> <div id="myThree" ref="myThreeRef" @dblclick="onMouseDblclick"> </div></template><script> import * as THREE f

问题存在的原因的新版本的threejs将对应的Geometry删除，所有会找不到对应的模型。解决方案，将版本降低到Geometry还存在的情况，但是可能会出现geometry.faces的报错，目前暂时不知道解决方案使用新的库进行修改，换使用jthreebspjthreebsp使用这个必须修改threejs的版本为npm install three@0.126.1...

1 将chunk-vonder.js 拆解处理1.1 修改vue.config.jsconfigureWebpack: config => { // chunk-vonder.js 分割 let optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity,

截图组件<template> <div style="text-align: center;"> <div style="display: flex;justify-content: space-between;"> <div style="width: 300px;height: 300px;"> <div>图片预览</div> <img :src="viewImag

下载element-ui的ui 组件库创建index.js 文件import { Carousel,CarouselItem,} from 'element-ui'const element = { install: function (Vue) { Vue.use(Carousel) Vue.use(CarouselItem) }}export default element在mian.js导入文件import 'element-ui/l

下载对应插件"postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9",创建rem.js文件，导入main.js// rem等比适配配置文件// 基准大小const baseSize = 16;// 设置 rem 函数function setRem() { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 console.log(document.documentElement.clientWidth); let

Vue组件之间传值的11种方式总结

网上各种分包文章很多，可是很多不是缺胳膊少腿就是不清不楚，实际上，看api文档是最好的选择之一：1、manifest.json中启用分包，参考官方文档：https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization2、在pages.json文件中做如下配置，参考官方文档https://uniapp.dcloud.io/collocation/pages?id=subpackages...

如何解决VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.<template> <!-- 这个组件是m3u8事件留组件 --> <div class="container"> <div class="player"> <div v-if="src===''"> 视频播放

目前以 echart为例子参考资料11 导入cdnechartd的cdn在public文件下的index.html加下面这句话<script crossorigin="anonymous" integrity="sha512-q0nIjE1LHEOioBDYuyhml+xxTm+ftiPuzdWgEgwq5g3YAZ5CWDmjDUs4t7pFeWnvFQe7eLQg/+PepPbacIDtkA==" src="https://lib.baomitu.com/echarts/4.9.

1.安装包最新版本可能会出现 Cannot read property ‘tapPromise’ of undefined的报错npm i compression-webpack-plugin@5.0.12.修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码const webpack = require('webpack')const CompressionWebpackPlugin = require('compressi

1导入vue-video-player插件npm install vue-video-player --save 2 在main.js导入import 'videojs-flash'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')3 父组件<template> <div class="about" style="width: 100%;height

1 在vue文件中queryTage为vue文件中的函数方法通过挂载在window上实现mounted() { window.queryTage=this.queryTage; },2 在js文件如何调用window.queryTage()

1.在main.js中配置通过indexOf函数判断那个路由是禁用的document.URL为当前地址栏的urlwindow.addEventListener('popstate', function() { if (document.URL.indexOf("/login") > -1) { console.log(document.URL) history.pushState(null, null, document.URL) }})2.router下的index.j

1 .需要申请官方的ak2.配置vue.config.js文件module.exports = { // 百度地图的引入 configureWebpack: { externals: { 'BMap': 'BMap', 'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT' } }}3.在public下的index.html中加上<script type="text/javascript" src="http:

1 不用vue的脚手架可以搭建项目吗？-可以css，HTML的处理正常流程用到es6 采用babelvue-loder 加载vue文件vue-template-compiler 编译模板文件vue-style-loader 加载vue样式babel 配置运行环境与插件“presets”：["@babel/preset-env"]2 使用webpack如何实现测试环境与生产环境的配置package.json的script属性传递参数，运行不同的命令传递不同的参数cross-evn 插

1 基础部分1.1 v-if与v-show的区别v-if隐藏式隐藏节点，v-show隐藏式css display：none频繁切换显示与隐藏建议使用v-show，次数少建议使用v-if1.2 watch与computed的区别watch监听数据变化，computed从现有的数据计算新的数据watch没有缓存，而computed有缓存watc不能异步，而computed可以异步watch是一对多的关系，而computed是多对一关系1.3 watch的深度监听handler 还有

一、前言学习vue的时候，对深入响应式原理模模糊糊的，现在简单一下理解。二、简述VUE响应原理。vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。三、什么是发布-订阅者模式简单理解：比如一个商店，会员粉丝经常要询问有什么活动，员工每次都要做一遍解答，工作重复又麻烦，但是把所有会员的邮箱收集成名单，有活动时统一发送邮件。会员就是订阅者，商店就是发布

1 安装npm i babel-plugin-import -D2 配置 bable.config.jsmodule.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant' ] ]}3

vuex的知识点二次解析1 什么是vuex2 vuex的核心概念初步认识3 对vuex的核心概念进行运用方法3.1 state3.2 getters3.3 mutations3.4 Actions3.5 模块化3.5.1 创建一个user的模块（没有对模块进行空间命名）3.5.2 对核心概念的运用3.5.3 命名空间模块1 什么是vuexvuex是全局数据与状态集中管理，当数据发送改变时，会触发个组件视图自动更新。2 vuex的核心概念初步认识vuex的核心概念分为state – 存放

1 为什么要将api封装起来?方便对项目的api进行管理，可以快速的找到对应api的位置与对应的内容，方便进行修改等操作。2 步骤2.1 创建api文件夹,对api进行封装在该文件夹内创建api相对于的js文件。通promise的方式对api进行封装注意：由于利用了对axios二次封装的部分，对于axios的封装详情看axios的二次封装import request from '@/utils/request.js';// 导入 request/** * 获取用户信息 api

1 axios封装import axios from 'axios'// 导入axiosimport { Toast } from 'vant';// 设置基础URLimport qs from 'qs';//-S// qs把对象转换为url编码形式const BASEURL = process.env.NODE_ENV==='production'?'https://www.520mg.com/':'http://localhost:8080';// process.env.NODE_EN

1 安装与引用引用：npm install vuex --save安装：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)2 核心概念state：vuex的基本数据，用来存储变量,可以实现多个组件都可以访问在这个变量，通常将全局数据将保存在这里。state: { counter:1000},//在组件中访问computed:{ count() { return this.$store.state

axios1 axios的作用2 使用步骤3 常用的请求方式3.1 get3.2 post3.3 axios（）原生1 axios的作用axios是一个ajax工具包。支持promise。支持请求和响应的拦截。nodejs和网页端都可以使用。2 使用步骤安装 npm install axios在main.js导入挂载import axios from ‘axios’Vue.prototype.$http=axios在组件中使用this.$http.get(url).then(r

1 params传参配置：{path:"product/:id"}传参：<router-link to="/prodduct/123">接收值：$route.params.id2 query传参传参：<router-link to="/prodduct?name=jack&aage=18">接收值：$route.query.name,$route.query.age3 meta传参配置：meta: { navshow: true, }调

vue 路由的配置与页面切换1.vue路由1.vue路由可以实现单页面应用。实现步骤：

1 遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法2 调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头3 本质require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目前所有的引擎都还没有实现import，我们在

1 mockJs官网作用：Mock.js生成随机数据,拦截Ajax 请求 开始 前后端分离 让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据,模拟各种场景。2 使用方法2.1 安装npm install mockjs --savenpm install axios --save2.2 完善目录结构在src下创建axios文件，并且在该文件夹下创建一个api.js文件在components文件夹下创建mock.vue文件在src文件夹下创建mock.j

1.对router文件夹下的index.js进行设置{ //精选 path: '/', name: 'choiceness', component: Choiceness, //实现某些页面不需要显示底部导航栏 meta: { navshow: true, } },navshow:用于判断是否显示的参数，当为true时就显示，为false或者没有设置就不隐藏。meta：router的元信息2.在显示的底部的导航栏进行设置<div class="nav-b

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .pages>div { display: none; } /* 让pages直接子元素div全部隐藏 */ </style> </head> <body> <p>&

组件生命周期钩子函数一个组件从创建到销毁会经历一系列的特殊过程，把执行过程叫做组件的生命周期每个生命周期都会执行特殊的函数，把这些函数称为生命钩子函数vue生命周期4组8个常用 创建前后，挂载前后︰更新前后，销毁前后beforeCreate() { console.log('beforeCreate', '创建前'); }, created() { console.log('created', '创建完成'); }, beforeMount() { console.log