- 博客(31)
- 收藏
- 关注
RSS订阅
原创 制作一个广告字幕滚动效果的网页的心路历程
先看效果刚开始的需求是，制作一个类似电视广告字幕的效果，我没什么思路，后来看了字幕的实现方式，就是用css动画的移动实现,于是我开始了对这段动画的驾驭。我们写一个外面的块，宽度是100%，再写一个里面的块，再里面的块里放置内容。内容部分暂且不管，我主要讲实现思路。<body> <div id="app"> <template> <div class="marquee-outer-wrapper"&g.
2021-11-19 17:10:44
946
原创 分割省市区县
console.log(str.match(reg)) //['辽宁省', '鞍山市', '台安县']var reg = /.+?(省|市|自治区|自治州|县|区)/g;let str = "辽宁省鞍山市台安县"
2022-08-23 14:51:13
168
原创 完整的登录获取token和封装axios请求
步骤登录调后端接口获取token存在vuex和缓存里-->设置路由守卫判断路由-->封装axios请求插入token-->调用接口。
2022-07-28 10:30:07
3567
原创 拆分数组，并返回固定长度的二维数组的方法
group(array, subGroupLength) { let index = 0; let newArray = []; while (index < array.length) { newArray.push(array.slice(index, (index += subGroupLength))); } return newArray; },
2022-04-12 11:33:09
168
原创 手撸一个可以点击控制滚动的小功能
先看效果正常人：使用swiper插件。我：手撸它。先说一下基本想法和遇到的坑，还是老套路，搞两个div。里面的长，外面的短，就可以实现滚动的效果了。但是滚动条十分碍眼，把它去掉。然后弄两个箭头点击，为内侧的div的scrollTop（scrollLeft）赋值就可以实现左右滚动的效果了。下面开始撸。首先看页面部分：*注：$t是多语言，<i>均为饿了么图标，nameing为显示图片的方法。<div class="weekly"> .
2022-03-18 17:33:33
382
原创 获取当前周六的早上六点的时间
修改第七行和十行getTimeOut(date) { let data = new Date().getTime(); let nowTemp = new Date(data); // 当前时间 let oneDayLong = 24 * 60 * 60 * 1000; // 一天的毫秒数 let c_time = nowTemp.getTime(); // 当前时间的毫秒时间 let c_day = nowTemp.getDay() ||
2022-02-10 16:29:26
741
原创 常见的操作数组的方法总结
1.length()方法获取数组的长度let a = [1,2,3,4,5,6];console.log(a.length); // 6 是从1开始的2.join()方法、toString()方法和toLocaleString()方法数组转字符串let a = [1, 2, 3, 4, 5, 6];console.log(a.join()); //1,2,3,4,5,6console.log(a.join("?")); //1?2?3?4?5?63.reverse()方法
2021-12-17 13:05:19
247
原创 使用VScode 必备的几款插件
vue栈前端篇1.语言插件 搜索ChineseChinese然后按快捷键“Ctrl+Shift+P”，输入"display"，选择“Configure Display Language”,再选择“zh-cn”，重启软件就设置好了。如果你对外开发，可以选择别的语言，搜做"language"，日语俄语韩语也是应有尽有。2.两个好看的主题JetBrains Darcula ThemeAtom One Light Theme分别是亮色和暗色的，是我用着比较舒服...
2021-12-15 11:34:51
6427
原创 处理时间戳 时间戳转化格式
直接上代码dateFormat(time) { let date = new Date(time); let year = date.getFullYear(); let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; let day = date.getDate() &
2021-12-10 09:34:28
380
原创 VUE 点击回车触发事件和遇到的坑
<el-input ref="google" v-model="Code" @keyup.enter="submit()" autocomplete="off" placeholder="请输入内容" style="margin-top: 20px" ></el-input>@keyup.enter="方法名"一般我们写表单的时候一般放在.
2021-12-09 17:07:46
1202
原创 css实现抽屉动画 div显示隐藏的过渡效果
效果如图由于列表是循环出来的，所以判断抽屉的打开和关闭由一个自定义数组决定。当数组的该项为1时打开，打开时显示hideShita样式，反之显示element样式<div :class="flagList[i] == 1 ? 'hideShita' : 'element'"> //里面是抽屉里的内容</div>控制抽屉的大小动画的时间，简单的抽屉开关就做好了。修改后放在自己的项目里面吧。<style>.hideShita { ...
2021-10-30 09:32:58
8056
原创 vertical-align在flex布局下失效的问题
想要一个图片和文字横向排列时首先想到用flex布局，但是文字老是在图片的顶端对齐显示，非常的不人性，这时使用vertical-align:middle结果不生效。这时候在文字标签里面加上这两个style属性。display:flex;align-items:center;<span style=" display: flex; align-items: center; marg
2021-10-28 14:01:09
982
原创 vue 循环出的div拖拽排序和回显
图中半透明的div就是我拖拽过来的。下面开始搞代码！一、下载插件下载vue-class-component和vue-property-decorator两个插件，然后重跑项目npm install --save vue-class-componentnpm install --save vue-property-decorator二、准备自己的循环体。我举我的例子循环体外面要包裹transition-group标记循环体要声明drag的一个属性和四个方法<tra.
2021-10-28 09:07:37
590
原创 elementUI 上传文件（上传图片）
使用el-upload上传图片文件一般在后台项目的表单提交时会用到上传图片的字段视图层action：后端提供的接口，上传到自己的服务器上的。如果自己的服务器不支持，可以上传到阿里OSS上，参考我另一篇博客<el-form-item label="两寸照片：" prop="img_head_portrait"> <el-upload :before-upload="imgupload" :on-exceed="im
2021-10-27 09:48:28
2342
原创 微信小程序绘制二维码
话不多说，直接上代码。这里的宽高是二维码的宽高<view id="container" class="qrcode"> <view class="ewm"> <canvas style="width: 400rpx; height: 400rpx;" canvas-id="myQrcode"> </canvas> </view></view>.ewm
2021-10-26 09:56:04
483
原创 elementUI table排序 sortable
使用elementUI做后台程序时非常便利，但有时，插件的用法也会让人头疼。在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的
2021-10-22 15:53:00
4355
2
原创 富文本插件 和回显 vue-quill-editor
在开发过程中，input的限制会越来越明显。这时富文本输入框就派上用场了。推荐使用这个插件vue-quill-editor插件的使用方法和自定义组件的使用方法一样第一步：安装插件npm install vue-quill-editor 第二步：引入vue-quill-editorimport { quillEditor } from 'vue-quill-editor'还要引入下面的样式import 'quill/dist/quill.core.css'im.
2021-10-22 13:55:56
3067
1
原创 elementUI 亮暗色切换和主题色设置 scss
首先要创建两套颜色主题第一步：在根目录下创建存放主题.scss文件的目录，在改目录下创建主题.scss第二步：设置两套背景和文字颜色颜色的设置：尽量少，背景和字体颜色要相反，否则看不清。但是还要看UI的安排。$themes: ( light: ( background_color: #XXXXXX, //背景色 background_color_hei: #XXXXXX, ...
2021-10-22 11:56:34
3216
原创 点击事件触发复制文本内容 Clipboard
第一步：引用Clipboard直接npm安装：npm install clipboard --save第二步：在js中引用Clipboardimport Clipboard from "clipboard";第三步：在点击事件使用Clipboardcopy() { var clipboard = new Clipboard(".el-icon-copy-document"); //点击位置的类选择器 clipboard.on("success", (e)
2021-10-22 10:50:37
482
原创 element UI + 阿里云OSS上传文件
第一步：vue安装ali-oss：npm install ali-oss --save第二步：elementUI完成前端代码 action要有，没有会报错 accept是选择文件时，看到的文件类型和:on-change="addchange"功能类似limit是选择的文件个数和on-exceed="imgexceed"功能是一样的<el-form-item label="上传视频或图片"> <el-upload......
2021-10-22 09:18:29
1736
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人