mrsun_web

原创 Antv-G6的基础使用

注：nodes 数组中包含节点对象，唯一的 id 是每个节点对象中必要的属性，x、 y 用于节点的定位；edges 数组中包含边对象，source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。G6 是一个图可视化引擎，它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力，旨在让关系变得透明，简单。

原创 Vue3中watch监听的坑和基本使用方法

【代码】Vue3中watch监听的坑和基本使用方法。

原创 CSS鼠标悬停增加底部边框后内容位置会发生变化，简单的解决方法

CSS鼠标悬停增加底部边框后内容位置会发生变化，简单的解决方法

原创 Vue-cli脚手架始终是2.9.6，无法卸载及更新

问题描述：遇到一种情况，就是使用vue -V 查看版本始终是2.9.6，安装命令是npm install @vue/cli ,按理说是最新版本，但是还是显示旧版，使用vue create 【项目名称】 提示是要卸载脚手架在安装，但是安装后还是2.9.6原因：其实导致这个原因是从vue-cli 3.0版本开始原来的npm install -g vue-cli 安装的都是旧版，最高到2.9.6，安装新版必须是新的命令npm install -g @vue/cli 这就导致了，如果我们再2.9.6版本还存在

原创 router.back与router.go的区别

go(-1): 原页面表单中的内容会丢失；this.$router.go(-1)：后退+刷新；this.$router.go(0)：刷新；this.$router.go(1) ：前进back(): 原页表表单中的内容会保留；this.$router.back():后退 ；this.$router.back(0) 刷新；this.$router.back(1)：前进...

原创 websocket 的minxi基本用法和socket.io的区别

1，websocket的基础使用方法var ws = new WebSocket("wss://192.168.1.102:8080"); //需要连接的服务器端的URL 注意： ws或者wss一定要有 两者就是http协议和https协议的区别ws.onopen：function() { console.log("WebSocket连接成功"); ws.send("Hello WebSockets!"); //向服务器端发送数据的方法};ws.onmessage:func

原创 Vue中websocket的使用方法

