HD243608836的博客

写项目时，发现 element 里的图标没有我需要的图标，两种情况：解决: 修改Element UI自带的小图标，替换成自己的首先找到那个自带的图标class，然后代码如下.is-active .menu_src { filter: drop-shadow(1000px 0 0 #fff); // 颜色写你需要的颜色 transform: translate(-1000px);} 效果： 阿里巴巴图标矢量库 : https://www.iconfont.cn/collections/ind

Refused to display '嵌套的网址' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

【代码】Vue种Ai对话框设计Demo。

这里target: 里边指向的都是后端server的地址 16000是我后端服务的端口 , 我这里websocket服务和普通的业务项目用的都是一个项目 所以都是16000端口。因为在本次测试的时候使用的是普通的ws方式连接 所以为了方便切换就写了两个websocket代理路由。env.development 文件和 .env.production 文件都加上这两行代码即可。前端websocket向后端发送数据使用方式。为什么要配置两个地址呢?

其实这里的也可以换成普通的标签，只需要给该指定好一个css即可。的方法，而不是我们想调用的原生click方法。（具体查看“@”在vue标签中的应用）其中el-card是自带的css样式，浏览器F12开发者模式可查。@click.native是在vue中，避免vue父模块调用成了vue成子模块中的。（普通元素类似input或button按钮不用。由于div不支持:focus伪类，可通过增加。="1"，直接使用:focus）属性使其支持css伪类。

ArrayBuffer 和 Blob一样，都是二进制数据的容器，而ArrayBuffer相比更为底层，他可以去操作去修改这些二进制值，这两者之间也是可以互转的。blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。对象用来表示通用的、固定长度的原始二进制数据缓冲区。

全局变量定义一个专用模块来配置全局变量，然后通过export暴露出去，在需要的组件引入global.vue// 定义一些公共的属性和方法consthttpUrl =// 暴露出这些属性exportdefaulthttpUrl,引入及使用script// 导入共用组件importglobalfromexportdefaultdata () {return//使用globalUrlglobalhttpUrl

vue的v-for是最后统一调用给子组件传值，而不是每次执行就调用传值一次！所以变量会在被传值到子组件之前，会被一直修改 list.length 次。而底层逻辑应该是就是“浅拷贝”变量，即引用地址都是指向那同一个地址。使用v-for，其中需要根据不同的item修改某个变量(this.xxx)，然后向子组件中传值，但是发现传到子组件中的。我们循环qsList，其中是我自定义的一个组件，想向该子组件中传值。每次都是新的局部变量。

①. 将函数作为另一个函数的参数使用，只需要在调用另一个函数时，将函数作为参数传递进去。另一个函数已经完成对传进来函数的调用。②. 同时需要注意的是：在js中，函数也是对象，所以是引用传地址，函数名就是指向该对象的地址，所以将函数作为参数的时候，只需要将函数名写入即可。特别说明：这里的函数作为另一个函数的参数使用，也就是闭包的使用，可以访问函数内部的变量。

el-tab-pane是每一个tabs内容的容器，这这里设置的高度才是跟屏幕高度一样的。不需要配置“class=...”，也不需要配置.el-tabs–card是外层。

不是说不可以修改父组件传递到子组件的值吗?有些时候子组件需要修改父组件传递过来的prop，要去改变父组件的状态的时候就需要使用aync。正常情况下，确实不可以去修改父组件传递给子组件中的值！但是有些时候我们又需要去修改父组件传递给子组件中的值，我们可以这样来做？它可以去更新父组件中的ishow,将它的值更改为false。有的同学会说：我不使用sync可以更改吗？sync修饰符可以双向绑定父子组件中的数据。点击子组件的按钮，也将子组件隐藏。点击父组件的按钮，隐藏子组件。我们的子组件中有这样一行代码。

是一款优秀的js拖拽库，支持IE9及以上版本IE浏览器和现代浏览器，也可以运行在移动触摸设备中，不依赖jQuery，支持AngularJSReactVue框架和任何CSS库，如bootstrapelementUI，可以用来拖拽divtable等元素。

(比如执行yarn upgrade vue时vue:2.6.5的包会下载2.6.5的包，vue:^2.6.5的包会下载2.6.10最新的包，如果yarn upgrade vue@版本号就会下载对应版本的包)，会按照语义版本控制规则（在下面会解释）下载最新的依赖包并且构建为依赖关系树，也就是把共有的部分提取出来。到代码托管平台是有争议的，因为提交了可能依赖会有地雷，不提交依赖关系可能会出错，一般来说是应该提交的。版本号的vue包（只限定于没有lock文件，有lock文件会根据lock中的路径下载对应版本）。

很多时候我们在打包。

这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。使用JavaScript来for循环标签的个数，循环的len为当前分页中数据项的个数-1。的JavaScript的for循环这里就不写了，现在vue或者小程序编程都带有。如果每一行的列数不固定，则上面文章中的其它方法均不适用，只能使用。当然如果懒得话，可以直接写10或20个。这个方法其实很简单，也很好理解，就是。这一个技巧来实现最后一行左对齐。，都可以做到这种效果。

但是有些人代码洁癖，看不惯这种空的占位的html标签，则可以试试一开始的两个方法，一是动态计算margin，模拟两端对齐，另外一个是根据列表的个数，动态控制最后一个列表元素的margin值实现左对齐。这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。

找了好久！，但是发现这样~

charts x轴 增加滚动条在option 配置项中添加 【 dataZoom 中配置 】 设置x轴滚动条 效果图： 动态拖动 以下参考代码dataZoom配置 官网写法option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, dataZoom: [{ type: 'slider', ..

tooltip: { trigger: 'item', // formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: function(params) { // 在此处直接用 formatter 属性 // console.log(params) // 打印数据 debugger return ` <div>KB编号：${params['data'].kb}</div&gt.

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~我的示例是在vue-cli搭建安装echarts依赖npm install echarts -S或者使用淘宝的镜像npm inst

oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字oninput =“value=value.replace(/[^0-9.]/g,’’)” //只能输入数字和小数oninput = “value=value.replace(/[^\d.]/g,’’)” //只能输入数字和小数value=value.replace(/[^-\d.]/g,’’);if(value<-180)value=-180;if(value>180)value.

一、删除 node_modules 文件夹二、修改package.json文件，修改name值三、重新安装依赖 cnpm install四、启动项目 cnpm run dev五、上面两步做完之后，运行build命令后，你会发现index文件的title没有改过来，这个时候要修改根目录下面的index.html文件的title，改好之后，vue文件的title就改过来了————————————————原文链接：https://blog.csdn.net/qq_22182989/arti

相当于如下（但只是通过该模块文件转发，并没有引入到该模块文件中，所以该文件中不能直接使用）：import Home from './home';export default Home;这是ES6模块导入导出语法，具体可以看看阮一峰关于es6的文档（export 与 import 的复合写法）：https://es6.ruanyifeng.com/#docs/module#export-%E4%B8%8E-import-%E7%9A%84%E5%A4%8D%E5%90%88%E5%86%9

npm install有以下几种方式：npm install moduleName # 安装模块到项目目录下npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。npm install --save moduleName # --save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。npm install --save-dev module

开发中有时候需要input只能输入数字，一般有两种方法：1.使用type=”number”这种一般会影响样式，所以不是很推荐；2.监听input输入，并使用正则表达式验证，若不是数字不能输入<el-input v-model="model.amount" type="text" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入总金额" />亲测有效，非常的好用，大家试试吧，这个解决方法一步到位，不用再写

一、场景：用户表——角色表，用户管理界面可以选择角色，并且每次初始化时候支持“回显”，如图：使用elementUI的复选框组合：el-checkbox-groupel-checkbox二、上代码：1. 整体结构（列表页和详情页）：2. detail页面的组件Info：<el-checkbox-group v-model="chooseRoleNames"> <el-checkbox v-for="(item,index) in totalR

虽然 Shiro 本身可以支持扩展 RememberMe 功能，但仅限于传统项目因为 Shiro 的用户信息是基于 Session 进行管理，在前后端分离的项目中无法实现 Session 状态的前后统一所以本文通过 JWT 对 Shiro 原生的 Session 控制进行替换，从而实现用户信息的前后传递及判断更多精彩更多技术博客，请移步 IT人才终生实训与职业进阶平台涉及资料一个已经实现的例子 JWT官网 JWT源码导入项目所需的依赖对于 SpringBoot 和 Shiro.

目录vue-cli 命令 项目结构 设置环境变量（一）vue-cli 命令1. vue-cli下载安装：vue-cli2:npm install vue-cli -gvue-cli3/cli4:npm install -g vue@cli2. 创建新项目vue-cli2:vue init webpack 2.0projectvue-cli3/cli4:vue create 3.0project或通过视图创建项目：vue ui3. 启动项目

.env——全局默认配置文件，无论什么环境都会加载合并 .env.development——开发环境下的配置文件 .env.production——生产环境下的配置文件注意：属性名必须以VUE_APP_开头，比如VUE_APP_xxx = "变量"文件是如何加载的？　　执行启动命令后会自动加载对应的环境，vue是根据文件名进行加载的，所以不要乱起名字，也不用专门控制加载哪个文件。　　如执行npm run serve，会自动加载.env.development文件。...

XMLHttpRequest.upload向后台上传文件时监听进度，主要使用的是XMLHttpRequest提供的upload方法，此方法会返回一个XMLHttpRequestUpload对象，用来表示上传进度 。 ——XMLHttpRequest.uploadFormData是XMLHttpRequest提供的一个新的接口，主要优点是可以异步上传二进制文件。 ——FormData具体操作如下页面结构及样式<input type="file" id="upload-fil...

Bug report（问题描述）当用户给一个元素（如按钮元素）添加v-waves指令后，如果用户再给元素添加一个click事件句柄，而且这个句柄在执行时触发了组件的更新，那么按钮的“波动”效果就会失效。Steps to reproduce（问题复现步骤）我用vue-element-admin项目master分支代码中的 src/views/table/complex-table.vue 页面中的一个search按钮作为示例，因为此处就有这个bug。给按钮元素添加v-waves指令：...

Vue项目, 将 DIV 以 PDF 的形式导出 1 <template> 2 <div class="btn" @click="downloadPdf">下载</div> 3 <div ref="pdf">我是一个要变为图片或PDF的div</div> 4 </template> 5 <script> 6 import html2canvas from 'html2canvas' 7 import .

目录（一）直接调用（二）、封装导出函数调用最近做项目中有一个导出excel表格的需求具体思路是：后端返回给我json数据，前端根据数据和具体的几项字段去导出excel表格，还有导出多个sheet，多页表格到一个excel表里面，具体思路 根据Export2Excel插件，并修改插件Export2Excel完成导出多页(多个sheet)的excel第一步：安装插件 依赖npm install file-saver --savenpm install xlsx --savenp

1，点击返回上一页<button @click="goback">goback</button>methods:{ goback(){} this.$router.go(-1)}2，点击跳转到/Foo2页面<button @click="ToLink1">goback</button>ToLink1(){ this.$router.push('/foo2') 最常用或者this.$router.push({name:'F.

1.新建js文件 utils.js,自定义方法let local = { say() { console.log(‘我是插件里面自定义的方法‘) }}export default { install: function(vm) { vm.prototype.$local = local }}2. mian.js引入插件，注入实例// 导入插件import utils from ‘./utils/utils‘Vue.u

一、定义变量，并全局使用原理：1. 单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。2. 在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用；3. 或者直接引入到需要的模块文件中使用；项目目录步骤1、新建global_variable.js文件，用于存放变量，示例如下：const baseURL = 'www.baidu.com'const token = '123456'co..

项目中,发现有多个页面的数据内容相同,只是请求数据的参数不同,就可以使用同一个组件来渲染　　这里的客户列表 / 我负责的 / 我参与的 都使用同一个组件,不同点在请求数据的参数　　可以看到,通过钩子函数,判断路由name,从而修改请求参数,来得到不同的数据内容　　这里需要注意三个地方:　　1.路由设置　　配置路由时,使用相同组件,但是要定义好各自的name 1 { 2 path: "customer_list", 3 component:

最近在做VUE路由跳转根据参数的值不同但是跳转的是同一个路由的功能。点击左边的目录，根据目录ID跳转不同的列表。如下图。路由跳转的代码：this.$router.push({path: '/RFIndex/resourceList', name: '资源列表', params: {id: 2}})也可以这么写this.$router.push({path: '/RFIndex/resourceList', params: {id: 2}})这两种其实都可以跳转到想要的路.

方法一：通过 watch 1 2 3 4 5 6 // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 1 2 3 4 5 6 7 8 9 10 // 监听,当路由发生变...

转载自：https://blog.csdn.net/adminguan/article/details/103592109给出的问题： 选项动态从后台获取，同时要实时获取到用户选中值的id select框有红，黄，蓝三个值，id分别为1，2，3 用户点击红，获取到红的id为1 用户点击黄，获取到黄的id为2 用户点击蓝，获取到蓝的id为3 问题步骤分为三步： 1、点击select框，发送请求到后台取到data值，动态...