编程开发 - 教程之家

编程开发

分类导航：HTML/html5 CSS JavaScript PHP Python Java IOS .NET R语言 Rust Android Go语言鸿蒙OS C类语言综合编程正则表达式

110浏览

0评论

Vue+Spring Boot简单用户登录(附Demo)

1 概述前后端分离的一个简单用户登录 Demo 。2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus3 前端3.1 创建工程使用 vue-cli 创建，没安装的可以先安装：sud...

2021-05-31 02:04:23

159浏览

0评论

Vue向后台传数组数据,springboot接收vue传的数组数据实例

用axios前台代码： let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this...

2021-05-31 02:04:21

173浏览

0评论

vue打包通过image-webpack-loader插件对图片压缩优化操作

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积step1：npm install image-webpack-loader --save-devste...

2021-05-31 02:04:20

134浏览

0评论

解决vue打包 npm run build-test突然不动了的问题

今天遇到一件很奇葩的事情输入npm run build-test 突然停在这不动了 what? 不动了？！后来google了一下大家都是人才运行一下这句话就动了！！npm config set registry http:/...

2021-05-31 02:04:19

80浏览

0评论

Vue3 响应式侦听与计算的实现

响应式侦听和计算有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 方法：它接受 getter 函数并为 getter...

2021-05-31 02:04:18

227浏览

0评论

解决vant的Toast组件时提示not defined的问题

按照官方文档引入全局Toast组件，在methods里面定义函数执行函数时产生了报错：//定义的函数handleClick(){ Toast('点击提示')}报错信息[Vue warn]: Error in v-on handler: "R...

2021-05-31 02:04:16

131浏览

0评论

vue 实现element-ui中的加载中状态

需要添加加载状态，调用下面方法即可//开启loadingconst load = _this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'...

2021-05-31 02:04:14

104浏览

0评论

在elementui中Notification组件添加点击事件实例

