202203-09 Vue+SpringBoot前后端分离中的跨域问题 在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议、域名、端口号不同等),导致不能正常调用api接口,给开发带来不便。封装api请求importaxiosfrom'axios'//axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束const$http=axios.create({baseURL:'',timeout:1000,//heade... 继续阅读 >
202203-01 vue时间线组件的使用方法 本文实例为大家分享了vue时间线组件的具体实现代码,供大家参考,具体内容如下效果vue-时间线组件(时间轴组件)代码<template><ulclass="timeline-wrapper"><liclass="timeline-item"v-for="tintimelineList":key="t.id"><divclass="timeline-box"><divclass="out-circle"><divclass="in-circle"></div></div><divclass="long-line"></div>... 继续阅读 >
202203-01 Vue向下滚动加载更多数据scroll案例详解 vue-infinite-scroll安装npminstallvue-infinite-scroll--save尽管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入importinfiniteScrollfrom'vue-infinite-scroll'Vue.use(infiniteScroll)实现范例官方给的代码范例是假设你在根组件写代码,实际上我们肯定是在子组件里写代码,所以代码也需要略作修改,下方只列有用的代码片段:<divv-infinite-scroll="loadMore"infinite-scroll-disabled="busy"infi... 继续阅读 >
202202-12 vue实现时间倒计时功能 本文实例为大家分享了vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下需求:做一个剩余支付时间倒计时的效果效果图:代码:<template><div>剩余支付时间:{{count}}</div></template><script>exportdefault{data(){return{count:'',//倒计时seconds:864000//10天的秒数}},mounted(){this.Time()//调用定时器},methods:{//... 继续阅读 >
202202-11 vue 自定义icon图标的步骤 ant-design-vue自定义使用阿里iconfont图标\第一步:从iconfont获取项目js链接第二步在需要引用iconfont的页面处加入在Deom中使用:<a><Fontstype='icon-zutaishitu'/></a>import{Icon}from‘ant-design-vue';constFonts=Icon.createFromIconfontCN({scriptUrl:'//at.alicdn.com/t/font_2731654_ew9hs5g22se.js'})exportdefault{components:{Fonts}}效果:到此这篇关于vue自定义... 继续阅读 >
202202-10 Vue Router根据后台数据加载不同的组件实现 目录实际项目中遇到的需求有一些不好的实现方式个人感觉比较好的实现方式功能已实现,但我又开始了新的思考最终方案——高阶组件实际项目中遇到的需求同一个链接需要加载不同的页面组件。根据用户所购买服务的不同,有不同的页面展现。有一些不好的实现方式直接把这几个组件写在同一个组件下,通过v-if去判断。如果这么做的话,甚至可以不使用vue-router,直接把所有组件,都写在一个文件里面,全部通过v-if判断,也是可行的。... 继续阅读 >
202202-10 Vue+tsx使用slot没有被替换的问题 目录前言发现问题解决后记前言最近自己准备写一个UI组件,想对vue的2.x、3.x可以更深层次的掌握在架构时,准备全部使用tsx书写组件但遇到了tsx中使用slot的问题发现问题先写了一个基础的card组件:card.tsx:importComponentfrom'vue-class-component'importVanUIComponentfrom'@packs/common/VanUIComponent'import{VNode}from'vue'import{Prop}from'vue-property-decorator'import{CardShadowEnu... 继续阅读 >
202202-10 vue 防止多次点击的实践 一般点击事件会分不同的情况进行消息提醒,如果不做处理,短短几秒弹出很多条提示信息,就会很烦,比如:那要怎么控制这个提示信息只能出现单条呢再点击事件的方法最前面加上定义变量hasRemind来控制是否执行点击事件里的相应操作当用户第一次点击的时候,hasRemind=false,此时,进入到第二个if语句,讲hasRemind的值改变为true,并且在3秒后再将hasRemind的值改为false,这是情况下,用户可以正常进入到点击事件里的所有流程当... 继续阅读 >
202202-10 Vue计算属性实现成绩单 本文实例为大家分享了Vue计算属性实现成绩单,供大家参考,具体内容如下代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>成绩单统计</title><scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><styletype="text/css">.gridtable{font-family:verdana,arial,sans-serif;font-size:11px;color:#333333;border-width:1px;border-color:#666666;... 继续阅读 >
202202-10 基于Vue方法实现简单计时器 Vue简单的计时器,供大家参考,具体内容如下原理:setInterval来每隔1s(可设置的时间间隔)运行一次自增方法,clearInterval来让持续运行的自增方法停止,来达到计时器的功能。Vue部分,利用到Vue实时刷新视图的功能,来将自增变量的值展示在前端。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Time</title><scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script></head><body><divid... 继续阅读 >
202201-22 Vue-cli框架实现计时器应用 技术背景本应用使用vue-cli框架,并使用了自定义组件(将按钮拆分成单独的组件)和vue模板。使用说明开始正计时:点击工具栏的“开始正计时”按钮即可,快捷键为"Enter"键。开始倒计时:在输入框内写入时间后,点击“开始倒计时”按钮,即可开始倒计时。暂停计时器:点击“暂停计时器”按钮即可暂停。清空正/倒计时:点击此按钮,计时器便会回到初始状态,等待新的计时。重新再计时:点击此按钮,计时器便会重新开始此次计时。... 继续阅读 >
202201-22 使用vue实现计时器功能 本文实例为大家分享了vue实现计时器功能的具体代码,供大家参考,具体内容如下首先我们要知道setTimeout和setInterval的区别setTimeout只在指定时间后执行一次,代码如下:<script>//定时器异步运行functionhello(){alert("hello");}//使用方法名字执行方法vart1=window.setTimeout(hello,1000);vart2=window.setTimeout("hello()",3000);//使用字符串执行方法window.clearTimeout(t1);//去掉定时器</sc... 继续阅读 >
202201-12 vue.js中methods watch和computed的区别示例详解 目录前言介绍一、作用机制上二、从性质上三、watch和computed的对比四、methods不处理数据逻辑关系,只提供可调用的函数五、从功能的互补上看待methods,watch和computed的关系六、利用computed处理watch在特定情况下代码冗余的现象,简化代码总结computedwatch前言这篇文章主要简述vue中的watch和computer区别,还有methods首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~,哈哈哈哈哈不开玩笑了,截下来进入正题。介绍m... 继续阅读 >
202201-12 vue.js管理后台table组件封装的方法 目录问题分析为什么封装封装的内容都有哪些封装table组件确认数据格式封装组件封装全局组件table组件封装分页组件封装数据定义封装总结最近开了新的项目,简单说了自己的table封装。问题分析为什么封装首先为什么封装,是因为追求技术吗,不,是因为懒,不想一直的去粘贴复制代码,所以就想把table封装下,可以在创建新的table的时候,只需要填充数据就行了。封装的内容都有哪些主要有两个,一个是table组件,一个是分页组件搞清楚... 继续阅读 >
202201-12 vue使用GraphVis开发无限拓展的关系图谱的实现 1、去GraphVis官网下载对应的js,新版和旧版的js有所不同,看自己需求引入旧版还是新版(GraphVis官方网址:http://www.graphvis.cn/)visgraph.min.js(基本配置js)visgraph-layout.min.js(配置布局js)2、在需要的vue文件引入js文件importVisGraphfrom'@/assets/js/GraphVis/old/visgraph.min.js'//自己对应的js文件位置importLayoutFactoryfrom'@/assets/js/GraphVis/old/visgraph-layout.min.js'//自己对... 继续阅读 >
202201-12 vue实现简易计时器组件 在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,刚最近基于业务需求,需要实现一个累加通话时长的计时器,这时候就需要定时器登上我们的代码舞台了,其实对于计时器,它的原理就是通过定时器来实现的,那么在写业务需求之前,我先说说关于定时器的一些知识。window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。在Javascript中,代码一般都是同步执行的,但定时器却是异... 继续阅读 >