- 博客(30)
- 收藏
- 关注
原创 点击tab栏,内容区域滚动到相应的位置,内容区域滚动,tab栏自动定位
其中滚动区域是id=“imgMain”,Tab区域是class=“functions-main-tabs”
2024-06-06 10:09:04
480
1
原创 video 页面手动刷新之后不再自动播放
未加muted属性,导致页面手动刷新之后不再自动播放<video class="alltuu-videoCase-banner-videoBg" autoplay loop muted src="../images/bannerBg.mp4"></video>muted属性 静音属性未加muted属性,导致页面手动刷新之后不再自动播放...
2021-11-11 13:51:03
518
原创 关于css计算宽度,高度的calc(100% - 24px)
css常用计算款高度的方法calc()我们用height: calc(100% - 24px) 或height: calc(100vh - 24px) , 但是最终计算结果往往是 height: 76% 或 height: 76vh, 怎样解决呢解决方法height: clac(~'100% - 24px')
2021-04-26 19:57:11
1960
1
原创 选择器 :nth-child()和nth-of-type()区别
区别:p:nth-child(n) 表示其父元素的第n个子元素是否是p, 如果是,则有匹配元素,否则无匹配元素p:nth-of-type(n) 表示其父元素的第n个子元素p事例<style> div p:nth-child(5) { background: pink; //不生效,没有匹配元素,因为div的第5个子元素不是p,是h1 } div P:nth-of-type(5) { background: pink; //生效的的是 <p>我是五哥</p&
2021-04-26 19:51:06
184
原创 ant design 修改Tooltip样式
一、 利用overlayClassName给组件起类名<a-tooltip overlayClassName="nameTooltipClass"> <template slot="title"> {{ item.name }} </template> <span class="setting-customNav-customNavItem-content-left-name" :
2021-04-26 19:30:21
3629
原创 mouseenter和mouseleave与mouseover和mouseout的区别
一、mouseenter与mouseover的区别他们都是在鼠标经过时触发相应的事件,但是区别在于:mouseenter 进入和离开 设置的元素 时都会触发事件mouseover 只有在进入 设置的元素 时会触发事件他们最大的区别是:mouseenter只有穿透设置的元素才会触发事件,穿透子元素时不会触发,对应的的事件是mouseleave;mouseover 在穿透设置的元素及其子元素时都会触发,对应的的事件是mouseout...
2021-04-16 19:42:09
476
原创 点击事件@click 失效问题
问题:在标签上设置点击事件@click,发现无法触发事件发生原因:发现这个标签上有个全局样式,对它造成了影响;pointer-event: none解决:将这个属性值改为auto即可pointer-event: auto结束祝你今天好心情!!!...
2021-03-09 19:57:59
3273
1
原创 上传图片 图片名含有&符号 出现签名错误的问题
问题上传图片,图片名含有&符号,后台返回签名错误的提示图片命名是:查看传参:查看Form Data原始数据:原因发现每个参数之间是由&符号进行截断的,当图片名出现&符号时,会误将图片名截断,这是由于我们在请求拦截器中写的传参序列化导致的解决利用Url编码对图片名进行编码,利用encodeURIComponent()这个内置方法,解码对应的函数是decodeURIComponent(name) name = encodeURIComponent(name)
2021-03-05 21:38:54
739
原创 解决 img标签 :src获取静态资源 图片无法显示
背景我专门写了一个配置项js文件,用来存放data数据,如下,文件名为photographerList.jsexport default [ // 摄影师 { id: 0, avatr: '../images/photographers/xingyi.png', name: '邢小军', adress: '上海', price: 2800, introductionUrl: 'https://
2021-03-04 18:56:15
2808
1
原创 vue 优化代码的总结
之前写代码也没人教,现在我写的代码组长有时候会review,并且会提出怎样优化代码,之前写页面也没有很明确的组件化思想,目前这一方面有了很大的提升下面就说一下近期的总结:1. 写自定义组件时,尽量做到复用,不要在组件里面写循环2. 给组件传值,不要传数组,尽量以Object的形式进行传值,可以在组件上v-for数组,然后传item3. 子路由的页面,都可以通过props接收由父路由传递的值4. 利用v-for循环数组时,绑定唯一标识时,尽量不要用index5. 组件要多多利用,可以低耦合
2021-03-04 18:43:46
803
3
原创 ant design 单选框 选中时激活文本变色
ant design 单选框 选中时激活文本变色** html部分**<a-radio-group v-model="formData.isLanguage" @change="pageToNext" > <a-radio :value="0"> 简体中文 </a-radio> <a-radio :value="1"> 繁体中文 </a-radio> <a-radio :value="2">
2021-02-26 20:09:33
1386
原创 利用ref和scrollTo实现页面滚动失效
记录遇到的问题场景:想要页面点击出触发函数实现页面的滚动遇到的问题: 函数成功执行,代码也没问题,但是页面就是没有实现滚动js代码如下:scrollToBottom() { //滚动 var topPublicity = this.$refs.topPublicity; window.setTimeout(() => { Math.animation(document.documentElem
2021-02-25 19:05:22
2340
原创 本地分支合并到远程分支
本地分支newRetoucher合并到远程分支test第一步:在本地分支newRetoucher先将最新的代码上传,基本流程就是git statusgit add .git commit -m ‘…’git push 如果存在冲突,push失败的话,执行下面操作git pull 先拉取,有冲突先解决冲突,再继续git add .git commit -m ‘…’git push成功后,切换到远程分支test第二步:在本地test分支先git pull拉取最新代码,有冲突的话,最简
2021-02-06 19:04:38
1546
原创 删除本地分支和远程分支
删除本地分支和远程分支text-git删除本地比较简单git branch -d text-git2.删除远程分支git push origin --delete test-git
2021-02-06 18:59:54
180
原创 git 合并多次 commmit -----命令行git rebase -i commitId
有的时候我们修改一个小bug就会提交,多次提交会使留下的历史提交信息多而杂,当我们想要将他们的提交信息合并成一个提交信息时,就需要使用这个git 命令行了。git rebase -i commitId首先我们以具体事例来进行演示,需求是:我想要将最近四次提交的commit 合并成一次的提交commit点。第一步:查看我们的提交日志git 命令是:git log我们要注意一个点,最新的提交记录会在最上方第二步:开始合并git 命令:git rebase -i commitId这里的comm
2021-02-06 18:54:31
1520
原创 学习Git 笔记要点
1. Git配置git config --global 读写的是./gitconfig文件git config --ststem 读写的是/etc/gitconfig文件2.配置用户信息git config --global user.name ‘冯巧云’git config --global user.email [email protected]用的是–global ,所以配置信息会存放在./gitconfig文件中,一般在【C:\Users\Administrator.gitco
2021-01-27 19:13:03
131
原创 clipboard 现代化的拷贝文字
使用clipboard 来复制内容到剪切板,既可以借用input 内容文字,也可以自己设定需要复制的内容。第一步: 安装npm install clipboard --save第二步:js 文件 引入import Clipboard from 'clipboard';第三步:使用(1)纯复制文本<div class="body"> <button claass="btn" @click="copy" :data-clipboard-text="this.msg"
2021-01-25 19:24:36
487
1
原创 vue 路由中的meta
vue 路由中的meta我们经常会在进入一个页面时判断是否已经登陆,经常会用到路由导航守卫router.beforeEach(to, from, next), 一个两个页面还好,但是多的话,就会麻烦,并且路由还会嵌套。这时可以使用meta。meta (元数据)在配置路由时,经常会用到path,name,component,还有一个就是meta 元数据,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。经常用它来做登录校验。{ path: '/im
2021-01-20 20:04:42
6462
原创 toFixed() 方法
toFixed() 方法作用将Number 四舍五入为指定小数位数的数字。示例var num = new Number(12.34);console.log(num.toFixed(1));输出结果: 12.3var num = new Number(12.37);console.log(num.toFixed(1));输出结果: 12.4注意事项:NumberObject.toFixed(num)参数 描述num 必需。规定小数的位数,是 0 ~ 20
2021-01-13 20:19:30
1588
原创 Array.of() 方法
Array.of() 方法作用: 用于将一组值,转换为数组Array() 与 Array.of() 写法含义区别:Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。Array(); // []Array(3); // [ , , ] 代表数组长度Array(3,2,1) // [3,2,1]Array.of()方法总是返回参数值组成的数组。如果没有参数,就
2021-01-13 20:12:44
3383
原创 vue中友盟统计---事件跟踪部署
vue中友盟统计—事件跟踪部署事件跟踪的语法:_czc.push(['_trackEvent', category, action, label, value, nodeid])事件跟踪的作用:用于发送页面上按钮等交互元素被触发时的事件请求统计,即统计相应的事件被触发的次数(如视频的播放,音乐播放量)使用场景:js代码中:window._czc.push(['_trackEvent','来源--摄影类', '我要签约'])放在标签中:<a href="#" οnclick="_c
2021-01-12 19:35:33
636
原创 css 中的 clip属性剪裁
clip 属性剪裁在css2 中就已经出现这个属性,用于剪裁绝对定位元素。也就是说,使用这个属性用来剪裁元素时,本身必须是absoulte绝对定位。img { position: absoulte; clip: rect(20px, 100px 100px 20px);}clip: rect(a, b, c, d) 里面的字母代表什么意思?以下图为例:...
2021-01-12 19:19:35
343
原创 学习笔记 -----ES6
ES6新增的语法:let:用于声明变量的关键字。使用let关键字声明的变量具有块级作用域在一个大括内,使用let关键字声明的变量才具有块级作用域, var 关键字不具备这个特点放置循环变量变成全局变量使用let关键字声明的变量没有变量提升使用let关键字声明的变量具有暂时性死区cosnt:用于声明常量;使用const关键字声明的常量具有块级作用域;声明常量时必须赋初值;常量赋值后,值不能修改,分为两种情况:(1)基本数据类型,值就是不可更改(2)复杂数据类型,数据结构内部的值可以更
2020-12-26 06:37:24
302
原创 学习node.js笔记(二)----- Gulp
一、 第三方模块 Gulp基于node平台开发的前端构建工具。将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了。用机器代替手工,提高开发效率。二、 Gulp 能做什么项目上线,HTML、CSS、JS文件压缩合并语法转换(es6、less…)公共文件抽离修改文件浏览器自动刷新三、Gulp使用1.使用npm install gulp 下载gulp库文件2.在项目根目录下简历gulpfile.js文件3.重构项目的文件夹结构 src目录放置源代码文件
2020-12-15 14:09:24
307
原创 学习node.js笔记(一)
一、 几个命令行常用的快捷键shift + 鼠标右键 可以直接在文件目录下打开命令行工具tab 补充完整命令clear 清除上面命令行二、 Node.js模块化开发JavaScript开发弊端:文件依赖和命名冲突一个功能就是一个模块,多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行node.js模块化开发规范:(1)node.js规定一个JavaScript就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到(2)模块内部可以使用exports对象进行成
2020-12-10 18:58:35
142
原创 web前端面试题小结
HTML + CSS标准盒子模型与 IE盒子模型,以及box-sizing属性w3c标准盒子模型: box-sizing:content-boxheight高度只包括content的高度,不包括padding,margin以及border的高度IE盒子模型: box-sizing:boder-boxheight高度不但包括content的高度,还包括padding,border的高度,但不包括margin的高度css选择器有哪些?哪些属性可以继承一共9种。id选择器(#myid),类选
2020-11-30 22:26:12
134
原创 node运行环境搭建
node.js 是 JavaScrip代码运行环境一般在开发中我们都选择长期支持版Node.js运行环境安装下载官网: https://nodejs.org/zh-cn/download/根据你电脑的版本选择相应的版本,然后下载安装,一路next就好。注意: 在安装过程中会有安装路径的显示,路径中最好不要有文字的出现检测node.js是否安装成功window + R 打开运行窗口,输入cmd,回车,打开命令行,输入node -v,回车,若出现版本号,则表示node.js安装成功。
2020-11-27 00:17:27
304
原创 相同组件设置不同css样式
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-08-26 18:31:53
1322
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人