- 博客(25)
- 收藏
- 关注
RSS订阅原创 el-select和el-input联动
change="SelectChange"来监听select的change事件。场景：select选中在input中展示选中的名称和其他的字段。installList是循环的select里面的数据。
2023-08-22 11:44:49
530
原创 响应拦截器、请求拦截器、接口的封装
api文件下新建一个后缀名.js的文件用于存放封装好的接口。好了到这里就结束了，还有别的方法，欢迎私聊学习。4.以下是errorCode.js文件中的代码。在这个.js文件下把request.js引入。接下来就是接口的封装。
2023-05-25 08:53:28
204
原创 vue中moment插件实现时间的格式化
根据需求需要把后端给的时间简化到年月日，接下来用插件来完成！首先第一步就是通过npm的方式下载moment这个插件。第二步下载下来了就要引入，引入到main.js中来。最后一步 在main.js配置完成以后就要用到了。
2023-05-11 14:35:54
308
原创 Vue调用后台接口渲染列表
下载Axios在min.js中引入拿到接口先封装一下api—>新建文件夹—>后缀名.js文件暴露接口名称,在那个页面调用接口就在哪个页面引入用element ui 里面的el-table和el-table-column这两个组件在data中定义一个存放列表数据的空数组在el-table中动态绑定一下在methods中定义一个方法,调用接口,打印一下数据listPage是封装好的接口暴露出来的名称赋值完成以后,看一下需要展示那些数据,el-table-column中用p
2022-06-08 09:16:09
4469
1
原创 vue实现文字上下停顿滚动
需求:在Vue项目的顶部,来实现数据上下翻页+停顿滚动代码:html中写的<el-row :gutter="22"> <el-col :xs="24" :sm="24" :lg="24"> <!-- 头部滚动区域 --> <div class="text-container"> <div class="text-container" v-if="showTopSlide">
2022-04-21 14:49:34
2076
原创 小程序点击按钮跳转新的页面
小程序点击按钮跳转新的页面目前处于学习阶段,只是为了做笔记分享,还请大神多多指教第一步:首先要在app.json中的pages中创建想要跳转的文件夹,pages中第一个展示的路径就是小程序中的初始页面建立完成以后就会看到两个文件夹.js(js逻辑).json (json配置文件).wxml (页面内容).wxss (页面样式)文件也会跟着一起建立出来在login文件夹中写以下代码在这里我是以login为初始页面建立完成以后在.wxml中写一下内容<view><
2021-12-22 11:19:59
6748
1
原创 Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echartsnpm install echarts在min.js中引入echartsimport * as echarts from 'echarts'Vue.prototype.$echarts = echarts;3.创建一个map.vue的组件,把一下代码复制到这个组建中<template> <div> <div class="echartsGroup">
2021-12-14 15:45:50
4690
14
原创 Vue+跑马灯样式实现文字横向滚动完善版(鼠标移入停止滚动,移出继续滚动)
需求:在Vue项目的顶部,来实现文字左右滚动,在鼠标移入的时候停止滚动,鼠标移出的时候继续滚动步骤:可以自己封装一个组件,也可以自己写,也可以复制以下代码封装完成以后要在所需的组件中引入,注册,并使用代码:封装一个专门用来实现跑马灯效果的组件marquee组件<template><!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll
2021-12-08 10:19:56
1431
2
原创 Vue+跑马灯样式实现文字横向滚动
Vue+跑马灯样式实现文字左右滚动需求:在Vue项目的顶部,来实现文字左右滚动步骤:可以自己封装一个组件,也可以自己写,也可以复制以下代码封装完成以后要在所需的组建中引入,注册,并使用代码:封装一个专门用来实现跑马灯效果的组件marquee组件<template><!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="
2021-11-22 16:56:53
2357
2
原创 2021-11-05TypeError: Cannot read properties of undefined (reading ‘img‘)
TypeError: Cannot read properties of undefined (reading ‘img’)关于这种问题不要慌 , 建议换个浏览器试试相同的项目,相同的代码,在Google Chrome中打开以后就报这种错误验证码打显示不出来但是换了火狐浏览器就什么是都没了。谷歌真垃圾!!!...
2021-11-05 09:01:45
1243
原创 使用Vue ui （可视化）创建Vue项目
使用Vue ui （可视化）创建Vue项目首先打开电脑硬盘上随便一个文件夹我这里是用E盘做的演示打开E盘后，输入cmd（我这里是E盘根目录，如果不想用根目录可以新建文件夹）cmd的位置，当然要是新建文件夹后，cmd也是在这里输入输入好cmd以后会弹出一个终端在终端上输入 vue ui如果敲了回车不生效不要着急我来教你解决先Vue -h检查一下此时Commands中少了一个ui的相关信息在控制面板中运行一下两行命令：npm uninstall vue-cli -g //卸载
2021-10-11 16:34:16
18966
17
原创 Vue中的视频播放插件( vue-video-player )
前言在最近的项目中有一个网络视频的功能，在之前的项目中没有接触过类似的功能，第一次接触，把具体操作步骤，遇到的一些问题记录如下：（首先个人认为vue-video-player是很好用的）第一步：我们用到的vue-video-player的时候，首先要安装vue-video-player：npm install vue-video-player --save第二步：安装完了以后创建一个文件夹vueVideoPlayer.vue（在这里我用的是和这个插件一样的名字）**第三步：**创建完成以后就要
2021-06-28 18:19:32
30326
13
原创 如何取消Chrome浏览器自动翻译
如何取消Chrome浏览器自动翻译这是一个坑, 很多新手在学习Vue的一些指令(例如: v-model 等一些指令)的时候,谷歌浏览器会自动打开翻译, 导致你的Vue指令不执行Console面板也不会报任何的错误, 就很头疼。自己总结了两种方法和大家分享第一种, 在浏览器里关闭自动翻译(一旦关闭,任何页面都不会翻译)第二种, 用代码关闭但也页面的翻译(用代码只会关闭你想关闭翻译的页面, 其他页面不受影响)第一种方法:点开浏览器设置往下拉找到高级这两个字点开找到语言点开后边的倒三角点开后找
2021-06-15 17:16:43
12308
1
原创 解决Vue中的v-model指令在谷歌浏览器中实现不了的办法
今天上午同样的代码在我电脑上实现不了,在我同事电脑上能实现,在我的电脑上实现不了,当时想到了Vue配置环境的问题,结果不是<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2021-01-15 13:12:21
358
2
原创 如何快速找到是哪个元素产生滚动
把以下代码复制粘贴到浏览器 Console 面板,敲一下回车 function findscroller(element){ element.onscroll=function () { console.log(element) } Array.from(element.children).forEach(findscroller) } findscroller(document.body)复制到 Console
2020-11-01 20:01:02
1424
6
原创 Vue中 的Get , Delete , Post , Put 传递参数
这里写自定义目录标题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <s
2020-10-09 23:44:45
4874
3
原创 利用ajax计算文件上传速度&上传到后台
定义 UI 结构 验证是否选择了文件 向 FormData 中追加文件 使用 xhr 发起上传文件的请求 监听 onreadystatechange 事件//引入bootstrap的css样式//引入jquery的js样式<!-- 1. 文件选择框 --> <input type="file" id="file1" /> <!-- 2. 上传文件的按钮 --> <button id="btnUpload">上传文件&l.
2020-09-07 21:19:41
557
原创 js中利用数组新增方法操作查询商品案例
html样式 <div class="search"> 按照价格查询: <input type="text" class="start" /> - <input type="text" class="end" /> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="produ
2020-08-31 08:26:45
267
原创 js实现tab栏切换,并实现增,删,改,查
js实现tab栏切换,并实现增,删,改,查html样式<main> <h4>Js 面向对象 动态添加标签页</h4> <div class="tabsbox" id="tab"> <!-- tab 标签 --> <nav class="fisrstnav"> <ul> &
2020-08-29 10:43:27
1012
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人