- 博客(23)
- 收藏
- 关注
RSS订阅原创 [学习笔记]vue密码强度判断
老规矩，先上效果图：（方便演示，input中type改为了text）判断规则用了这个https://blog.csdn.net/Ylxin/article/details/7725784前面评分规则差不太多，后面评分等级作了修改：小于10：密码强度不合格，10-25：弱，25-35：中，35以上：强 <div class="passwordstrength"> <div class="level1" :style="{'.
2021-08-05 11:35:32
1399
原创 [项目记录]用vue-electron搭建pc网易云音乐程序（4-1）——播放音乐
播放网易云的音乐都是在歌单中进行播放的，如果用户单独点击一首歌进行播放，会默认将该歌曲放在当前播放的歌单中，所以做播放音乐的功能前，优先把歌单功能做好。进入歌单页有很多的入口，目前做好的有在首页点击任意歌单进入，还有点击用户自己创建或者收藏的歌单。借此正好完善一下侧边栏的功能。通过/user/playlist接口获取用户歌单，然后根据creator.userId判断歌单是用户创建歌单还是用户收藏歌单。...
2021-07-06 15:37:33
661
原创 [学习笔记]vue右键在新标签页中打开链接
客户需求：tab标签点击右键时，需要有打开新标签页的选项。原本的tab标签用的element组件el-tab，因为渲染之后是div，所以不会有打开新标签页的选项，带有href的a标签才会有这个选项。而标签的内容又是在el-tab-pane的label里定义的，不是很好改。最后通过获取鼠标右击事件来动态添加a标签，从而使得右键菜单支持打开新标签页。用到了@contextmenu <el-tabs v-if="info != null" :value="cu
2021-06-29 15:58:06
2574
1
原创 [项目记录]用vue-electron搭建pc网易云音乐程序（3-2）——添加header头部功能(2)
接着上一文章继续完善header功能，还剩七个功能1、换肤官方的还有个主题一栏，我这里就不加了，顶多就是顶部背景好看一些，我主要把纯色功能完成。主要分为上下两部分，上面是给定的颜色，下面是自定义颜色。首先完成给定颜色模块，把官方的12个颜色取个色放进来就行。 <div class="colorlist"> <div class="coloritem" v-for="(item, index) in colorlis
2021-06-04 16:38:33
524
1
原创 [项目记录]用vue-electron搭建pc网易云音乐程序（3-1）——添加header头部功能
头部从左到右依次为：前进后退功能、搜索功能、听歌识曲、登录及查看个人信息、换肤、设置、消息、迷你模式，最小化最大化和关闭。1、前进后退功能：一开始我以为这个功能很简单的，只需要获取历史路径记录就可以了，用window.history，但有一个问题，它记录的是所有的历史记录，也就是说哪怕后退，他也会记录进去，在window.history.length里直接加一，这样就没法判断起始页了。咨询了几个大佬，大佬说这个功能要自己写，细问之后有了大致思路。首先在data里定义好routehisto..
2021-05-31 12:45:55
669
原创 [项目记录]用vue-electron搭建pc网易云音乐程序（2）——搭建基本页面
项目创建好，可以开始写静态页面了，在动手之前，先粗略观察一下官方的网易云音乐程序样式，看哪些模块是可以重复利用的，以提高开发效率。像tabbar，模块标题，一些电台、mv模块都是可以复用的。再就是确保有可以控制全局风格的变量，很多细节的颜色都是可以一键替换的。粗略观察之后，就可以开始了，首先写顶部和底部组件。为了实现头部header的自定义，要把electron自带的frame和菜单隐藏掉在background.js里新建窗口时，添加frame:false参数，在程序启动时，设置
2021-05-20 12:28:57
757
原创 [项目记录]用vue-electron搭建pc网易云音乐程序（1）
开始学习electron，正好发现有现成的网易云音乐接口拿来练手。开始做项目记录。准备工作：一、项目搭建：vue create，然后做好其他配置后，安装electronnpm i electron使用electron-builder集成electronvue add electron-builder运行程序：npm run electron:serve二、安装网易云音乐接口接口文档地址：https://binaryify.github.io/Neteas.
2021-05-14 16:18:38
653
原创 [学习笔记]使用jsPDF和autoTable导出多个表格的pdf
需求：有多组数据，需要在同一个pdf里放入多张表格autotable工具：https://github.com/simonbengtsson/jsPDF-AutoTable一、安装jsPDF和autoTable并引入安装：可以选择cdn或引js，我直接用npm装了，方便快捷npm install jspdf --savenpm install jspdf jspdf-autotable引入：import JsPDF from "jspdf"import 'jspdf-au
2021-04-28 17:16:39
1271
原创 [学习笔记]vue input输入框输满或清空自动切换下/上一个输入框
应用场景：一般使用在输入生日、银行卡信息等场景。效果图：html： <input type="text" placeholder="1980" @keyup="nextinput" @keyup.delete="backspace" maxlength="4" v-model="userinfo.birthday.y.
2021-03-17 16:40:11
1082
原创 [学习笔记]vue实现页面滚动到某一位置时，div以动画出现
效果图：实现方法主要分两步骤：1.监听滚轮，判断div何时出现2.插入动画效果首先，在mounted钩子内监听进度条滚动window.addEventListener("scroll", this.handleScroll);当进度条滚动后，执行handleScroll事件，然后就可以进行判断了 handleScroll() { this.currentScroll = window.pageYOffset //表示当前滚动的位置 if (
2021-03-11 16:28:19
7873
13
原创 [学习笔记]element走马灯Carousel组件自适应高度
官网给的例子是<el-carousel height="150px">，高度写死的话，不会自适应屏幕宽度，banner就会被挤扁，尤其是pc切换到移动端效果最为明显。因此，给高度设置变量 <el-carousel trigger="click" :height="screenwidth"> <el-carousel-item v-for="(item, index) in banner" :key="index">
2021-03-02 13:35:34
5663
原创 [学习笔记]利用sass循环解决移除hover时z-index变小而置于下层的问题
项目需求：有从周一至周日的排课列表，当鼠标经过某一课程时，显示该课程的边框和详情（下简称详情），效果如下：因为这个详情是课程item的子标签，所以给详情设置z-index没有用，因此在hover时，我给该课程item的z-index提高，就可以实现目前选中的课程和详情的层级要高于周围课程的层级。按理说这样就结束了，但是当我添加了transition动画效果，就出现了另外一个问题。可以看到，当鼠标移开选中的课程时，详情瞬间被压在其他课程底部。这是因为移开鼠标时，其他效果可以受到tran
2021-02-09 14:40:09
346
原创 [学习笔记]侧边栏动画效果：三条杠变叉号，侧边栏滑动
废话不多说，直接上效果图1.侧边栏滑动效果这里我用到了vue自带的transition标签，具体使用方法可参考：https://cn.vuejs.org/v2/guide/transitions.html <transition name="sidebartransition"> //transition标签 <div class="sidebarbgc" v-if="sidebarIsShow"> <div :class="
2021-01-18 14:29:49
1410
2
原创 [js代码练习]递归实现全排列及流程梳理
问题描述：给出一个字符串，找到它的所有排列。示例如：输入'abc',输出[ 'abc', 'acb', 'bac', 'bca', 'cab', 'cba' ]输入'abb',输出[ 'abb', 'bab', 'bba' ]输入'abbc',输出[ 'abbc', 'abcb', 'acbb', 'babc', 'bacb', 'bbac', 'bbca', 'bcab', 'bcba', 'cabb', 'cbab', 'cbba']参考h.
2020-12-22 17:55:29
172
原创 [js代码练习]字符串拆分并补齐（华为某机试题）
题目描述•连续输入字符串，请按长度为8拆分每个字符串后输出到新的字符串数组；•长度不是8整数倍的字符串请在后面补数字0，空字符串不处理。输入描述:连续输入字符串(输入2次,每个字符串长度小于100)输出描述:输出到长度为8的新字符串数组示例1输入abc123456789输出abc000001234567890000000本来我是这么...
2020-12-21 16:06:43
248
原创 [学习笔记]Vue利用css全局变量实现主题风格变换
想要实现的功能：页面渲染前，从后端获取用户的数据，用户数据内含有style值，根据不同的style值动态改变商城的颜色风格。原本我是只考虑了两个风格，然后在每个页面里做判断，后来考虑到后期可能会添加其他风格，而且这样写代码很乱还不容易维护，所以了解了一下样式的全局变量。找了大半天less，sass的教程，功能很强大也很复杂，不知道该怎么入手，后来发现直接用css自带的变量功能就可以实现，而且很简单。具体使用方法参考这个：https://codepen.io/dongCode/pen/jOrBmb
2020-11-10 10:40:01
950
1
原创 [学习笔记]Vue自定义组件——传值，插槽的使用
用了这么久的vant和element，我这个小白也简单地了解了别人的组件是怎么写出来的，特此记录一下。举个简单的例子，拿自己定义的mainTitle举例，这个组件用在商城顶部的标题，分成三块，最左侧是返回键←，中间是标题内容，最右侧是退回主页×。html代码如下（利用了vant组件）<template> <div> <van-sticky class="maintitle"> //vant粘性布局 <van-row>
2020-11-04 11:37:22
1728
1
原创 [学习笔记]利用vant组件实现商城购物车功能
效果图：商品相关数据大致结构：shopcard:[{num:1,price:'1999',title:'商品名商品名商品名商品商品名',desc:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',thumb:'图片地址'}, ...
2020-10-07 15:47:24
4418
6
原创 [学习笔记]vue利用动态路由实现菜单权限管理
b站很多实战教程，尤其是后台管理系统的教程基本上只教了些皮毛，很多实用性强的功能基本上没有说，这也是我遇到这种问题无从下手的原因，这里推荐一个教程，也是b站上可看。https://www.bilibili.com/video/BV1zJ411g7Fx不敢说他教的有多好，但是他的教学内容很接近实际开发了，其中就包含了动态路由。前期很迷茫，看了许许多多的博客帖子，基本上所有的教程都围绕这一页面https://juejin.im/post/6844903478880370701，我的思路基本上就是照着这个来.
2020-09-25 10:46:43
1086
原创 [学习笔记]利用Mock模拟后台数据，并实现登录功能
新项目，后端数据还没准备好，没办法直接从后端获取接口数据，于是我利用Mock简单实现一下这个功能，以作为测试用。首先，利用 cnpm install mockjs --save-dev 指令安装完mock后，在项目里创建文件夹mock，再创建index.js和userList.js（前者为mock服务文件，后者为模拟数据文件）index.js中复制如下代码：// 首先引入Mockconst Mock = require('mockjs');// 设置拦截ajax请求的相应时间M..
2020-09-18 15:41:52
7695
2
原创 [学习笔记]el-menu自适应动态数据
element上的menu给的案例有点乱，而且数据是写死的，我做了一点点优化，可以自适应导航列表数据。（我因为需求，设置的导航层数最多为三层，所以严格来说也不算是完全能复用，应该是可以优化为不限制层数的）首先，最外menu标签<el-menu default-active="2" @open="handleOpen" @close="handleClose" background-color="#ebf1f6" text-color="#606266" active-
2020-09-15 16:53:18
3028
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人