weixin_45890414的博客

原创 iframe通信，window.postMessage父子项目数据通信

如果你在子项目中使用 window.addEventListener(‘message’, …) 来监听消息，但收到的 event.data 类型是 “webpackWarnings”，这可能是因为你的监听器在Webpack开发服务器的环境下也会接收到一些Webpack相关的警告信息。

原创 css伪类中content使用变量

【代码】css伪类中content使用变量。

原创 useEcharts更加方便的使用echarts，echarts动态尺寸，

【代码】useEcharts更加方便的使用echarts，echarts动态尺寸，

原创 elementPlus自定义主题色

这些类名是基于elementPlus的，如果是其他UI框架可自行修改类名即可。setTheme（‘主题色’），内部再写几套枚举值来对应各种所需颜色。

原创 elementPlus el-form中组件非表单组件disable状态

【代码】elementPlus el-form中组件非表单组件disable状态。

原创 el-table :span-method=“arraySpanMethod“ 合并单元格 vue3

el-table合并单元格

原创 微信小程序蓝牙通信

微信小程序蓝牙通信

原创 json转成blob blob转成json json数据转成zip导出 zip的解析 导入本地 json/zip new FileReader()

json转成blob const blob = new Blob([JSON.stringify('json数据')], { type: "application/json", });blob转成json这里用promise 否则reader.onload里面生成的body数据外面无法拿到const fileReaderPromise = (blob, fileName) => { return new Promise((resolve, reject) => {

原创 zip保存数据和接口获取压缩包 jsZip

//导出项目使用(压缩包内多个json文件)export const moreJsonToZip = async (arr,zipName) => { console.log('导出的数据',arr); const zip = new JSZip(); arr.forEach(item => { const { name, data } = item const blob = new Blob([JSON.stringify(data)], { type: "applica

原创 html5的 data-* 实现主题色

<div class="main" id="main" :data-theme="theme"></div>[data-theme='black'] { --content-bg-color: #040506; //中心区域背景色 --content-page-bg-color: #111216; //页面区域背景色 --header-icon-color: #fff; //头部图标 // 标尺 --ruler-shadow-color: rgba(0, 100,.

原创 本地获取文件

<input type="file" ref="mapFileRef" accept=".jpg, .png" hidden @change="onMapFileLoad" />const mapFileRef = ref(null);// 选择地图const onMapFileLoad = () => { const reader = new FileReader(); ...

原创 解析psd文件，并映射成组件

psd

转载 拼图验证 vue-puzzle-vcode

https://blog.csdn.net/qq_37816525/article/details/102560656

原创 useCenterHook

import { ref, reactive, computed } from ‘vue’;import { useMenuStore } from ‘@/store/menu.js’;import { useCenterStore } from ‘@/store/center.js’;import { useFrameStore } from ‘@/store/frame.js’;import { useRightNavStore } from ‘@/store/pinias.js’;impor

原创 vue导入导出json

// 导出选中页面const exptPageList = data => { if (!data) return; const blob = new Blob([JSON.stringify(data)], { type: 'text/plain;charset=utf-8', }); saveAs(blob, `页面菜单.json`);};// 导入页面const fileLoad = () => { const reader = new FileReader();

原创 vue3中使用vuedraggable可分组拖拽

vue3中使用vuedraggable可分组拖拽

原创 通过require.context(‘./‘, true, /\.vue$/) 和Vue.extend( ) 实现vue页面的渲染

原创 require.context( )获取.vue文件所有内容

const files = require.context('路径',是否包含子项, 正则.vue) //获取的所有.vue结尾的文件files.keys() 拿到所有的路径，就是他们的keyfiles(item).default.age就可以获取在vue文件全局的数据files(item).default.data() 就可以获取vue2文件data区域的数据...

原创 导入文件时候 new FormData()

formData中append数组的时候要JSON.stringify(arr) 否者直接arr会变成字符串 const files = e.target.files const formdata = new FormData(); formdata.append("file", files[0]); //注意 Object.keys(obj).forEach(item=>{ formdata.append(item, JSON.stringify(arr)) })

原创 在vue3+vite项目中使用svg

https://segmentfault.com/a/1190000039255368

原创 react 弹框组件

在这里插入图片描述react没有slot插槽，但是可以直接通过{{props.children}}获取父组件标签中的内容import React, { Component, useEffect } from 'react';import { createPortal } from 'react-dom';import CSSTransition from 'react-transition-group/CSSTransition';import { Scrollbars } from 'reac

原创 vue从上到下淡入淡出过渡动画

从上往下的淡入淡出的过渡/* 开始 *///dialogFade 是容器的类名 <div class="dialogFade"></div>.dialogFade-enter,.dialogFade-leave-to { opacity: 0; transform: translateY(-30px);}/* 过程 */.dialogFade-enter-active { transition: all 0.5s;}/* 结束 */.dialogFad

转载 el-form表单多重循环校验

https://blog.csdn.net/weixin_45122120/article/details/105741851

原创 el-table添加序号

element 的 table添加序号 template中用 props.$index可以获取当前索引(必须type="index"时) <el-table-column label="#" type="index" align="center"> <template #default="props"> {{ (pagination.currentPage - 1) * pagination.pageSize + props.$inde

原创 vue3 ts 封装Axios

npm i axiosimport axios from 'axios';import { AxiosInstance, AxiosRequestConfig } from 'axios';// 将axios封装到类中class Http{ instance: AxiosInstance; // axios的实例将被保存到这里 constructor(config: AxiosRequestConfig) { // 构造器里的config包括baseURL，timeout等

原创 vue 销毁定时器

定时器是挂载在window上的即使vue页面销毁，也无法销毁window上的定时器。要手动关闭 // 定时器 更新 服务器时间 setTimer() { this.timer = setInterval(() => { // 写具体定时逻辑 }, 2000); } clearInterval(this.timer); // 销毁定时器...

原创 css el-tree鼠标经过、选中颜色

.el-tree-node:focus > .el-tree-node__content { background-color: pink !important;}.el-tree-node__content:hover { background-color: #66b1ff87;}

原创 css变量在页面中的使用，实现页面变量赋值给css中

// '--hoverColor'这个是css中var声明的变量，页面直接给其赋值就可以 <el-table :data="tableList" row-key="id" border default-expand-all :row-style="{ backgroundColor: themeData[theme].table.body.backgroundColor }"

转载 ant desigin vue之 tree(树形控件)中设置defaultExpandAll无效的问题

https://blog.csdn.net/longgege001/article/details/108398660

原创 vue3 导入导出json文件

导入json // 这是选择本地文件的弹框 这里display:none隐藏了，DOM依旧存在 <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad" />获取DOM，触发他的点击事件 const refFile = ref(null); const addFileHandle = () => {

原创 vue3 element-plus 中文

https://element-plus.org/zh-CN/guide/i18n.html#configprovider官网国际化 <el-config-provider :locale="locale"> <router-view /> </el-config-provider>import { ElConfigProvider } from 'element-plus' components: { // Main ElConf

原创 vue3 网络请求添加loading

全局添加import axios from 'axios'import { ElLoading } from 'element-plus'let loadingRequestCount = 0let loadingInstanceconst showLoading = () => { if (loadingRequestCount === 0) { loadingInstance = ElLoading.service({ target: '#app' }) } loa

原创 elementui utils/clickoutside.js 点击元素外部触发

这是elementui框架点击元素外部触发的自定义指令。我们要手动绑定mian.jsimport clickoutside from 'element-ui/src/utils/clickoutside'Vue.directive('clickoutside', clickoutside)使用 v-clickoutside=“handlerOutside” 这样点击元素外部就会执行...

原创 canvas 绘制图片

首先getImageData获取图片所有像素数据(数组)puImageData 就是将获取的数据绘制的地方注意：普通canvas元素可以直接这样绘制，但是如果是导入的图片就要通过createImageData创建一个透明的区域，再将获取到的图片像素数据赋值给createImageData的每个像素// var canvas = document.getElementById('canvas');// var ctx = canvas.getContext('2d');var canvasa =

转载 class类 面向对象的编程思想

<main> <div id="app" style="width: 200px; height: 200px; background:#E34334">houdunren.com</div></main><script> class Ad { constructor(options) { this.$el = document.querySelector(options.el)

原创 echarts自动播放

使用插件vue-seamless-scroll直接导入这个js文件，不用懂内部逻辑(function (global) { global.tools = global.tools || {}; /** * echarts tooltip 自动轮播 * @author liuyishi * @param chart * @param chartOption * @param options * { * i

原创 2021-08-17

var myChart = echarts.init(document.getElementById(“main”)); 报错init错//import echarts from 'echarts' //改成这种import * as echarts from 'echarts'

原创 数组无缝滚动demo

<template> <div> <vue-seamless-scroll :data="alarmdata" class="seamless-warp" :class-option="classOption" > <div v-for="(item, index) in alarmdata" :key="index"> <div>{{ item.name }}&l

原创 js代理模式

// 用户支付的租金class Money { constructor(money) { this.money = money }}// 租客 源对象class User { constructor(name, money, target) { this.name = name this.money = money this.target = target } // 付钱 payMone

原创 js单例模式

class LoginForm { constructor() { this.state = 'hide' } show() { if (this.state == "show") { return } this.state = 'show' console.log("登录框显示"); } hide() { if (this.state === 'h