- 博客(119)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 nvm 管理 node版本
tips：安装前需要卸载已安装的node，否则会导致安装不成功或node与npm不兼容等问题。查看所有可安装的node版本。安装指定的node版本。使用指定node版本。卸载指定node版本。
2023-10-05 12:02:35
276
原创 https://www.tailwindcss.cn/
默认情况下，此命令将在项目根目录创建一个名为 tailwind.config.js 的 Tailwind 配置文件和一个名为 postcss.config.js 的 PostCSS 配置文件。现在，您已经成功在 Vue 3 项目中引入了 Tailwind CSS。您可以使用 Tailwind CSS 的功能来构建现代化的用户界面。使用 Tailwind CSS 类来构建您的 Vue 3 组件。
2023-06-20 16:22:51
877
原创 js询问浏览器摄像头等设备授权
调用方式navigator.mediaDevices.getUserMedia(注：开启摄像头需要浏览器网站设置为询问状态，如果是拒绝状态则不能开启。
2022-12-02 13:47:45
1496
2
原创 vue 使用mock
下载mocknpm install mockvue中使用mock.js1.在src下新建一个mock模块2.在mock模块下新建index.js文件统一管理mock数据import Mock from 'mockjs'// 设置响应延时Mock.setup({ timeout: '200-600'//可以是整数，也可以是‘-’字符串});let configArray = [];//使用webpack的require.context()遍历所有的mock文件const fi
2022-03-17 13:52:58
2846
原创 polyline设置路径动画
polyline元素polyline元素是SVG的一个基本形状，用来创建一系列直线连接多个点其内的points属性绘是制折线的一系列点<polyline points="1.64 94.48 45 94.48 45 2.9 1.64 2.9" />animation 元素1.attributeName 要变化的元素属性名称可以是元素直接暴露的属性,也可以是CSS属性2.attributeType = “CSS | XML | auto” 即将变化的属性是哪一类
2022-03-02 16:11:27
1008
原创 svg路径动画
涉及的基础标签与属性svg标签width,height : 画布宽高xmlns：声明命名空间，防止来自不同技术的元素发生冲突viewBox：指定视口位置和大小（左上角的横坐标和纵坐标，视口宽高）stroke：定义 svg 元素的描边颜色，例如线条、文本等描边颜色stroke-width：定义 svg 元素的描边宽度stroke-opacity：定义 svg 元素的描边透明度fill：定义 svg 元素的填充颜色fill-opacity：定义 svg 元素的填充透明度transform：
2022-01-24 15:09:12
3098
原创 svg描边动画
svg路径动画步骤1.用getTotalLength()方法获取path的路径总长度2.设置stroke每段虚线的间距和偏移量为总长度，3.使用动画将偏移量设置为初始值0stroke-dasharray：每段虚线的偏移距离stroke-dashoffset：偏移量HTML<div class="icon-box"> <svg t="1642748502659" class="icon" viewBox="0 0 1498 1024" version="1.1" x
2022-01-21 16:41:25
550
原创 vue使用addrouter添加动态路由
路由拦截beforeEach和addRouter注意：1.一定要理解beforeEach（全局的路由守卫，每一次路由执行都会触发）和addRoutes的运行机制，这里容易陷入死循环，所以一定要做好判断，不要每一次路由调用都执行addRouter的方法2.使用 addRoutes 钩子后, 直接调用 next() , 如果当前页面的路由是通过 addRoutes 添加进去的，对应的路由不会渲染，当前访问是没法跳转进去的, 所以需要调用 next, 重定向当前的路由（next({…to, replace:
2021-11-04 09:46:56
8632
原创 vue中数组无法使用foreach等数组的方法
原因vue框架对数据设置的监控器导致数组后面会出现 Observer,观察者模式，它不可枚举，从中不可xx[0]取值解决方案通过一次深拷贝重新生成一个可枚举的数组JSON.parse(JSON.stringify(store.getters.menuList))...
2021-11-03 14:42:22
2195
原创 echarts注册事件反复点击导致页面卡顿
问题echarts在地图组件上注册点击事件，反复点击时调用生成echarts的方法，会出现页面卡顿原因在点击地图触发事件时，不断的调用生成地图的函数，导致echarts不停的创建点击事件解决（echarts.off()解绑事件处理函数）在echats事件执行完后调用myChart.off()解绑事件(eventName: string, handler?: Function)参数：eventName事件名称。handler可选，可以传入需要解绑的处理函数，不传的话解绑所有该类型的事件函
2021-10-19 12:06:50
616
原创 vue引入highCharts 3d饼图
安装npm install highcharts --save配置main.jsimport highcharts from 'highcharts'import highcharts3d from 'highcharts/highcharts-3d'highcharts3d(highcharts)在组件中使用import HighCharts from 'highcharts'init3dPieChart() { Highcharts.chart("cotrun-3dp
2021-09-26 16:50:34
410
原创 echarts地图坐标系及多个省份json文件的合并
安装echartsyarn add echarts获取省市区数据来源的json文件var uploadedDataURL = "./js/henan.json"; //地区的json (function(){ $.getJSON(uploadedDataURL,null,function(data){ var myChart = echarts.init(document.getElementById('chart1'), "westeros"); echarts.
2021-09-07 14:04:23
1648
原创 safari浏览器上element UI表格错乱的问题
在css内覆盖原有样式.el-table__body { // 兼容safari width: 100%; //改变表格布局方式 table-layout: fixed !important }
2021-04-21 15:38:37
912
1
原创 宏任务与微任务
宏任务script全部代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）、I/O、UI Rendering。微任务Process.nextTick（Node独有）、Promise.then()、Object.observe(废弃)例：new Promise((resolve) => { console.log('1'); resolve()}).then(() => { con
2021-04-12 11:59:35
78
原创 html2canvas生成图片
工作原理html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas，所以它并不支持所有的css属性（参考地址）引入html2canvas<script src="./html2canvas.min.js"></script>下载地址基本语法<div id="cvs-box"><img style="width: 100px;" id="test-img" crossorigin="anonymous"
2021-04-01 18:40:59
29211
原创 cli生成vue3
1,在命令行输入vue create 项目名称，输入完成后，他会有这样一句询问Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)意思是没有科学上网是否选择淘宝源，这里选择y（如果配置过淘宝源则不会显示这个选项）2.上一步选择y后会弹出如下选项? Please pick a preset:
2021-03-31 12:45:26
2466
原创 Proxy代理
Proxy用于创建一个对象的代理，从而实现基本操作的拦截和自定义语法const p = new Proxy(target, handler)参数target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）handler一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。基础示例getget方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身(用到data时会触发)
2021-03-29 16:58:31
204
原创 vue-cli3代理解决跨域
在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。在vue.config.js文件（cli3会自动生成，如果没有就在根目录新建一个）中的devServer.proxy这个对象进行配置，其中devServer.proxy指向一个开发环境下的服务器API地址，配置如下：module.exports = { lintOnSave: false, //关闭eslint检测\ devServer:{
2020-12-25 18:40:12
1629
1
原创 vue-cli3
全局安装cli3最高版本npm install -g @vue/cli@3.12.1查看是否安装成功vue --version创建项目vue create my-project（项目名）defult //默认配置Manually select features //自己选择配置选择你需要的基础配置（空格键选择）是否使用history mode，其实呢就是我们的页面路由含不含有#;这里我们选y选择自己需要的css预处理eslint选择选择什么时候检查，Lint on save
2020-12-10 12:36:51
192
原创 vue使用百度统计埋点
统计代码安装//main.js声明_hmt对象var _hmt = _hmt || [];window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到//统计代码获取(function() { var hm = document.createElement("script"); hm.src ="https://hm.baidu.com/hm.js?百度统计所申请的appKey"; var s = document.ge
2020-12-09 18:36:37
5009
2
原创 vue-router动态路由配置
实现动态路由配置关键是路由嵌套配合router-view(可以看作一个容器，存放匹配到的路由组件)例：{ path: '/', //匹配第一层菜单 component: Layout,//整体布局的组件 redirect: '/dashboard', children: [{ //匹配一级菜单下的二级菜单（匹配的结果会放入<router-view />中） path: 'dashboard', name: 'Dashboard',
2020-12-07 10:00:19
2948
1
原创 小程序下载网络图片
小程序的wx.saveImageToPhotosAlbum()中filePath的路径图片文件路径，可以是临时文件路径或永久文件路径 (本地路径) ，不支持网络路径所以我们要先用wx.downloadFile()方法将图片下载下来在进行缓存 saveImg(){ wx.downloadFile({ url: this.data.shareInfo.url, //要下载的图片...
2020-12-07 09:45:59
1131
原创 js优化之防抖节流
防抖函数应用场景：搜索框/滚动条的监听事件处理，防止每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。短时间内大量触发同一事件，只会执行一次函数，实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作参数1为触发事件函数，参2位延迟时间function delayShake(fn, time) { let tim...
2020-12-07 09:45:22
190
原创 vscode在vue中注释失效
vscode在vue文件中注释出现下面的情况可能是Vue 3 Snippets造成的插件冲突，卸载掉这个插件，或者，安装个插件 “Vuter” 解决 （注意是“Vuter“ 不是那个”Vetur“插件）
2020-11-27 11:12:36
4772
7
原创 vue-seamless-scroll列表循环滚动插件
安装npm install vue-seamless-scroll --save引入import vueSeamlessScroll from "vue-seamless-scroll";export default { components: { // circleBg, vueSeamlessScroll }}使用<vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="clas
2020-11-26 16:24:47
3657
原创 vue使用ecahrts词云图
echarts词云图是echarts的一个扩展安装使用1.安装依赖 npm install echarts npm install echarts-wordcloud2.引入main.jsimport echarts from 'echarts';Vue.prototype.$echarts = echarts在用到的组件中引入扩展<script>import "echarts-wordcloud/dist/echarts-wordcloud";import "e
2020-11-23 09:55:05
2897
2
原创 vue中修改element-ui样式
1.给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改2.利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面例：修改table表格<!-- 在element组件外加一层div，使其只在这个div内生效，防止改变全局 --><!-- 表头部分的样式需要利用组件提供的属性配合事件修改 --><div class="table-wrapper"> <
2020-11-19 13:23:59
1821
原创 git生成秘钥切换新账号
git生成ssh秘钥的方法：设置Git的user name和email：git config --global user.name “daiqingsheng”git config --global user.email “daiqingsheng@jinbaozheng.com”查看是否已经有了ssh密钥：cd ~/.sshcat .ssh/id_rsa.pub生成密钥：ssh-keygen -t rsa -C “daiqingsheng@jinbaozheng.com”...
2020-07-28 21:43:03
759
原创 继承
寄生组合继承1.借助call()使子类可以拿到父类的属性值2.将子类原型对象替换为父类原型对象3.为新的子类prototype对象加上constructor属性，并将这个属性指回原来的构造函数。 function Parent () { this.name = 'parent'; this.play = [1, 2, 3]; } function Child() { Parent.call(this); //借助call()使子类可以拿到父类的属性值 thi
2020-05-21 12:05:17
167
转载 网页字体适配方案
微信安卓版 7.0.10 版本起，网页的字体大小会跟随微信全局设置里的字体大小。若用户设置了较大字体后，可能导致网页的排版出现错乱，建议开发者做好较大字体的适配document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke("setFontSizeCallback", { fon...
2020-01-03 15:00:37
568
原创 小程序授权
小程序登录调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。登录流程图1.调用wx.login() 获取 临时登录凭证code2.拿到cod...
2019-12-27 15:07:34
836
原创 小程序自定义组件间的传值
父组件向子组件传值方式：WXML 数据绑定1.父组件：直接绑定父组件的数据到子组件上//father.jspage({ demoData:'父组件向子组件传的数据',})//father.wxml，<son fatherData='{{demoData}}' ></son>2.子组件：在properties内接收父组件的数据//son.js//...
2019-12-26 17:53:01
2614
原创 yarn的安装及所遇到的问题
官网下载程序安装：npm安装：下载node.js，使用npm安装npm install -g yarn查看版本：yarn --version遇到的问题：显示不是内部或外部命令问题原因：没有添加环境变量解决方法：找到yarn下的bin文件，复制路径到系统变量到path上1.右击我的电脑–属性–高级，找到环境变量2.找到path选项3.添加环境变量...
2019-12-25 14:23:26
6161
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人