- 博客(32)
- 收藏
- 关注
RSS订阅原创 前端上传图片、显示
使用: vue2, vant2功能点：qs1: 前端上传图片并展示an1: 上传file格式图片转为base64格式qs2: 要将上传的图片在宽高固定的窗口里显示完整an2: 把获取的base64的图片链接，赋值到image的src上，然后获取到图片的宽高比例；再与窗口宽高比例对比，选择以高占满还是以宽占满。 #### 具体实现： ....结构： <div class="upload"> <div class="img-box"> .
2022-02-24 17:54:59
1060
原创 点击上传图片/上传视频
一、点击上传图片····结构： <div class="upload-wrap"> <div class="upload-input"> <div class="image-no" @click.stop="openFile" v-if="!image.url"> </div> <div class="image-yes" @click.stop="openFile" v-else&g
2022-02-09 11:55:52
2285
原创 利用西瓜播放器（xgplayer）实现直播点播
<template> <div class="pc-live"> <div class="left"> <!-- 开启声音 --> <div class="sound" @click.stop="openSound" v-if="sound"> <img src="./../assets/live-jingyin.png" alt="" /> <span clas
2022-01-06 13:46:35
2113
原创 vue项目中使用md5加密
在utils文件夹中引入md5.js，内容如下：/* * JavaScript MD5 * https://github.com/blueimp/JavaScript-MD5 * * Copyright 2011, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * https://opensource.org/licenses/MIT * * Based on * A Java.
2021-12-07 14:57:49
382
转载 四个问题详解
问题一：get rebase和get merge区别get rebase：指令：git rebase -i [startpoint] [endpoint] （如不指定起止点，则默认是当前分支head指向的commit）作用：git rebase操作实际上是将当前执行rebase分支的所有基于原分支提交点之后的commit打散成一个一个的patch，并重新生成一个新的commit hash值，再次基于原分支目前最新的commit点上进行提交，并不根据两个分支上实际的每次提交的时间点排序，rebase
2021-11-18 17:23:29
474
原创 零散知识点整理（一）
1. location对象属性描述http://www.runoob.com:8080/test.html?name=333&eee=22＃PART2&b=2hash返回一个URL的锚部分＃PART2&b=2(#之后所有东西，包括#)host返回一个URL的主机名和端口www.runoob.com:8080hostname返回URL的主机名www.runoob.comhref返回一个URL的路径名http://www.runo
2021-09-01 12:17:30
512
转载 vue插件汇总
一、省市区三级联动表单省市区三级联动插件：v-distpicker引入方式：cnpm install v-distpicker --savegithub地址：https://github.com/jcc/v-distpicker二、前端实现签名板
2021-07-20 14:26:32
502
转载 在vue-cli中实现签名板
先安装组件cnpm i --save elesigncode在组件中使用的详细流程<template> <div> <div> 在vue-cli中使用elesigncode </div> <div class="hello" > <ElesignCode ref="signCode1" :datas="datas" :pen="pen"/>
2021-07-02 11:41:08
314
1
转载 canvas实现签名板
<!doctype html><html><head><meta charset="UTF"><title>签名版</title><style>*{margin:0;padding:0;}</style></head><body> <div style="margin:20px auto; text-align:center;">签名版</
2021-07-02 11:02:21
209
转载 vue核心之虚拟DOM
https://www.jianshu.com/p/af0b398602bc原理：vue的虚拟dom是将多次dom操作保存在一个js对象（虚拟dom对象）中，然后用这个js对象一次性的去更新真实dom，避免了很多无效的计算一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分
2021-06-21 17:45:43
525
原创 前端瀑布流（通过高和定位实现）
PS：即取即用<template> <div class="waterfall"> <p class="name">瀑布流</p> <div class="list"> <div class="content" v-for="(item, index) in list" :key="index" :style="{ width
2021-06-16 15:46:51
166
原创 vue图片拖拽插件---vuedraggable
一、安装依赖cnpm i -S vuedraggable二、使用参考项目mosiac（dragImage.vue和imageList.vue文件）三、api参考[vue.daraggable中文文档](http://www.itxst.com/vue-draggable/tutorial.html)
2021-06-15 11:13:27
335
原创 vue图片懒加载-vue-lazy
一、安装依赖cnpm install vue-lazyload --save-dev二、在main.js中引入// 引用图片懒加载的插件import VueLazyload from 'vue-lazyload'// Vue.use(VueLazyload)Vue.use(VueLazyload, { preLoad: 2, // 预加载多少张图片 error: require('./assets/placeholderImg.png'), // 图片加载失败时 loading:
2021-06-15 11:05:23
278
原创 图片裁剪--vue-cropper-（基于elementui）
一、安装依赖cnpm install vue-cropper二、main.js中引用// 图片裁剪import VueCropper from 'vue-cropper'Vue.use(VueCropper)三、引入elementui（可参考mosaic项目）看引入elementui的文章四、代码引入<template> <div class="upImage"> <el-button class="btn-upload" type="pri
2021-06-04 10:50:06
292
转载 常用的原生DOM操作汇总
一、常见DOM操作1. 获取查找DOM元素Ele.getElementById(idName)通过id查找元素。返回的是元素DOM，如果页面上有多个相同ID的元素，则只会返回第一个元素，不会返回多个（原则上ID只有一个，但伟大的程序员们。。。）Ele.getElementsByClassName(className)通过class查找。返回的是类数组结构，要想进行forEach遍历，需要先转化为数组结构> const doms = document.getElementsByClassNa
2021-05-26 17:16:00
1931
原创 直播功能，配合emoji和goeasy
一. 引入文件（基于kavo2021项目）新建路由router并引入views中文件---->live.vue和emoji.scss引入相关插件1） dplayer播放器：cnpm install dplayer@1.26.0 -S2）goeasy推流用:cnpm install goeasy@1.2.1 -S3) twemoji表情：cnpm install twemoji@13.0.1 -S4）在utils中引入emoji.js和like.js解决图片问题引入相关接口
2021-05-10 14:07:59
264
原创 零散知识点汇总（二）
一、 css部分动态写css行内样式（拼接） <div class="team" v-for="(item, index) in teams" :key="index"> <!-- 分数 --> <div class="progress" :style="{height: (item.score+50) + 'px'}"> <p class="score">{{item.score}}<span>分</s
2021-04-15 10:39:59
229
转载 正则表达式（Js RegExp 对象）
一. 语法var patt = new RegExp(pattern,modifiers);或者更简单的方式:var patt = /pattern/modifiers;pattern（模式） 描述了表达式的模式modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：var re = new RegExp("\w+");var re = /\w+/;二.
2021-03-29 18:07:25
252
原创 ES5 新增数组方法
序号对象调用的方法方法返回值1array.forEach(function(value, index, array){})遍历无2array.map(function(value, index, array){})遍历&返回新数组3array.filter(function(value, index, array){ return 条件 })过滤&返回新数组4array.every(function(value, index, a...
2021-02-24 16:32:39
137
转载 vue项目目录详解
下载好依赖的vue项目目录1、build：构建脚本目录1）build.js ==> 生产环境构建脚本； 2）check-versions.js ==> 检查npm，node.js版本； 3）utils.js ==> 构建相关工具方法； 4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀； 5）webpack.base.conf.js ==> webpack基本.
2021-02-22 17:49:32
257
转载 Vue项目搭建及ElementUI引入
一. node 环境安装node安装地址：Node.js检查是否安装成功，如果有版本号，则成功。二. cnpm 安装Ps：NPM 安装插件是从 NPM 官网下载对应的插件包，该网站的服务器在国外，经常会出现下载缓慢或出现异常，这时便需要找到另外的方法提供稳定的下载，这个方法就是CNPM。阿里巴巴的淘宝团队把 NMP 官网的插件都同步到了在中国的服务器，提供给我们从这个服务器上稳定下载资源。淘宝镜像淘宝镜像安装：npm install cnpm -g --registry=htt
2021-02-22 11:38:17
167
原创 git详解
git基础入门Git是一款免费、开源的**分布式版本控制系统**，用于敏捷高效地处理任何或大或小的项目。git的历史Git是 Linus Torvalds为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。git的安装下载地址：https://git-scm.com/download/win注意：1. 不要安装在中文目录2. 不要使用桌面管理软件安装很简单，一直下一步即可。在任意的目录下右键，能看到菜单，就表示安装成功了。git三个区要对某个项目使用git进行管理
2021-02-19 14:21:02
173
原创 break，continue和return的区别
一、作用不同break: 跳出所在的当前整个循环, 到外层代码继续执行。continue: 跳出本次循环, 从下一个迭代继续运行循环, 内层循环执行结束, 外层循环继续执行。return: 跳出函数, 直接返回整个函数, 所有该函数体内的代码（包括循环体）都不会再执行。二、结束不同break: 不仅可以结束其所在的循环, 还可以结束其外层循环, 但一次只能结束一种循环。continue: 结束的是本次循环, 将接着开始下一次循环。return: 同时结束其所在的循环和外层循环。三、紧
2021-01-22 12:26:00
222
原创 如何在项目中使用字体包
一. 拿到字体包转为ttf格式推荐网站:https://www.fontke.com/tool/convfont/, 一键转换二. 在项目中新建font文件夹, 为两个类型的字体包, 新建两个二级文件夹, 并放入ttf格式的字体包三. 在ttf格式的文件同级目录新建相应字体包的css文件, 并引入对应的一系列ttf格式文件, 命名对应的font-family: "相应名称"四. 在style文件夹下的public.scss中引入刚才设置的css字体包文件五. 页面中具体.
2021-01-08 10:57:28
831
原创 js中的定时器、延时器
一、定时器 创建定时器:window.setInterval(方法名，间隔时间（1000=1秒）)var timer = window.setInterval(func1,2000)var i = 0;function func1 () { console.log("我是定时器" + i) i++}---------也可写为------------------var timer = window.serInterval(function ...
2021-01-05 09:53:11
1842
原创 详解JS的join、split、slice、splice、concat方法
join--数组转字符串 语法: arrayObject.join("指定分割符"); 如果不指定则默认为","实例: var arrObject = ["大零","丁一","赵二","张三","李四","王五","钱六"] arrObject.join() = "大零,丁一,赵二,张三,李四,王五,钱六", arrObject.join("---") = "大零---...
2020-12-31 13:33:06
894
1
原创 在vue项目中引入elementUI
注: 此步骤基于我正在做的项目, 可能和你们的略有不同。步骤一: 安装elementui依赖: cnpm i element-ui -S步骤二: 安装bable依赖: cnpm install babel-plugin-component -D步骤三: 在babel.config.js中添加配置: [ "component", { "libraryName": "element...
2020-12-24 17:34:35
273
1
转载 cookie和sessionStorage和localStorage的存取--Vue-router带参数跳转页面
1.cookie存储:document.cookie="Name =Value"; 实例:document.cookie="张三 = sleep"; 拿取:document.cookie 可以拿到形式为 (Name1=Value1;Name2=Value2;Name3=Vaule3;...)的一个字符串, 下面我们要想方法截取出我们需要的Name和对应的Value①借用正则和match函数首先简单了解一下match()函数match定义和用法...
2020-12-24 16:15:33
500
原创 刷新清除某个特定网站的缓存
方法一:打开一个网站, 如优快云 打开F12开发者模式 依次点击application->Clear storage->Clear site data(这是清除了所有的Storage缓存) 最后左键点击左上角的浏览器刷新按钮即可图例如下:方法二:打开一个网站, 如优快云 打开F12开发者模式 最后右键左上方浏览器的刷新按钮，会出现三个选项：①正常重新加载，②硬性重新加载，③清空缓存并硬性重新加载 ①正常重新加载(Ctrl + R): 正...
2020-12-23 10:33:27
2812
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人