1. 官方文档2. 添加点击事件，传参handleClick() { let telNo = "1111", message = "22222", _this = this; //函数作用域问题 this.$notify({ title: "通知消息", position:...

2021-05-31 02:04:13

89浏览

0评论

VUE前端从后台请求过来的数据进行转换数据结构操作

我就废话不多说了，大家还是直接看代码吧`let label(){let _this = this;let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSizelet params ={offse...

2021-05-31 02:04:12

139浏览

0评论

使用Vant完成DatetimePicker 日期的选择器操作

效果展示：代码展示：<template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button> <van-field v-model="time...

2021-05-31 02:04:10

102浏览

0评论

在vue中给后台接口传的值为数组的格式代码

比如你要传的数组是在data中的return中的params中的Arrays。传值格式需要如下：{flag: 1, data: this.params.Arrays}如果要求是json格式，记得后面要加{headers:{'Content-Type...

2021-05-31 02:04:06

107浏览

0评论

vue 解决mintui弹窗弹起来,底部页面滚动bug问题

经过dom层层注释缩小反馈终于找到问题所在。问题经过我在弹起弹窗的时候，设置了popupVisible为true然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this....

2021-05-31 02:04:05

134浏览

0评论

vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

vue项目开发的过程中，如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话，可以封装一个自定义的指令。方法一、组件内代码如下： directives: { title: { inserted(el)...

2021-05-31 02:04:04

165浏览

0评论

使用Vant完成通知栏Notify的提示操作

效果：代码展示：<template>  <div id="notify"> <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button> </div></template>...

2021-05-31 02:04:03

122浏览

0评论

使用Vant完成Dialog弹框案例

效果展示：完整代码：<template>  <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-b...

2021-05-31 02:04:01

226浏览

0评论

Vue 解决在element中使用$notify在提示信息中换行问题

在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。实现方式如下：通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该...

2021-05-31 02:03:56

105浏览

0评论

VUE-ElementUI 自定义Loading图操作

需求：element ui loading图只能使用自己的loading图，但很多场景下，需要替换成自己的gif图虽然文档中有些， element-loading-spinner="el-icon-loading" 可指定自定义图但经测试，...

2021-05-31 02:03:55

76浏览

0评论

vue项目中使用rem,在入口文件添加内容操作

在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:<script> window.onload = function () { var setRem = function () { // UI设计稿的宽...

2021-05-31 02:03:54

103浏览

0评论

vue项目实现减少app.js和vender.js的体积操作

配置webpack中externals来减少打包后vendor.js的体积在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页...

2021-05-31 02:03:52

108浏览

0评论

vue 解决provide和inject响应的问题

官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。provide：Object | () => Object（一个对象...

2021-05-31 02:03:51

84浏览

0评论

Vue中nprogress页面加载进度条的方法实现

nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中，可以却不知道要加载多久，无期限的等待总是让人烦躁不安，所以我们希望能知道网页加载的进度，这...

2021-05-31 02:03:50

127浏览

0评论

解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机上不能上下...

2021-05-31 02:03:49

97浏览

0评论

vue的$http的get请求要加上params操作

vue GET传递参数要加上paramsthis.$http.get('/operation/customer/question/edits',{params:{id: 10}})另外说一句，现在VUE官方推荐使用axiosvue-resource不更新了补充知识：v...

2021-05-31 02:03:46

91浏览

0评论

vue 使用localstorage实现面包屑的操作

mutation.js代码：changeRoute(state, val) { let routeList = state.routeList; let isFind = false; let findeIdex = 0; //菜单栏和下拉的二级菜单 if (val...

2021-05-31 00:52:55

99浏览

0评论

适用于 Vue 的播放器组件Vue-Video-Player操作

如果h5的标签<vedio>不能满足你的需求，那就用这个组件Vue-Video-Player吧，也许可以覆盖到你的需求。<video-player class="video-player vjs-custom-skin" ref="videoPlay...

2021-05-31 00:52:54

86浏览

0评论

vue print.js打印支持Echarts图表操作

网上找的print.js做了修改，支持Echarts图表这里记录一下，不知道是哪家的代码了，我看都一样这里是看到了两个源码https://github.com/xyl66/vuePlugs_printjs/blob/master/print...

2021-05-31 00:52:53

120浏览

0评论

解决iView Table组件宽度只变大不变小的问题

示例：<Table class="my-table"></Table>打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值，而且在父元素变小的时候这个值并没有相应地变小，所以才会...

2021-05-31 00:52:51

100浏览

0评论

vue 授权获取微信openId操作

1、获取url中参数code；根据code 获取openId；调用后台接口获取openId 。参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842function getUrlKey...

2021-05-31 00:52:50

82浏览

0评论

vue+Element-ui前端实现分页效果

本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码，供大家参考，具体内容如下分页技术分页技术的概念分页就是将所有的数据分段展示给用户，用户看到的可能不是全部...

2021-05-31 00:52:48

118浏览

0评论

vue实现抽屉弹窗效果

本文实例为大家分享了vue实现抽屉弹窗效果的具体代码，供大家参考，具体内容如下以下代码比较简单。主要就是实现侧边弹窗而且不会影响页面操作的方式，求点赞！！！不多说直接贴代码。...

2021-05-31 00:52:47

87浏览

0评论

基于Vue+Webpack拆分路由文件实现管理

事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。当我们用 vue-cli 工具，创建一个新的 vue 项目时，就已经给大...

2021-05-31 00:52:46

103浏览

0评论

浅谈vue在html中出现{{}}的原因及解决方式

原因：浏览器渲染机制，解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。初始化vue的js写在页...

2021-05-31 00:52:45

119浏览

0评论

Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时，我们可以使用iframe去引用html页面，实现他们的交互首先我们可以再vue页面中使用标签引用html页面<template>...

2021-05-31 00:52:44

77浏览

0评论

Vue基于localStorage存储信息代码实例

一什么是localStorage对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStoragesessionStorage（临时存储）：...

2021-05-31 00:52:42

67浏览

0评论

Vue 实现拨打电话操作

我就废话不多说了，大家还是直接看操作吧~<p>联系电话：<a :href="'tel:' + item.phone" rel="external nofollow" >{{item.phone}}</a></p>补充知识：vue移动项目中如何设置点击...

2021-05-31 00:52:41

110浏览

0评论

VueCli生产环境打包部署跨域失败的解决

常见的跨域配置(/config/index.js):proxyTable: { '/api': { target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名 // secure: false, // 如果是https接口，需要...

2021-05-31 00:52:40

204浏览

0评论

在vue中嵌入外部网站的实现

利用iframetop:导航栏的heightleft:左侧菜单栏的widthsrc:右侧页面要嵌入的外部网站<template> <div> <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no"...

2021-05-31 00:52:39

173浏览

0评论

解决iview table组件里的固定列表格不自适应的问题

当在使用iview Table组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可columns: [ { title: '账户名', k...

2021-05-31 00:52:37

113浏览

0评论

Vue 列表页带参数进详情页的操作(router-link)

首先，仔细看文档！！！一点一点的踩坑过来的~~~这里介绍params和query两种方法1.用params传参列表页：<router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">（注意：用p...

2021-05-31 00:52:36

115浏览

0评论

详解vue修改elementUI的分页组件视图没更新问题

今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。
今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页...

2021-05-31 00:52:34

112浏览

0评论

vue+Element-ui实现分页效果

本文实例为大家分享了vue+Element-ui实现分页效果的具体代码，供大家参考，具体内容如下当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的...

2021-05-31 00:52:32

521浏览

0评论

vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

vuex数据改变，组件中页面不渲染相信许多vuex新手都会遇到这样的问题：vuex数据更新后，插件中使用数据的地方没有更新这样的代码data() { return { tableData: this.$store.stat...

2021-05-31 00:52:31

75浏览

0评论

Vue指令实现OutClick的示例

原始实现下面是两种常见的模态框的实现方式方案一：默认 click 都是放在冒泡阶段，只要在内容区域上添加 click 的阻止冒泡即可<div class="cover" @click="close"> <!-- 阻止冒...

2021-05-31 00:52:30

83浏览

0评论

Vue中使用JsonView来展示Json树的实例代码

前两天干活儿有个需求，在前端需要展示可折叠的Json树，供开发人员查看，这里采用JsonView组件来实现，它是一款用于展示Json的Vue组件，支持大体积的Json文件快速解析渲染，下面记录一...

2021-05-31 00:52:29

69浏览

0评论

Vue使用路由钩子拦截器beforeEach和afterEach监听路由

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总...

2021-05-31 00:52:27

60浏览

0评论

Vertx基于EventBus发送接受自定义对象

先看官方文档步骤:需要一个编解码器,看源码:可见内置了需要数据类型的实现,所以发送其他消息可以发送,但是如果发送自定义对象就需要自己实现编解码逻辑了一自定义编解码器...

2021-05-31 00:52:26

92浏览

0评论

vue 中使用print.js导出pdf操作

1.print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this....