<template> <div class="test"> </div></template><script> export default { name : 'test', data() { return { websock: null, } }, created() { this.initWebSocket(); }, de.

原创 vue中mixins的使用方法

vue中的解释语言枯燥所以我们跳过，直接用一个简单的例子进行演示1，先定义一个混入对象2，把混入对象引用到当前的组件中3，组件1中的参数num进行+1的操作4，组件2中的参数num未进行操作5，分别打印组件1中的值和组件2中的值大家可以看到，我在组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。6，如methods...

原创 Vue项目前端或后台实现导出报表

Vue项目前端或后台实现导出报表

原创 Echarts中文文档手册

官网链接：http://echarts.baidu.com/echarts2/doc/example/themeDesigner.htmlhttps://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChartstheme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: [.

原创 Ant Design of Vue表单自定义验证validator

1.表单验证1.1rule用法注意：表单必须绑定rules验证规则才能生效在data中声明rules校验规则，具体规则可以查询文档，这里重点说下自定义校验validator1.2validator用法validator验证器，可以对格式进行复杂限制，跟rule一样需要设置对应表单项的prop属性，然后绑定validator，validator绑定验证规则变量（注意验证规则变量是处在data的return外面）。且需要注意的是callback回调函数一定要被调用&l...

原创 高德地图缩放marker位置变化，及设置offset偏移

一些朋友在往地图上添加标注的时候，往往会发现，图片的尖尖角对不上具体的点。比如，我要在上海东方明珠上扎一个点。var marker = new AMap.Marker({ //添加自定义点标记 map: map, position: [121.499809,31.239666], //基点位置 offset: new AMap.Pixel(0, 0), //相对于基点的偏移位置 draggable: true, //是否可拖动

原创 使用AXIOS的ONUPLOADPROGRESS制作上传进度条--以及ONUPLOADPROGRESS的源码解读

1，从名字就可以看出来，这是允许为上传处理进度的事件。他是axios的请求配置之一。axios({ method: 'post', url: this.uploadurl, data: formData, headers: { 'Content-Type': 'multipart/form-data' // 文件上传 }, //文件上传进度值 onUploadProgre

原创 css实现文本超出单行或两行显示省略号...

两行超出：.warp2{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; -ms-text-overflow: ellipsis; text-overflow: ellipsis; }单行超出：overflow:hidden;text-ove..

原创 用Ui组件样式不生效，样式穿透的使用方法和区别

在写一些vue项目时候，经常会引入一些UI组件。无论是自定义组件还是引入的外部组件。style标签上都有scoped属性。防止影响到其他页面上的样式。但是又是需要在父组件更改自组件的样式。就要用到组件穿透（也叫深度修改css）1：>>>如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改即可2： /deep/项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /de

原创 Ant Design of Vue-Cascader级联选择器options报错

错误提示：Invalid prop: custom validator check failed for prop "options查找错误代码：查找options数据：发现子数据为null所以数据类型不对出现的报错解决办法：对子数据为null的数据更改为数组类型即可...

原创 Ant Design时间选择器实现禁用时间

最终实现按效果如下：即实现时分秒时间段的选择，结束时间要大于开始时间使用了disabledHours、disabledMinutes、disabledSeconds来实现禁用时间完整组件代码如下：可直接引用运行查看效果<template> <div class="select-range-time"> <a-row style="line-height:40px;width:400px;"> <a-co

原创 this.$set()进行强制更新

对象操作：三个参数：this.$set('改变的对象'，'改变的对象属性'，'值')数组操作：三个参数：this.$set('数组'，'下标'，'值')写一个小的demo: 为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input

原创 Moment.js查询当前小时天月年之前的时间

let time=moment().format('YYYY-MM-DD HH:mm:ss') //获取当前时间let time=moment().add(-1,'year').format('YYYY-MM-DD HH:mm:ss')); //前一年时间let time=moment().add(-1,'month').format('YYYY-MM-DD HH:mm:ss')); //前一月时间let time=moment().add(-1,'week').format('YYYY-MM-DD.

原创 AntDesign的select组件placeholder不显示问题

问题：select组件同时绑定了v-model和placeholder，select绑定的placeholder属性不显示。<a-select v-model="level" placeholder="选择日志级别"> <a-select-option value="info">1</a-select-option> <a-select-option value="warn">2</a-select-opti

原创 Vue基于Seamless-Scroll无缝滚动插件

NPM安装：npm install vue-seamless-scroll --save注册组件：// **main.js**// 1.全局 installimport Vue from 'vue'import scroll from 'vue-seamless-scroll'Vue.use(scroll)// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scrollVue.use(scroll,{componentName: 'scrol

原创 Watch监听数组或对象

handler：监听数组或对象的属性时用到的方法deep：深度监听，为了发现对象内部值的变化，可以在选项参数中指定 deep:true 。注意监听数组的变动不需要这么做。1，watch监听普通变量：data() {return {　　frontPoints: 0}},watch: {frontPoints(newValue, oldValue) {　　console.log(newValue)}}2，watch监听数组：data() { return { 　　w

原创 微信小程序父子传参

父传子：在你的父文件夹下的.json文件下引入子组件{ "usingComponents": { "music": "../../component/music/music" /*这是定义的组件名字*/ /*这是我子组件的路径*/ }}然后在父组件里 以标签的形式写入子组件，传值的话在标签上自定义属性名，属性值要以双花括号保住<music list='{{list}}'></music>然后在子组件中使用Component构造器，他在P

原创 Vue中axios请求默认不带cookie问题

使用场景:有时后端需要处理验证前端带有的cookie, 然而axios请求默认不携带cookie,所以后端获取不到cookie导致验证失败解决方法（二者选其一就行）:1. 每次想携带cookie的axios请求,加上withCredentials:true的属性2. 修改axios默认配置, 使得每次请求默认携带cookieaxios.defaults.withCredentials=true;总结：第一种方式应用于大部分请求不想带cookie，只有少部分请求需...

原创 Vue组件中的name有什么用？

export default { name: 'App'}1，组件在递归的时候可以使用：2.设置组件不使用keep-alive缓存时使用

原创 Css中的BFC是什么？

原创 vue兄弟组件传值的3种方法

1，bus总线传值2，常规子1传父->父传子23，vuex这里详细说明bus总线传值的总路线及方法：本例为基本用法，如果不理解的可以看下面的详细使用方法：//bus.js import Vue from 'vue';export default new Vue;//使用 兄弟A 传值import bus from '路径'bus.$emit('自定义事件名称',输出数据)//使用 兄弟B 接值import bus from '路径'bus.on('自定义事件名',(r

原创 节流和防抖的区别？

处理函数在短时间内被频繁调用。如果处理函数还需要调用后台接口，那么可能上次还没有响应，下一次请求又来了。这样无意中增加了服务器的压力，而且对用户来说，也会造成卡顿，这不是用户和程序员想要的。节流和防抖大家应该都用过，但有一点我不明白，节流和防抖都是延迟执行，那么它们的区别在哪里？举例：vard1=document.getElementById('d1');varnum=0;varchange=function(){num++;d1.innerHTML=num;}...

原创 1、基于Vue项目的富文本vue-quill-editor的使用

安装：npm install vue-quill-editor -S全局挂载：// main.jsimport Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css' // import stylesimport 'quill/dist/quill.snow.css' // for snow themeimport 'quill/dist/qui

原创 什么是VUE全家桶

vue全家桶都有什么？全家桶，顾名思义，对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。注：此文章主要讲解vue-cli脚手架开发方式，主要介绍各插件安装方法及其功能特点，不介绍各插件的具体使用方式，具体使用方式详见其他详细介绍文章。一、vue-clivue-cli也叫脚手架，官方定义为Vue.js 开发的标准工具！相比scirpt标签引入，脚手架具有如下特点：1）、功能丰富对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-

转载 rem淘宝适配flexible.js

// 首先是一个立即执行函数，执行时传入的参数是window和document(function flexible (window, document) { var docEl = document.documentElement // 返回文档的root元素 var dpr = window.devicePixelRatio || 1 // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值 // 调整body标签的fontSize，fontSize = (12 * dpr).

原创 Vue秒杀倒计时插件vue2-countdown

基于vue2.0的活动倒计时组件 可以使用服务端当前时间 在倒计时开始或者结束的时候,可以自定义回调 文档：https://cgygd.github.io/vue2-countdown/ demo：https://cgygd.github.io/vue2-countdown/example/index.html安装：npm install vue2-countdown --save引入：//引入插件import CountDown from 'vue2-countdown'c.