- 博客(54)
- 收藏
- 关注
RSS订阅原创 在vue中使用Ant Design日期、时间控件禁用之前日期时间
一、想要的效果二、实现步骤1、引入日期、时间组件代码<a-date-picker @change="getSwitchData" :disabled-date="disabledDate" format="YYYY-MM-DD" :showToday="false" v-model="schedulerForm.schedule_createDate" /><a-time-picker :disabledHours="getDisabledHours" :disabledMin
2021-12-16 17:19:53
1779
原创 js时间格式
一、js 获取当前时间<script> var nowTime = new Date() var materialid = Date.parse(new Date()) const month = nowTime.getMonth() + 1 < 10 ? '0' + (nowTime.getMonth() + 1) : nowTime.getMonth() + 1 const day = nowTime.getDate(
2021-12-16 16:55:04
234
原创 js 数字格式化函数（千分位，保留几位小数，四舍五入）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2021-11-05 16:58:47
404
原创 css视频作为背景
一、效果二、直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2021-09-26 17:01:30
2128
原创 vue实现数字翻页动画
一，看效果二、实现步骤1、新建翻页组件scrollNumber.vue<template> <div class="count-flop" :key="compKey"> <div :class="item != '.' && item != ',' ?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
2021-09-26 15:38:21
2986
1
原创 vue中使用transition动画
一、淡入淡出动画效果二、代码实现注意事项：要保证key的唯一性<template> <div class="beenDone"> <transition name="slide-fade"> <div :class="sumShow === true ? `box_echart` : `box_tree`" :key="keyNum" ></div> </tr
2021-09-08 17:50:32
280
转载 用echarts实现柱形图、折线图、堆积图的闪烁效果
一：看效果二：代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/
2021-08-23 16:57:57
693
原创 在vue中，echarts多个图表不能自适应缩放问题
一、问题现象二、解决后的现象三、代码注：关键代码点window.addEventListener("resize", function () { myChart.resize(); });<template> <div class="box"> <div class="recentDocument" id="recentDocument" style="width: 100%; heig
2021-08-13 16:34:28
1209
原创 在vue中写进度条
一、效果图二、实现代码progress值，代表百分百的进度<template> <section> <div class="box"> <div class="mo" :style="{'--progress':-progress+100+'%'}"></div> <div class="line-box"> <i></i> <i class="l
2021-08-11 17:58:05
2199
2
原创 echarts中插入本地图片
一、看效果二、实现步骤使用graphic属性graphic: { elements: [ { type: "image", style: { image: "/static/img/monitor-screenView/PUE.svg", width: 40, height: 40,
2021-08-11 17:49:22
6764
原创 向对象中添加属性
1、方法一在普通js中<script> var obj = {} this.obj.name = '123' this.obj.age = 12 console.log(obj, '输出对象obj') </script>效果如图：2、方法二在vue中this.$set(对象,‘字段名’,值)注：字段名用引号 this.$set(this.obj, 'name', '张三') th
2021-08-11 10:53:21
9565
原创 element封装多级表格
一、看效果二、实现步骤1、创建文件夹2、MyColumn.vue文件<template> <el-table-column :prop="col.prop" :label="col.label" align="center"> <template v-if="col.children"> <my-column v-for="(item, index) in col.children" :key=
2021-08-02 11:21:40
451
原创 js设置、获取localStorage
一、设置// 设置localStorage setLocalStorage() { var userName = '123123' localStorage.setItem('userName', userName) }二、获取// 获取localStorage getLocalStorage() { var getUserName = localStorage.getItem('userName')
2021-08-02 11:04:12
7506
原创 获取js函数执行时间
一、输出当前函数的执行时间二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-08-02 10:49:04
459
原创 el-autocomplete实现全模糊搜索
一、element文档里的效果二、想要的效果三、实现步骤1、原文档里的代码createFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; },2、修改后的代码createFilter(queryString)
2021-07-28 15:52:12
715
1
原创 以post的方式发请求，传参在url中
一、想要的效果http://2o66y73190.wicp.vip/sbase/list?id=111二、实现步骤1、在封装接口中export function sbaseViewData (data, id) { return request({ url: '/sbase/list?id=' + id, method: 'post', data })}2、请求接口时const value = { id: id }
2021-07-28 15:41:37
5955
原创 echarts图表自适应浏览器、盒子宽高
一、出现的问题二、想要的效果三、实现步骤1、在html中，一定要写宽高100%<div id="main" style="width: 100%; height:100%;"></div>2、在methods中写图表函数3、关键的一步调用echartsresize方法window.onresize = function () { myChart.resize() }4、在mounted里调用methods里图表方法
2021-07-28 11:23:21
945
原创 echarts鼠标悬浮显示数据位置设置
一：出现的问题二：想要的效果三：实现步骤1、在echarts图表配置项里添加代码tooltip: { trigger: 'axis', position: function (point, params, dom, rect, size) { // size为当前窗口大小 if ((size.viewSize[0] / 2) >= point[0]) {
2021-07-28 11:09:53
5611
原创 解决elementui出现展开后子菜单宽度多出1px问题
一：问题现象二：解决办法注：在css中加上.el-menu { // 解决1px elementui出现展开后子菜单宽度多出1px问题 border: none; border-right-width: 0; }三：解决后效果
2021-07-28 11:01:47
1318
2
原创 刷新高亮当前页面导航
一：效果注：在第二个导航上，刷新当前页，仍然高亮二：实现步骤1、在html上定义路由变量:default-active="urlActive"2、在data中定义变量urlActive: '',3、在mounted函数里写方法mounted() { this.urlActive = this.$route.path }...
2021-07-28 10:28:17
209
原创 修改element-ui远程搜索的下拉菜单距离
一、问题现象二、代码中修改<style lang="scss"> .el-popper[x-placement^=bottom], .el-select-dropdown { margin-top: 5px; }</style>三、效果
2021-05-18 17:34:55
766
1
原创 vue移动端自适应
1、vue ui创建项目2、选择基本配置项3、运行项目4、新建rem.js文件// 基准大小const baseSize = 32// 设置 rem 函数function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fo
2021-04-22 21:24:14
4360
11
原创 右键以vscode方式打开
一：桌面上新建code.reg文件，右键以文本的形式编辑二：复制以下文件（注意把文件路径修改成自己的vscode路径）Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\VSCode]@="Open with Code""Icon"="C:\\Users\\Owner\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe"[HKEY_CLASSES_ROOT\
2021-02-19 09:26:44
733
原创 前端解决跨域问题——反向代理
一：问题现象二：去掉request.js里的基准url地址三：配置vue.config.js文件四：在api里封装接口五：在vue文件中使用接口六：反向代理设置成功后
2021-01-08 16:06:32
1270
原创 element下拉菜单多选超出
一：出现的问题二：修改.el-select__tags { width: 100%; display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }三：更改后
2020-12-07 11:02:05
784
原创 div边框重叠，导致边框高度叠加问题
一：问题现象二：解决办法 height: 400px; width: 1130px; border: 2px solid #797979; margin-bottom: -2px;
2020-11-12 20:29:28
549
原创 图形化界面创建vue项目
一：打开PowerShell窗口 输入：vue ui二：找到Vue项目管理器，在此创建新项目三：填写项目名称四：选择手动预设五：选择功能六：选择配置七：启动项目 yarn serve八：打开项目http://localhost:8080/九：完成...
2020-10-13 09:42:21
265
原创 git出现Please make sure you have the correct access rights and the repository exists.问题解决
提示：Warning: Permanently added ‘gitee.com,120.55.226.24’ (ECDSA) to the list of known hosts.相当于git的初始身份已经失效，需要重新配置公钥是公钥出问题了，要先设置用户和邮箱再重新生成ssh公钥即可。1、首先我得重新在git设置一下身份的名字和邮箱依次输出git config --global user.name "yourname"git config --global user.email "your
2020-07-19 03:56:58
791
原创 前端用css、js实现网页内容禁止选中
一：通过css*{moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}二：通过body标签//前面一句是禁止右键，后面一句是禁止复制。<body oncontextmenu="return false;" onsel
2020-06-23 11:43:05
455
原创 vue中使用无缝滚动插件vue-seamless-scroll
1、npm 安装npm install vue-seamless-scroll --save 2、引入插件在项目main.js中引入与使用import scroll from 'vue-seamless-scroll'Vue.use(scroll)3、html代码<vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2"> <ul class=
2020-06-18 17:20:42
521
1
原创 vue2X出现：Failed to resolve directive: el 报错
一：问题原因为什么会报这个错呢，主要还是因为vue升级的时候，v-el在vue2.x以后被淘汰。使用新的标签ref替换v-el，下面和大家分享一下使用方法。二：旧版本的写法html代码<div class="menu-wrapper" v-el:meun-wrapper> <ul> <li v-for="(item, index) in goods" :key="index" class="menu-item"> <sp
2020-05-22 11:52:46
531
原创 vue项目启动运行报错 Failed to compile with 28 errors
一：出现的场景当我把项目从D盘复制到E盘运行的时候，项目报错如图二：解决问题我是用了下面的指令解决的npm install --save @babel/runtime三：重新启动项目即可
2020-05-22 09:19:42
2902
原创 VScode快捷键的设置
一：打开vscode,选择：文件–首选项–用户代码片段二：在搜索框输入javascript类型，打开javascript.json文件三：编写自己设置的代码片段{ "Print to console": { "prefix": "cl", "body": [ "console.log('$1');", ], "description": "Log out...
2020-05-04 18:09:37
404
原创 前端分页
一：el-table的设置 :data="userList.slice((pagesNum-1)*pageSize,pagesNum*pageSize)"如图：二：分页器设置<el-pagination align="center" @size-change="handleSizeChange" @cur...
2020-04-30 10:06:45
274
原创 Vue中使用element-ui对表格指定列进行前端全部排序
一：先看效果二：步骤1、对el-table绑定sort-change事件@sort-change="sort_change"如图：2、需要排序列设置sortable=“custom”属性 <el-table-column prop="operationAvgTime" label="姓名" align="center" sortable="coumnt">...
2020-04-28 14:00:20
4070
3
原创 vue项目中使用iconfont图标（unicode引用方式）
一：下载字体包二：解压后将文件放置自己项目中注：解压后的所有文件，统一放进来三：在css文件中引入font初始化代码@font-face {font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot'); src: url('../fonts/icon...
2020-04-18 15:29:59
1516
原创 关于element-ui表格滚动条样式el-scrollbar使用的问题
一、问题如下图，原始表格滚动条很丑二、想要的效果如下三、操作步骤1、template部分代码<template><!-- 外面的最大的父容器盒子 --> <div class="ccc"> <!-- 使用el-scrollbar标签的效果 --> <div class="box"> <!...
2020-04-06 15:40:11
4574
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人