![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
渊来有你
这个作者很懒,什么都没留下…
展开
-
setInterval循环定时请求接口工具类,添加到对应组件中接口处
在一个数据可视化页面中,请求接口的数据随着时间的增长是一直变化的,页面不可能只请求一次接口,所以需要大量的接口进行每隔一段时间自动请求更新数据,这样就需要一个工具类直接实现原创 2022-11-16 20:11:54 · 1065 阅读 · 1 评论 -
影刀RPA自动化学习和部分问题解决方式
1.安装和基本概念官网地址https://www.winrobot360.com/chrom插件问题和入门文档https://www.winrobot360.com/yddoc/language/zh-cn/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/%E7%BD%91%E9%A1%B5%E8%87%AA%E5%8A%A8%E5%8C%96%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/chrome%E5%AE%89%E8%A3%85%E6%8F%原创 2022-05-25 13:53:07 · 6608 阅读 · 1 评论 -
vue+Echars移动端可视化页面
实现代码:<template> <div class="wrapper"> <span style="color:#fff;float:left;" @click="$router.back(-1)"><i class="iconfont icon-jiantou" style="margin-top: 10px;margin-left:10px;" ></i></s.原创 2022-05-20 20:05:02 · 22565 阅读 · 0 评论 -
vue实现全屏只显示内容不显示导航条和退出全屏调用事件
先说一下需求:要求在第一个页面点击全屏按钮进入全屏或者第二个新的页面全屏,并且按F11或esc退出全屏回退到第一个小屏页面失败的尝试:显示尝试利用原生来实现,但是发现退出全屏时,我们想在F11上面添加一些事件(比如退回上一页面;添加弹窗等操作)无法实现,原因是浏览器不允许我们自定义F11退出全屏按键,因为如果可以自定义的话,那么有恶意的方式让用户点击全屏进去,然后我们去禁用这个全屏按钮那么岂不是用户没有办法退出了正确如下:利用screenfull插件直接去监听页面的大小改变,不用去监听按键事件首.原创 2022-02-10 13:09:39 · 2231 阅读 · 0 评论 -
vue-seamless-scroll +element表格获取后台数据无法滚动或弹回顶部
今天出现一个bug,当在vue-seamless-scroll中把数据放入wholeflowtableData: [],没有问题,可以正常轮播。但是当动态获取后端数据时缺会出现弹回顶部的问题问题原因:由于拿到后端数据后我们用push方法一个个push进wholeflowtableData,导致它高度的获取出现问题,从而div发生溢出,无法进行滚动解决方案:1.定义一个新的数组arr去接收,然后再利用拷贝,将arr这个数组的内容一次性的去拷贝到wholeflowtableData当中,就不会出现如上原创 2022-01-08 16:39:56 · 2518 阅读 · 0 评论 -
json-server模拟mock数据
第一步安装npm i json-server -g在view内新建api文件夹 view/api/getapi,写入接口export const rightscroll = () => get('http://localhost:3000/rightscroll')export const leftscroll = () => get('http://localhost:3000/leftscroll')export const ce = () => get('ht..原创 2022-01-08 16:20:43 · 503 阅读 · 0 评论 -
vue自定义移动端底部导航栏
完成主要由三部分组成1.在components中内写好第一部分代码2.新建四个文件用于底部的切换跳转即可,我的是3.在router配置路径的跳转第一部分:在components中tabbar组件代码如下,图片路径换成自己的,可以自己添加底部数量<template> <div> <div id="tab-bar"> <div class="tab-bar-item" @click="homeClick()">原创 2021-07-29 16:19:59 · 1366 阅读 · 0 评论 -
vue实现同一个页面某一位置进行不同组件切换展示效果
目录结构如图,在主页面home点击旁边导航切换不同组件在同一页面效果2、动态路由<component:is="componentnext"></component>用于切换组件,改变componentnext的组件名字即可,利用了动态绑定:class来指定此组件时此导航选中颜色的变化2.代码即注释如下<template> <div> <!-- <Top-head></Top-head> --> .原创 2021-07-27 15:13:08 · 6740 阅读 · 0 评论 -
vue直接根据遍历v-for实现导航栏的下拉导航
<template> <div class="head"> <div class="firstHead"> <div class="ul"> <div class="li List" v-for="item of pageData.page.List" :key="item.id" > <a>{{ it原创 2021-07-26 11:15:32 · 1509 阅读 · 1 评论 -
利用swiper实现轮播图
vscode中实现轮播图首先在终端下载组件npm install --save swiper2.然后在script中引入<script> import Swiper from 'swiper' import 'swiper/dist/css/swiper.min.css' 3.在html中按需求使用<div class="swiper-container"> <div class="swiper-wrapper"> &原创 2021-03-07 19:21:36 · 980 阅读 · 0 评论 -
vue实现答题功能一页一题并最后得出分数
实现效果如图每点下一题会切换题目,知道最后一题变为完成答题,然后进入答题完成页面显示分数2.template代码<template> <div class="second"> <div class="back" style="padding-top:10px" @click="$router.back(-1)"> <i class="iconfont icon-jiantou" style="margin-left: 10p.原创 2021-05-22 20:06:19 · 4728 阅读 · 4 评论 -
前端根据token控制路由跳转(配置路由拦截全局前置守卫)
在配置路由中需要拦截的加上 meta:{ requiresAuth : true}import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [ { path:"/", name:"Home", component : ()=>import("../views/Home/Home.vue") meta:{ requiresAuth.原创 2021-05-22 19:15:44 · 981 阅读 · 2 评论 -
保存用户登录状态token,以及退出清除登录状态(node/后端设置token返回实现完整流程)
利用vuex中store进行进行保存代码如下import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: {//状态从本地获取 token: localStorage.getItem("token") || '' }, //同步修改state里面的值 mutations: { //包含更新多个state函数的对象 SET_TOKE.原创 2021-05-22 18:56:51 · 13683 阅读 · 0 评论 -
vue中router-link携带点击参数进去到对应页面
在页面需要点击的div设置router-link属性跳转页面,其中query负责传参数,我这里传的是咨询的id <router-link :key="item.id" :to="{ path: '/detail', query: {info_id: item.id } }" v-for="item in List" > <div> <img :src="item.img" /&g.原创 2021-05-22 16:33:57 · 664 阅读 · 0 评论 -
vue项目创建后配置请求头request
在src下新建文件夹request.js文件来设置统一的请求头代码如下import axios from 'axios'// axios.defaults.withCredentials=trueconst service=axios.create({ baseURL : "http://192.168.123.44:8089", //配置请求超时时间 timeout: 5000})//使别的地方可以调用export default service.原创 2021-05-22 16:00:03 · 1067 阅读 · 0 评论 -
vue实现头像更改并刷新功能
1.整体代码 <div><cube-upload ref="upload" v-model="files" :action="action" @files-added="addedHandler" @file-error="errHandler"> <div class="clear-fix"> <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"&原创 2021-04-23 17:11:34 · 2891 阅读 · 0 评论 -
vue前端遍历后端传过来数据步骤
首先需要在api中配置与后端一样的接口如我遍历的列表接口如下//赛事列表接口export const getVideoList = (token)=> axios.get("/api/v1/pri/item/result",{ params:{//因为后端需要传过去一个token才可以不被拦截所以加上了,看各自情况,可以不加 "token":token }})params是我设置的请求头,token是放入请求头的数据,如果后端不需要可以不加2.在我们的页.原创 2021-04-17 14:19:49 · 6615 阅读 · 1 评论 -
利用cube-tab-bar 搭配cube-ui的组件(cube-slide ,cube-scroll)来做出App屏幕切换,Tab跟随页面变化效果
擦原创 2021-04-11 17:10:50 · 704 阅读 · 0 评论 -
vue实现点击某个div出现和隐藏内容功能
1.首先在所需要隐藏或显示的内容div加v-show,代表判断是否显示或隐藏<div v-show="shopShow">内容</div>3.我这里是在打开内容中有一个 × 号来关闭显示效果,在iconfont图标的div加入一个点击事件<div @click="toggleShopShow"> <span class="iconfont icon-close"></span></div>3原创 2021-03-27 18:48:46 · 17315 阅读 · 3 评论 -
在vscode创建vue框架以及目录结构完整性创建(css,vue.config.js)
node安装完成如何在vscode创建vue快速步骤首先vue -V查看版本号依此输入以下指令npm i -g @vue/cli-init 用来下载脚手架,以便可以创建项目 vue init webpack my-vue //意思为创建一个名字叫my-vue的项目 然后第一个Name代表创建项目的名字 Project description代表介绍的意思,直接跳过 Author 表示作者的名字,回车跳过 以下一直到install vue-router 输入y 其他输入n原创 2021-03-04 20:51:51 · 1082 阅读 · 1 评论