今天,你学习了吗?

原创 vue3中echarts打包后不显示/vue3 柱状图hover时 不显示弹窗,点击tooltip报错

​vue3中echarts打包后不显示解决办法:在vue的生命周期 onbeforeUnmount中清空echartsDom后解决vue3 柱状图hover时 不显示弹窗,点击tooltip报错解决办法: 在vue 中引入 markRaw具体原因:所以在实例化echart时，将其指定为非响应式的即可。...

原创 vue2.0与3.0 插槽

vue2.0写法匿名组件子组件 child<template> <div> <slot></slot> </div></template>父组件 app<template> <div id="app"> <child> 我是匿名插槽 </child> </div&gt

原创 uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)

uniapp开发小程序/h5 ,使用分包,vuex,消息订阅,登录逻辑,自动注册组件等

原创 js数组转换

var data ={id:"11",name:"张三"};var keyMap = {id: "序列", name: "姓名"};var objs = Object.keys(data).reduce((newData, key) => {let newKey = keyMap[key] || keynewData[newKey] = data[key]return newData;}, {})console.log("----------------------",objs)

原创 element日期自动弹窗事件

日期自动弹窗事件 :input输入框聚焦事件首先获取到弹窗事件的dom1 首先给el-date-picker组件添加 ref 节点 打印结果 如下2 获取到$el.firstElementChild 就是input 输入框3 使input输入框自动聚焦事件代码如下,必须要延时一下,否则获取不到 setTimeout(() => { this.$refs.years.$el.firstElementChild.focus() }, 200)

原创 网页输入url游览器做了什么

一 .简答游览器查询DNS解析当前URL对应的IP建立TCP链接(三次握手)游览器发送http请求服务器收到请求并响应http请求并返回报文游览器收到返回报文并执行渲染(DOM树,CSS树,Render-Tree,布局,重绘)关闭TCP链接二.解答1 DNS解析一个IP地址对应一台服务器,一个域名可能对应多个IP,域名解析服务器会根据一定的规则分配给用户其中一个IP地址,例> www.baidu.com=>DNS解析=>11.22.33.44(IP地址)查找过

原创 前端canvas动态验证码实现

<canvas id="cancasCode" width="100" height="40" @click="initCode"></canvas> // 生成一个随机数 const randomNum = (min: number, max: number) => { return Math.floor(Math.random() * (max - min) + min) } // 生成一个随机的颜色 const ra..

原创 Vue自定义指令分享

vue开发中,vue提供的api往往满足不了开发的需要,这时候就可以使用vue自定义指令来简化代码,看起来更优雅常用api介绍一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比

原创 umi配置项

import { defineConfig } from 'umi';export default defineConfig({ hash: true, //兼容IE11 targets: { ie: 11, }, //配置 html 的输出形式，默认只输出 index.html。 exportStatic: {}, //全局标题 title: 'hi', // 配置主题，实际上是配 less 变量。 theme: { 'primary-colo

原创 h5与app交互

var u = navigator.userAgent; this.isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //安卓端 this.isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS端 if (this.isAndroid) { //安卓 _.$store.commit("setToken",.

原创 手写 防抖节流,数组去重,数组扁平化

原创 简述vuex的功能以及使用方法

1. vuex简介Vuex是一个专门为vue.js应用设计的状态管理架构.它的作用是将应用中的所有状态都放在一起,集中起来统一管理和维护组件的可变状态Vuex有五个核心概念 state,getters,muntations,action,modulesVuex 背后的基本思想，借鉴了 Flux (opens new window)、Redux (opens new window)和 The Elm Architecture (opens new window)。与其他模式不同的是，Vuex 是专门为

原创 年月日时分秒转换时间戳

const time = "2021-2-12 12:35:36"const dateTime= Date.parse(time)

原创 扁平化数据转tree结构

let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4},]两种方法 let root =[] for (let i = 0; i < arr.length; i++)

原创 cookie,localStorage,sessionStorage三者的区别

原创 webpack基础教程

webpack官方地址webpack 是一款帮助我们打包的工具,下面直接上干货1 创建一个文件夹,并且初始化改文件夹,初始化之后会加粗样式自动生成一个package.json文件

转载 base64文件、blob对象、file文件对象互相转化

