前端
昨夜太平长安888
愿你我既可以朝九晚五,也可以浪迹天涯;愿你我既可以拈花把酒,也能围炉诗书茶。
展开
-
VUE3项目搭建【vue-cli 及 vite】
第一种:通过 vue-cli 脚手架进行项目搭建:VUE3项目创建对VUE-cli的版本是有限制的,版本必需在 4.5.0以上才可以我们可以在 cmd 窗口 输入 vue -V 来进行查看如果版本不对的话可以进行版本升级:npm install -g @vue/cli建议以下方式:1.通过config命令npm config set registry https://registry.npm.taobao.orgnpm info underscore (如果上面配置正确这个命令会有字原创 2021-08-25 14:09:34 · 380 阅读 · 0 评论 -
js立即执行函数
一:什么是立即执行函数?声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;立即执行函数的创建步骤,看下图:二:立即执行函数的写法:有时,我们定义函数之后,立即调用该函数,这时不能在函数的定义后面直接加圆括号,这会产生语法错误。产生语法错误的原因是,function 这个关键字,既可以当做语句,也可以当做表达式,比如下边://语句function fn() {};//表达式var fn = function (){};转载 2021-08-06 16:29:41 · 10333 阅读 · 0 评论 -
vue input输入框实时搜索
废话不多说先看效果:代码如下:<template> <div style="padding-left: 3px; margin-top: 3px"> <!-- 搜索框 --> <div class="input-warp"> <input class="input" v-model="keyWord" type="text" placeholder="输原创 2021-07-29 17:26:07 · 931 阅读 · 0 评论 -
vue全局修改字体样式(修改成苹方)
1.首先你要先下载你需要的字体(这里已苹方为例)2.在你的项目 src 文件下创建一个文件夹里面有两个文件, 一个是你需要的字体的文件,一个是 css 样式文件3.其中 css 文件里面设置一下样式:@font-face { font-family: 'PingFang'; src: url('./PingFang.ttf'); font-weight: normal; font-style: normal;}4. 在 app.vue 文件中引入字体,全局修改原创 2021-07-20 17:50:25 · 6198 阅读 · 3 评论 -
element-upload 上传图片限制文件格式、大小以及隐藏上传框
废话不多说 先看效果代码如下:<template> <div> <div> <el-upload class="avatar-uploader" :action="upUrl" :on-success="handleAvatarSuccess" list-type="picture-card" :before-upload="beforeAvatarUplo原创 2021-07-13 17:15:54 · 1384 阅读 · 0 评论 -
Vue项目 封装 axios请求 (直接复制可用)
首先先在你的项目中安装 axios$ npm install axios安装完成之后可以在 package.json 文件中看到然后在项目 src 文件夹下创建一个文件来进行请求的封装然后 request 文件是对 axios 的处理 ,里面包含 请求头的配置 已经请求拦截和响应拦截相关的一些配置,api 文件夹主要就是 对接口的封装。项目中用到的接口 都可以写道这里面1. 先看 request 文件代码如下:(当然这写注释可以删掉)// 这是一个封装请求接口的文件import ax原创 2021-07-11 19:03:24 · 271 阅读 · 0 评论 -
Echarts 渐变折线图
图例:代码:<template> <div class="policPic"> <div id="chart_example" ref="chart_example"></div> </div></template><script>export default { data() { return {}; }, created() {}, mounted() {原创 2021-01-29 11:51:26 · 453 阅读 · 0 评论 -
VUE项目中使用 Echarts data Zoom缩放功能
看实例:data zoom:有inslide和slide两种dataZoom,也分X,Y轴dataZoom:[ { type:"slider",//slider表示有滑动块的, show:true, xAxisIndex:[0],//表示x轴折叠 start:1,//数据窗口范围的起始百分比,表示1% end:20//数据窗口范围的结束百分比,表示20%坐标 }, { .原创 2021-01-29 09:45:43 · 2375 阅读 · 1 评论 -
CSS3 图片旋转
项目中需要的效果,外面和里面的正转,中间的反转,看效果:图片:直接贴代码: <div class="dataContent"> <div class="classPerson"> <div class="personTitle">当前教室人员情况</div> <div class="imgBox"> <img s原创 2021-01-28 16:59:05 · 203 阅读 · 0 评论 -
vue项目如何实现每隔多长时间请求一次接口???
在实际项目中我们经常需要实现轮询-每隔一段时间请求一次接口刷新数据window.setInterval(() => {setTimeout(() => {///调取接口}, 0)}, 30000)具体秒数看需求而设定,这里先设定30秒(setTimeout是自带清除定时器)在vue项目中我们直接在 created(){} 生命周期中写就可以了 created() { this.currentTime(); this.getRoleList();原创 2021-01-27 13:22:29 · 6547 阅读 · 1 评论 -
关于VUE + Element 侧边栏页面刷新后不高亮显示的问题
写后台管理系统 我们会经常用到element,侧边栏导航的时候路由跳转没有问题 但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了,针对这个问题特别提出以下见解:直接贴代码:<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#333"原创 2021-01-25 09:26:33 · 1038 阅读 · 0 评论 -
VUE + Element-UI 使用el-table 如何实现表头文字加文字说明
先看效果:当鼠标放到“❓”上面是,弹出一个小框进行提示:代码如下:给 el-table-column 添加:render-header="renderHeader"然后在methods 方法中这样写: // 表头增加提示 // render 事件 renderHeader(h, { column }) { return h("div", [ h("span", column.label), h( ...原创 2021-01-21 18:19:38 · 3360 阅读 · 0 评论 -
VUE + element使用 el-table 组件实现不同的状态值显示不同的颜色?
先看想要的效果:因为现在从后台请求的数据都是离线的。所以都是红色,如果有在线的 ,字体需要变成绿色直接代码附上: <el-table-column prop="temperatureStatus" label="状态"> <template scope="scope"> <span v-if="scope.row.temperatureStatus == '正原创 2021-01-21 18:10:14 · 2548 阅读 · 0 评论 -
css,图片和文字在父元素垂直居中
css,图片和文字在父元素垂直居中,且图片和文字在中线对齐排列的几种方式一,用flex的副轴来垂直居中对齐1.副轴(由上到下)设置居中对齐(align-items: center;)即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .原创 2020-12-09 10:33:46 · 1008 阅读 · 0 评论 -
vue项目 手撸全屏遮罩层
<template> <div> <div id="mask" v-show="isPay"> <div class="mask_img"></div> </div> <button @click="mask()">11111</button> </div></template><style scoped>#mask { .原创 2020-11-27 11:05:39 · 983 阅读 · 0 评论 -
VUE中使用sessionStorage或者localStorage存取对象或者数组时会显示[object object]
VUE如果直接使用sessionStorage.setItem和sessionStorage.getItem来进行存取对象的话,不能正常使用该对象,并且在Application的Session Storage中会显示[object object]解决方法:转换为json格式进行存取var ary = [1,2,3]var json = { x:1, b:2}存储://存储sessionStorage.setItem('arr',JSON.stringif原创 2020-11-06 16:28:26 · 5064 阅读 · 0 评论 -
vue 点击键盘回车键和点击按钮,实现登录功能
欢迎各位看官大佬光临,麻烦各位文章末尾一键三联,你的支持是我坚持下去的动力,谢谢!!!在项目中我们想要实现点击按钮或者直接点击键盘回车键实现一键登录该怎么做呢?我们可以给登录按钮绑定两个点击事件:(代码如下)<el-button type="primary" @click="login" @keyup.enter="login">登录</el-button>login 是直接点击按钮的登录事件 methods: { login() { c原创 2020-11-03 11:12:49 · 9615 阅读 · 1 评论 -
原生JavaScript如何实现后台管理系统主题切换功能?
在项目中我们总会遇到,可以切换主题的项目,比如这样:当用户选择主题切换,选定某一主题之后,切换到相应主题的样式文件,而且在刷新页面的时候,样式依旧生效,而不是仅次于当前页面,那怎么实现这种功能呢?我们可以把用户点击之后的样式文件通过生命一个变量将其存到本地,当页面刷新进入新页面之后,调用刚刚切换的样式文件,就可以实现这种效果(缺陷就是:会有短暂的留白,望大神指教)附上代码:link css样式文件正常引入即可html(部分) <li ...原创 2020-10-26 17:16:17 · 1387 阅读 · 0 评论 -
VUE中如何给v-for循环出来的元素设置不同的样式
效果图:1. 我们可以给要循环的盒子动态绑定class名 并且传入一个数组 <div class="AllPeople" v-for="(item , index) in rankingData" :key="index" :class="sstt[index]"> <div class="inner"> <span class="innerContent">TOP1告警区域 {{item.area}}<.原创 2020-10-14 09:31:23 · 3813 阅读 · 1 评论 -
Element-UI 项目中 Pagination 分页如何使用 ???
先看效果:应用场景: 一般分页功能多用于一些数据量较大的信息展示页面,通过分页可以设置每页的显示数量。多用于和el-table结合使用!属性参数 说明 类型 可选值 默认值 small 是否使用小型分页样式 boolean — false background 是否为分页按钮添加背景色 boolean — false page-size 每页显示条目个数,支持 .sync 修饰符...原创 2020-10-09 15:06:15 · 7923 阅读 · 0 评论 -
vue + axios + input实现图片上传 以及 文件上传及下载功能
图片上传:html部分<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update($event)"/>axios的post请求,发送form数据部分,这样就可以无刷新的提交form数据到后台 methods: { // 图片上传 update(e) { let file = e.target.files[0原创 2020-09-27 14:48:42 · 1860 阅读 · 0 评论 -
重学 JavaScript 数组
什么是数组? 数组是一种特殊的变量,它能够一次存放一个以上的值。数组的类型可以是任意类型!!!如何创建数组?(new Array) 1.常规方式var arr = new Array(2); // 创建一个长度为3的数组! 前面的[0][1][2],表示的是索引arr[0] = 1;arr[1] = 2;arr[2] = 3; ...原创 2019-09-30 17:09:42 · 378 阅读 · 0 评论 -
VUE 项目手写穿梭框
项目用到了穿梭框这个功能,刚开始用 Element-UI 组件库来写,没有达到预期的效果,于是就自己手撸写了一个;先看效果:代码附上: <!-- 绑定设备弹窗 --> <el-dialog title="绑定定位触发器" :visible.sync="jobsBoundPopup" width="30%" center> <!-- 穿梭框 --> <div class="row"> <原创 2020-09-24 18:28:01 · 1390 阅读 · 1 评论 -
H5中的video标签使用
1,下面是一个播放视频的最简单样例(controls属性告诉浏览器要有基本播放控件)<video src="hangge.mp4" controls></video>2,通过width和height设置视频窗口大小<video src="hangge.mp4" controls width="400" height="300"></video>3,预加载媒体文件设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒..转载 2020-09-07 13:36:19 · 1550 阅读 · 0 评论