前端小案例
前端的一些小的功能实现
笑道三千
我今年两岁半了,学编程还来不来得及????
展开
-
base64和blob对图片的压缩
本文参考:https://zhuanlan.zhihu.com/p/339477329Base64,顾名思义,就是包括小写字母a-z、大写字母A-Z、数字0-9、符号"+“、”/“一共64个字符的字符集,(另加一个“=”,实际是65个字符,至于为什么还会有一个“=”,这个后面再说)。任何符号都可以转换成这个字符集中的字符,这个转换过程就叫做base64编码。首先将字符串(图片等)转换成二进制序列,然后按每6个二进制位为一组,分成若干组,如果不足6位,则低位补0。每6位组成一个新的字节,高位补00,构成一个新原创 2022-07-14 09:47:31 · 7714 阅读 · 0 评论 -
h5页面的扫一扫
一,使用的插件:vue-qrcode-reader官网:https://gruhn.github.io/vue-qrcode-reader/demos/Simple.html二,我在项目中使用;项目代码:<template> <div class="scan"> <div class="scan-back" @click="handleBack()"> <img :src="require('@/assets/images/qrco原创 2021-02-08 10:47:27 · 656 阅读 · 0 评论 -
调用微信的扫一扫功能
一,实现思路二,实现使用的是weixin-jsapinpm install weixin-jsapi --save原创 2021-02-07 18:56:43 · 590 阅读 · 0 评论 -
生成付款的二维码,实际流程
一,实际效果:二,具体的实现思路但是,这个定时器一直都没有关闭掉。在合适的位置应该关闭这个定时器。因为传过来的数据是base64格式的,还需要在页面上绘制成二维码。使用的html标签是canvas,它提供了能在元素上利用js代码绘制的API,然后使用npm install --save qrcode就可以绘制二维码:...原创 2021-02-05 17:22:13 · 1389 阅读 · 0 评论 -
vant-ui的list
一,实现的效果二,实现的思路 <van-tabs v-model="active" line-width="33%"> <van-tab title="全部"> <van-list v-model="loading_1" :finished="finished_1" offset="20"原创 2021-02-04 23:10:58 · 749 阅读 · 0 评论 -
elementui中下拉菜单需要传入多个参数的处理
一,要实现的效果像这样,想要把太多的菜单,做成这种下拉展开可点击的效果,但是官网中提供的案例,只能传入command一个参数:<el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-m原创 2021-01-30 15:40:18 · 1944 阅读 · 0 评论 -
font-awesome在Vue项目中的使用(npm使用)
一,简介提供了很多使用的字体图标二,官网https://fontawesome.com/中文官网:http://www.fontawesome.com.cn/三,在vue中使用第一步:npm 安装 npm i font-awesome -S安装完成结果:第二步:在main.js中引入import 'font-awesome/css/font-awesome.min.css'第三步:在需要的vue页面中使用先去官网找自己想要的字体:http://www.fontawesome原创 2021-01-29 19:28:45 · 2187 阅读 · 0 评论 -
element-ui的密码验证
<el-form :model="form" :rules="rules" ref="ruleForm" > <el-form-item label="新密码" label-width="200px" prop="passwd"> <el-input v-model="form.passwd" placeholder="密码必须包含字母,数字,特殊字符,且大于8位"></el-input> </el-form-item></原创 2021-01-29 15:42:30 · 927 阅读 · 0 评论 -
vue-router实现根据用户权限显示不同菜单-动态路由
一,情景再现做前端开发的同学,大多都遇到过这种需求:页面菜单根据用户权限动态生成,一个常见的解决方案是:前端初始化的时候,只挂载不需要权限路由,如登陆,注册等页面路由,然后等用户登录之后,后端返回当前用户的权限表,前端根据这个权限表遍历前端路由表,动态生成用户权限路由,然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中,整个过程大致如下:import Vue from 'vue'import VueRouter from 'vue-router'import s原创 2021-01-29 14:58:49 · 12687 阅读 · 2 评论 -
点击刷新验证码
一,原理解析实际上就是img标签,然后给src赋值不同的地址值,然后向后端发起请求,获取后端的验证码而已。。二,具体实现三,实现效果原创 2021-01-29 11:18:40 · 177 阅读 · 0 评论 -
vant ui的dialog二次封装使用
一,实现的效果二,注意点第一点,vant ui的底下的虚线和关闭按钮,无法放到van dialog组件中,因为蒙版已经定义了。第二点,弹出框弹出时有动画,为了实现虚线和关闭按钮也出现动画效果,需要额外增加动画效果第三点,需要注意蒙版,弹出框,虚线(关闭按钮),这三者的z-index的关系三,实现过程源码:<template> <div class="qrshowBox" v-show="showQR"> <van-dialog v-model="s原创 2021-01-23 17:52:15 · 2403 阅读 · 0 评论 -
数字键盘实现
一,实现效果二,使用代码<template> <div class="cuskeyboard"> <div class="keyboardcon"> <div class="operate"> <el-input placeholder="请输入会员手机号" v-model="value" disabled></el-input>原创 2021-01-19 22:16:21 · 428 阅读 · 0 评论 -
函数的参数对象$event的使用和利用他找到事件对象
一,常用方式:input中获取当前内容$event.target.value示例: <body> <div id="app"> <input type="text" @click="abc($event)" value="123" /> </div> <script> var vm = new Vue({ el: "#app", data: {},原创 2021-01-13 00:14:32 · 1220 阅读 · 0 评论 -
Vue-Quill-Editor富文本编辑器的使用
一,快速使用官方文档地址:https://www.kancloud.cn/liuwave/quill/1434140安装:npm install vue-quill-editor --save因为通常是只有某个页面使用,所以选择在组件中使用:// require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'imp原创 2021-01-10 15:50:40 · 337 阅读 · 0 评论 -
vue省市区三级选择的实现
一,实现效果:二,使用的插件和地址https://distpicker.unie.fun/插件源码:https://github.com/jcc/v-distpicker/tree/master/examples使用方法作者讲得很详细了,就不多说了。三,我的使用四,遇到的问题和这个插件没关系,主要是select选择时出现黑色边框,我又不希望它出现,但是这个样式我在f12的浏览器中又找不到,上网搜了才知道,这是select的默认样式:要去除这个黑框,只要:...原创 2021-01-03 11:50:25 · 562 阅读 · 0 评论 -
vue点击下载图片的实现
一,实现效果:二,同源的实现//下载二维码的事件 // downloadImg() { // var oQrcode = document.querySelectorAll('.h5 img') // var url = oQrcode[0].src // var a = document.createElement('a') // var event = new MouseEvent('click')原创 2021-01-03 01:28:53 · 6990 阅读 · 3 评论 -
vue中点击,将内容复制到剪贴板
一,实现效果二,实现思路三,完整代码: //复制地址的操作 copyText(){ var input = document.createElement("input"); // js创建一个input输入框 input.value = this.ruleForm.url; // 将需要复制的文本赋值到创建的input输入框中,this.ruleForm.url这个是我要复制的内容 document.body.appendC原创 2021-01-03 00:01:07 · 2694 阅读 · 2 评论 -
vue分割开的tab组件效果
https://lanhuapp.com/web/#/item/project/board?type=share_mark&pid=6aa58df6-e427-4337-920a-16100695a841&activeSectionId=&teamId=c6f2f7bc-4074-494f-8699-48ca0af086aa¶m=f4c63e8d-e768-44e2-a2dd-37c158028d71原创 2020-12-31 00:02:44 · 475 阅读 · 0 评论 -
uniapp实例笔记
一,页面tab导航二,轮播图的实现接口地址:https://www.fastmock.site/mock/88bbb3bb8d6ea3dc8f09431a61ce2e50/mymock_test/api/getswiper2这是我使用fastmock模拟的接口地址。这里的代码有两个注意的地方:原创 2020-12-19 17:07:58 · 1756 阅读 · 0 评论 -
一夜上手uni-app
需要接手一个uni-app项目,目前只会vue和小程序,只能熬夜苦学一晚!一,uni-app的产品特性1,支持条件编译-可以实现多端开发的基础唯一的缺点是需要写很多套代码,然后通过条件判断是在哪一端,就使用哪一端的对应代码!二,快速入门1,新建项目2,项目结构三,开发者最常用的是page文件夹下的页面开发1,页面的结构单个页面遵循vue的单页面开发规范,也就是和vue差不多一样的。2,dom结构html标签而其中的html标签,和小程序的差不多,把它理解成uni-ap原创 2020-12-09 00:24:35 · 341 阅读 · 0 评论 -
微信小程序学习笔记-(11)-仿糗事百科
API接口地址;http://m2.qiushibaike.com/article/list/{type}?type=refresh&page={page}&count={count}参数type为类型,latest最新、text文本、image图片、video视频参数page为页码;参数count为每页数量示例:http://m2.qiushibaike.com/article/list/text?type=refresh&page=1&count=12一,初始化原创 2020-12-04 17:22:38 · 1824 阅读 · 0 评论 -
小程序的各种场景及实现
一,利用swiper实现点击tab滑动到另一个页面(严格意义叫组件)代码模板:HTML<!-- 滑动导航栏:控制滑动页面的显示 --><view class="nav"> <view id="0" class="{{currentIndex==0?'select':'normal'}}" bindtap="swiperNav">上映</view> <view id="1" class="{{currentIndex==1?'selec原创 2020-12-03 23:18:11 · 533 阅读 · 0 评论 -
微信小程序学习笔记-(10)-猫眼电影案例
使用前需要在微信公众号平台配置HTTPS服务器域名,但是可以做一个不合验的操作来发起请求.配置服务器域名的文档:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=290458817&lang=zh_CN一,wx.reqiuest的常用参数二,创建项目的初始化第一步:删除index和logs这两个没用的页面第二步:创建自己想要的页面和顶部的配置第三步:实现点击标签滑动效果三,API接口的使用1,通过wx.g原创 2020-12-03 23:02:14 · 8557 阅读 · 0 评论 -
电商项目的app学习笔记(四)-路由跳转的过渡动画实现
原本的效果是这样的:官网教程:https://cn.vuejs.org/v2/guide/transitions.htmlVue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点本文只讲动态组件间切换时的过渡动画的写法第一步:使用transition将要切换的组件包裹起来第二步:因为在合适的时间点会出现对应的类名所以只要事先定义好该类的css样式便可:于是原创 2020-11-22 16:52:46 · 157 阅读 · 0 评论 -
电商项目的app学习笔记(三)-嵌套路由组件的实现
一,嵌套路由的使用常见的使用场景就是这样:实际用法:实现的效果:原创 2020-11-22 14:46:40 · 116 阅读 · 0 评论 -
电商项目的app学习笔记(二)---创建登陆界面
第一步:创建项目,并在vscode中打开并运行vue create vue-shop完成之后的项目结构:接下来在vscode中打开:并运行第二步:创建vue.config.js文件第一个设置:当 npm run serve后自动打开浏览器:第三步:选择合适的ui库pc端基本不用选:element-UI处于霸主的地位移动端的话比较多:mint-ui:饿了么团队(停止维护了)vux:vant:有赞的(推荐)https://youzan.github.io/vant/#/zh-原创 2020-11-22 01:04:23 · 715 阅读 · 0 评论 -
电商项目的app学习笔记(一)---webpack相关配置
现在基本上都使用vue/cli3.x来构建项目,相比于vue2.x,build和config等目录不再有,而是将大部分配置都集成到vue.config.js里面了:关键点就是这个vue.config.js文件,之前的自定义webpack放到这里来了。vue-cli帮我们做了默认的基本配置。所以没有这个文件的话,就会使用默认配置进行打包。但是如果你有需要对打包的配置进修修改或者添加配置,就需要自行在根目录下创建这个文件,然后填写对应的打包配置vue.config.js 是一个可选的配置文件,如果项目的原创 2020-11-17 23:03:04 · 164 阅读 · 0 评论 -
vue+webpack实现一个todolist
一,webpack 的基本配置地址:https://gitee.com/ling-xu/vue-webpack/tree/master/分支:init第一步:项目的初始化安装vue和webpacknpm install webpack webpack-cli -Dnpm install vue vue-loadernpm install css-loader安装相关的依赖: npm install postcss第二步:新建app.vue文件但是,它作为vue的一个组件,它是原创 2020-11-15 12:52:14 · 193 阅读 · 0 评论 -
vue全家桶+element-UI
一,登陆界面的制作第一步:利用element-ui按需导入,然后绘制相应的页面:第二步:配置相应放入路由和路由导航守卫第三步,登陆成功后的退出登陆功能二,首页的开发第一步:顶部和左侧区域的菜单页面<template> <el-container class="home_container"> <!-- 头部区域 --> <el-header> <div> <img src="../assets原创 2020-11-12 00:26:08 · 991 阅读 · 1 评论 -
原生js实现输入框焦点切换
实现的效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .oul{ width: 200px; height: 200px; margin: 100px auto; border: 1px solid #000000;原创 2020-11-08 15:23:42 · 1793 阅读 · 1 评论 -
vue项目中打包的相关配置问题
一,vue项目的webpack配置文档地址:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE现在我们用的基本上是vue-cli3,它创建的vue项目,不再有build文件夹,也不会有config文件夹,更不会有webpack.config.json文件。那我们去哪里进行项目的打包配置呢??vue-cli是基于webpack的,所以这部分的知识还是用的上的。当一个vue项目初始化完成后。生成的目录如下原创 2020-10-29 22:09:36 · 524 阅读 · 0 评论 -
慕课网仿去哪儿项目笔记--(五)-详情页面的开发
一,详情页动态路由及banner布局第一步:利用tag属性把router-link变成对应的标签第二步,利用to来指定路由跳转的url:第三步:新建这个页面的组件Detail,然后配置路由这里利用:id创建的是动态路由,意思是url必须包含detail/,而后面可以带一个参数,参数会放到id这样的一个变量里面。第四步,创建banner组件(页面顶部显示图片的组件),然后导入detail第五步,完成banner部分的基本布局利用position和flex完成.在这个过程中,遇到了一个原创 2020-10-29 16:59:59 · 344 阅读 · 0 评论 -
慕课网仿去哪儿项目笔记--(四)-城市页面的优化
一,使用keep-alive标签减少ajax请求原因是切换页面的时候,这两个页面都需要重新渲染,都会执行这个生命周期函数:可以改写成这样:这个标签的作用就是,让其中的内容只有在第一次获取数据时发起ajax请求,然后后续的数据直接从内存中获取。也就是接下来,无论切换多少次页面,这个请求只有第一次发起。二,让选择城市之后的首页根据城市的不同而进行页面的渲染像这样,选择好城市,回到首页时,我们又希望有ajax请求的发起,更新渲染首页内容为对应城市的页面:要区分对应的城市,发起的ajax请求必原创 2020-10-24 19:17:28 · 180 阅读 · 0 评论 -
慕课网仿去哪儿项目笔记--(三)-城市页面制作
一,头部区域的制作新建git分支,然后创建router和对应的city组件利用声明式导航,实现页面的跳转功能二,实现基本页面的制作:三,使用Better-Scroll的使用和字母表布局https://github.com/ustbhuangyi/better-scroll安装:npm install @better-scroll/core实现的效果:四,城市页面的数据渲染五,接下来要实现典型的列表联动左右两个列表,左边点击右边跳到相应位置,右边滚动左边相应位置也高亮显示;原创 2020-10-24 16:52:50 · 302 阅读 · 0 评论 -
慕课网仿去哪儿项目笔记--(二)-首页部分
一,安装tsules依赖(css预编译器)npm install stylus --savenpm install stylus-loader --save二,设置home.vue组件和vue组件组件化开发,把这个header搞成一个组件,然后放在home组件的最上边。也就是home是个页面级别的组件,而header是它的组成部分。...原创 2020-10-21 21:31:20 · 480 阅读 · 0 评论 -
慕课网仿去哪儿项目笔记--(一)-初始化准备
一,码云上创建新的仓库,并克隆到本地二,用vue脚手架新建项目,vue create travel三,关闭src下的eslint三,将初始化好的项目推送到码云上面去。四,初始化项目准备第一步,移动端不可缩放的配置:<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">五,因为是移动端的页面开原创 2020-10-19 14:00:33 · 313 阅读 · 0 评论 -
vue小案例一:todolist
实现的效果:单文件代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>todolist</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; background-co原创 2020-10-16 13:13:48 · 316 阅读 · 0 评论 -
bootstrap创建响应式网站
一,导航栏修改样式之后得到效果:二,home区域布局最主要的知识点就是为了让内容居中,采用bootstrap栅格系统,并且为了让图片自适应,添加了img-responsive类名。三,bbs论坛区域四,html5前端的区域五,课程列表区域六,app下载区域七,联系方式区域八,Bootstrap创建响应式网站的总结实际上,只是利用了bootstrap的栅格系统,简化了一些布局的操作,其他的内容还是和正常原生的html,css布局一样的,也是将网页划分为一个一个区原创 2020-10-03 17:20:26 · 867 阅读 · 0 评论 -
vuex的基础小案例(黑马教程)
一,使用cli初始化项目,然后安装axios运行依赖和ant-design-vue入口文件main.js:import Vue from 'vue'import App from './App.vue'// 1. 导入 ant-design-vue 组件库import Antd from 'ant-design-vue'// 2. 导入组件库的样式表import 'ant-design-vue/dist/antd.css'import store from './store/index原创 2020-10-01 14:27:08 · 1543 阅读 · 2 评论 -
vue的零碎知识点-黑马后台项目整理
一,Vue.$nextTick方法的作用$nextTick方法的作用.当页面上的元素被重新渲染之后,才执行这里面回调函数的代码具体案例: //tag标签的事件显示input showInput(val) { val.inputVisible = true; //$nextTick方法的作用.当页面上的元素被重新渲染之后,才执行这里面回调函数的代码 //在这里,是变成input函数之后,再获取焦点 this.$nextTick(_ => { //文本原创 2020-09-29 19:54:16 · 323 阅读 · 0 评论