一、base64文件转换为blob对象：function convertBase64UrlToBlob(urlData){ var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(

原创 file文件转blob格式后下载 ,file文件下载

使用FileReader 对象转换 (该对象用于读取单个文件),接收File对象或Blob对象var reader = new FileReader()针对不同类型文件,FileReader使用不同的方法读取readAsBinaryString(Blob| File) :返回二进制字符串readAsText(Blob | File,opt_encoding):返回文本字符串readAsDataURL(Blob | File) : 返回一个基于base64 编码的data-uri 对象read

原创 在Vue中实现吸顶的功能

需求:下拉滚动条时标题栏会在顶部显示两种方法:1,监听盒子到游览器顶部的距离, 如果距离为0 就定位2 利用c3的属性 position: sticky;下面上代码 mounted() { // handleScroll为页面滚动的监听回调 window.addEventListener('scroll', this.handleScroll) this.$nextTick(function() { // 这里fixe

原创 Vue前端Blob文件流下载

首先请求数据设置 responseType: ‘blob’ 的格式 其他不变后端返回的格式是text/xml的然后操作data //数据转换为文件下载 var elink = document.createElement('a') elink.download = '文件名称.zip' elink.style.display = 'none'

原创 vue3 script-setup 语法糖 父子组件通信 使用defineEmit,defineProps,defineExpose (useContext 弃用)

官方地址https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#closed-by-default新的写法以前的写法相比之下写法变得更加简化,下面具体看是否真香引入子组件可以直接在template中使用,不用在注册组件组件传值父组件<template> <child :value="obj.num" @myclick="childCl

原创 记录 vue3中父子组件通信

在vue3中有很多方法实现通信,我这里介绍一种首先注册组件import { reactive, toRefs, ref } from "vue";import HelloWorld from "@/components/HelloWorld.vue"; import Header from "@/components/header.vue";export default { components: { //全局注册的方法 HelloWorld, Header, },

原创 记录一下vue3的组合API,ref,toRef,toRefs,reactive的区别,生命周期

setup什么是组合式api？ 官方地址：https://www.javascriptc.com/vue3js/guide/composition-api-introduction.html#%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E5%90%88%E5%BC%8F-api 在vue2中我们使用create,data,methods等方式来交互代码逻辑， 在vue3中我们可以直接在setup中使用data，生命周期等 setup 作为组合式 API 的入口

转载 移动端适配

移动端适配关于移动端适配问题还是推荐使用vw vh vw/vh 是将页面分为 100 份，1vw = device-width/100vw 的兼容性: 兼容大多浏览器具体使用:1.定义 sass 函数@function vw($px) { @return ($px / 375) * 100vw;}2.使用 vw(传入具体px).header { display: flex; justify-content: space-between; align-ite

原创 记录JS 中 forEach,map,filter,set容易混淆的方法

forEach()不会改变原数组,forEach没有返回值，只能遍历数组，旨在处理单个数据，无法使用break， return等终止循map() 不会改变原始数组,可以返回一个新的数组，旨在整理整体数据，并返回整理后的数据filter() 不会改变原始数组，方法返回一个新数组，旨在过滤数据，返回的是满足条件的数据reduce() 对所有数组进行累加，最后返回一个值，不改变原数组some() 判断是否有元素符合func，如果有一个符合条件，就会终止循环，返回trueevery() 返回一

原创 记录vue+element项目使用wangEditor富文本教程

贴一下官方地址 https://www.wangeditor.com/项目需求:写一个上传文章的功能本文中实现的功能:富文本中上传图片到服务器,服务器返回一个地址,并展示在富文本中(图片是base64格式)富文本内容回显上代码所有的配置都需要在.editor.create()之前data() { return { editor: null, }; },<div id="editor"></div>创建实例与上传图片 函数写在

原创 记录vue+element 上传视频

需求:需要在上传视频前展示视频内容,上传的格式formData,也就是文件格式需要跟其他的文件格式一起上传本地获取视频后需要转换成网址以便在video中播放可以展示后端传来的视频内容思路需要el-upload组件需要在上传文件前对文件进行验证,通过before-upload事件验证是否是视频文件再通过http-request事件获取到文件格式,保存(传给后端),在网上找的两种方法转换url地址提示:需要看文件的格式是否是你需要的file格式 还是需要再进一步拿到的 fileonCha.

原创 记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法

标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不能获得当前的地址信息(地址信息只支持app获取), 而 uni.chooseLocation是可以获取到用户的信息与经纬度,但是这个api是有一些bug (搜索外省的搜不到,必须点击右上角完成,才能获取地址) 简单的功能还可以使用下面是实现思路自己写一个地图组件,顺带美观一下1.获取用户授权地址信息,如

原创 判断对象是否为空 三种方法

第一种 for…in function(obj){ for(var it in obj){ return console.log(obj.it) } return console.log('空对象') }第二种 通过json自带的.stringify的方法if(JSON.stringify(c) ==='{ }' ){console.log(''空对象')}第三种 ES6语法 Object.keys() if(Object.key

原创 记录后台返回base64 前端转文件下载

需求是一个xlsl文档下载 后端返回 的是这种格式下面直接上封装好的代码 直接调用此方式就可以 dataURLtoDownload(dataurl, name) { var bstr = atob(dataurl), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } le

原创 vue项目封装请求函数

util下的serve.jsimport axios from 'axios'//引入import { Message } from "element-ui";const baseURL = "http://www.baidu.com/";const service = axios.create({ // 配置项 baseURL: baseURL, withCredentials: true, timeout: 50000,});// 拦截器service.intercep

原创 记录微信小程序完整登陆流程

1.使用button组件获得用户授权<button class='bottom' type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button>2.当用户点击登陆时候弹出弹窗 通过wx.getUserInfo()api 获取用户信息3.用户授权同意后调用wx.login(){} 拿到code码 传给后端4.后端返回给你小程序的秘钥session跟oppenid (代码中一般不放)5

原创 分享在uniapp中switchTab不能传参解决办法

uniapp中switchTab不能传参,记录一下我的的解决办法1 在app.vue中默认一个参数2 在跳转的页面通过getapp(). xxxxx = xxx 赋值3 跳转成功后再跳转的页面获取到存入app.vue中的值,然后刷新页面下面上代码:跳转的页面getApp().globalData.switchId = id console.log('存入的值', getApp().globalData.switchId) uni.switchTab({ url: 'xxxxx',