qq_38274119的博客

原创 vue3 transition-group实现数据插入动画

【代码】vue3 transition-group实现数据插入动画。

原创 使用对象映射后台接口的字段，这样能使前端页面便于维护

【代码】使用对象映射后台接口的字段，这样能使前端页面便于维护。

原创 页面数据导出到excel,从excel导入数据

【代码】页面数据导出到excel,从excel导入数据。

原创 vue3+vite全选单选的实现

vue3+vite全选单选的实现

原创 maptalks

【代码】maptalks。

原创 maptalks地图工具节选、生成圆内随机点，生成多边形内随机点以及RGB颜色值与十六进制颜色码互相转换

【代码】maptalks地图工具节选、生成圆内随机点，生成多边形内随机点以及RGB颜色值与十六进制颜色码互相转换。

原创 判断html结构中是否含有某个子元素

一个html结构中包含如下这些属性，可通过这些属性寻找自己需要的内容。

原创 CSS实现渐变色边框，动画效果

以上是CSS实现渐变色边框的5种方法，可以根据需要选择和应用不同的方法。

原创 使用微信sdk配置签名

使用微信sdk

原创 细数那些惊艳一时的 CSS 属性

随着前端的不断发展，更多新的 CSS 属性不断加入提案，本文列举 7 个不常用但很有用且你见过也可能没见过的 CSS 属性，带大家领略 CSS 之美。

原创 图片、背景图尺寸与裁切

图片、背景图尺寸与裁切

原创 git命令

git基础命令

原创 vue3封装自定义switch组件，以及v-model的使用

vue3封装switch组件

原创 学习微信小程序

flex-grow和flex-shrink

原创 vue项目封装下拉选择框

方式1：通过改变option-wrapper盒子的高度实现展开下拉选项过渡动画<template> <div class="selectWrap"> <div class="select-wrapper"> <div class="select" @click="triggerOption"> <div class="select-content">{{ selectContent.text }}</

原创 el-tree懒加载以及动态局部刷新数据，添加指示虚线

:render-content="renderContent"可以渲染树的样式<template> <!-- 主体 --> <div class="classifyManage-container"> <!-- 左侧树 --> <div class="classifyManage-container-left"> <!-- &lt

原创 highcharts（多圈仪表图）活动图

highcharts仪表-活动图if (!Highcharts.theme) { Highcharts.setOptions({ chart: { backgroundColor: '#3d3947' }, colors: ["#29D8B5", "#0095E9", "#F3822F","#FF4B4C","#FF0000"], title: { style:

原创 js监听点击事件以及页面滚动距离

js监听页面滚动距离window.onscroll = function() { //为了保证兼容性，这里取两个值，哪个有值取哪一个 //scrollTop就是触发滚轮事件时滚轮的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log("滚动距离" + scrollTop);}vue.js监听页面滚动距离 mounted() { windo

原创 node配置环境变量以及安装(express)

参考的https://www.cnblogs.com/coder-lzh/p/9232192.html#_label0首先在nodejs的安装目录下新建node_global和node_cache两个文件夹创建完两个空文件夹之后，打开cmd命令窗口，输入npm config set prefix “C:\Program Files\nodejs\node_global”npm config set cache “C:\Program Files\nodejs\node_cache”接下来设置环境

原创 vue中watch的详细用法

1、在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：<input type="text" v-model="person"/>new Vue({ el: '#root', data: { person: 'xml' }, watch: { name(newval, oldval) { console.log(newval, oldval); } } })2、直接写一个

原创 不使用npm安装，而是引入本地资源使用elementUI

// 不使用npm安装，而是引入本地的assets中的elementUI资源import '@/assets/elementui/index.css'//引入js文件必须使用一个变量elementUI去接收import elementUI from '@/assets/elementui/index.js'vue.use(elementUI);引入成功后就可以在vue页面中正常使用了，如果在index.html中引入了elementUI的js以及css文件之后可以在html页面使用...

原创 nginx反向代理遇到的坑

我把项目丢到nginx中之后遇到一系列的问题，在这里记录下来：找到nginx的exe文件，在此路径下运行命令行，启动：nginx；（输入此命令光标没有退出命令行，然后在浏览器中输入localhost：端口号（这里的端口号就是配置文件中自己设置的）若能打开welcom页面表示nginx启动成功）等任务完成之后，关闭Nginx服务：nginx -s quit；强制关闭Nginx服务：nginx -s stop；重启Nginx服务，一般是修改了配置文件之后，使修改生效：nginx -s reload

原创 使用elementui做后台管理系统①后台系统菜单②嵌套路由③重复点菜单报错问题

要理解vue中 router和router和router和route的区别：router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等import Vue from 'vue'import VueRouter from 'vue-router'

原创 标准盒模型和IE盒模型（也叫怪异盒模型）

1.标准盒模型标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin注：除内容content外，其他为上下左右都有2.怪异盒模型怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的

原创 js事件机制

原创 小程序中实现手风琴效果可以折叠可以展开，重点是改变数组中的对象的属性值

changeFlag(event){// this.setData({// flag:event.target.dataset.alphaBeta// })var selectedIndex = event.target.dataset.alphaBeta;let completeStatus = list[${selectedIndex}].flag;this.setData({[completeStatus]:!this.data.list[selectedIndex].flag})

原创 jsDoc的使用文档

个人的总结，有不准确的地方欢迎大家留言指出安装npm init -ynpm i -D jsdocpackage.json中可以看到jsdoc的版本信息新建一个jsdoc.json文件{“source”:{“include”:[“src”],“includePattern”:".js$",“excludePattern”:"(node_modules/docs)"},“plugins”:[“plugins/markdown”],“templates”:{“cleve

原创 new操作符创建对象可以分为以下四个步骤

new操作符创建对象可以分为以下四个步骤：创建一个空对象将所创建对象的__proto__属性值设为构造函数的prototype的属性值执行构造函数中的代码，构造函数中的this指向该对象返回对象因此上面的过程就可以等同于下面的过程：var Person = function(name, age) {this.name = name;this.sex= sex;};Person.prototype.show = function() {console.log(this.name, thi

原创 阻止时间冒泡与默认事件

当需要停止冒泡行为时，可以使用function stopBubble(e) {//如果提供了事件对象，则这是一个非IE浏览器if ( e && e.stopPropagation ) {//使用IE的方式来取消事件冒泡e.stopPropagation();}else {//否则，我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;}}当需要阻止默认行为时，可以使用//阻止浏览器的默认行为function stopDef

原创 es6新特性牢记这九条

字符串模板；增加了let和const命令，用来声明变量，增加了块级作用域，解决变量提升的问题；for…of遍历数组；箭头函数（=>）；arguments对象；ES6将promise对象纳入规范，提供了原生的Promise对象；新增class类的支持；引入module模块的概念（import和export）对比node.js中的commonJS（module.export==xx,require）；拓展运算符（…）...

原创 react项目从零开始搭建，上手react如此简单

初始化项目安装npx create-react-app myreact结构package.json：包管理文件node_modules：局部安装的第三方模块.gitignore：被git忽略的目录或者文件src：开发目录index.js：整个项目的入口文件app.js：根组件public：存放项目模板文件，以及通过href或者src引入的外部文件readme.md：说明文档vscode插件：ES7 React/Reduxreact-devtools配置安装

原创 vue项目中遇到的棘手的问题（包含IE浏览器的兼容器问题）

一、由于懒加载，使用elementUI里面的dialog的时候dialog还未被渲染成DOM元素，调用清空表单验证的方法会报错this.$refs[formName].resetFields();解决方案：①在open事件回调中进行；②使用slot=‘footer’，dialog的内容是懒加载，但是footer是实时渲染的；③不推荐，可以使用延时器二、IE家族不支持Promise对象解决方案：安装： cnpm install es6-promise在 main.js 引入 ： polyfill r

原创 h5以及css3新特性

面试中经常被问，支支吾吾的老是答不全！！血泪教训，决定记下来！h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。h5新增的标签新增元素 说明video 表示一段视频并提供播放的用户界面audio 表示音频canvas 表示位图区域source 为video和audio提供...