前端
关注
分享
扫一扫
文章平均质量分 58
YodgeGGG
一个雄心勃勃想要深入前端的小菜鸟
展开
-
vue如何制作动态效果的进度条
vue如何制作动态效果的进度条先看效果图制作这样动效的进度条其实很简单，我们只需要将进度条原本的背景通过transparent画出如下图片的效果之后我们通过keyframes设置背景的动画效果就做成了下面上代码首先进度条的进度提示这个就比较简单了，例如我们给一个div中设置了宽高，想要显示进度为50%的进度条，那么我们只需让这个进度条的div宽度等同于父级div宽度的50%就可以了<div class="progresswrapper"> <div class=原创 2020-12-18 16:11:04 · 6429 阅读 · 2 评论 -
vue如何制作自定义表单校验样式
vue如何制作自定义表单校验样式先上效果图由于vue的优越性，所以衍生出很多与之匹配并非常受欢迎的ui组件库，比如最常见的element-ui和antvue，两者内容几乎相同，样式略有差异，所以在制作一款后台管理系统的时候，表单与表格非常重要，对于表单的验证，出于开发效率的原因上我们通常会直接引用这些组件库中的内容，对于这些封装好的组件我们可以通过穿透(深层)样式或是定制样式的方法去修改，但对于一些个性化较强的样式，这样的修改显然很费劲，所以对于这些例如登录/注册或是其他类个性化较强的表单，我们可以自原创 2020-12-17 17:13:56 · 1192 阅读 · 0 评论 -
vue如何实现按下回车键登录
vue如何实现按下回车键登录先上效果图回车键的键值是13这样思路就清晰了，只需一个简单的if判断再调用登录事件的方法就OK了上代码mounted () { var that = this document.onkeydown = () => { var key = window.event.keyCode if (key === 13) { that.LetsGo() } } }LetsGo()是我登录的方原创 2020-12-17 10:32:49 · 826 阅读 · 0 评论 -
vue中父组件如何调用子组件的方法
vue中父组件如何调用子组件的方法首先给子组件添加ref属性<left-navbar ref="leftbar" :LEFT="LEFT" :style="{ 'opacity': LeftOpacity, 'transition': transition, 'top' : LeftNavTop, 'width' : LeftNavWidth }" @NeedChangeInnerwrapper="NeedChangeInnerwrapper" @NeedR原创 2020-12-15 15:33:23 · 352 阅读 · 0 评论 -
JavaScript如何将字符串取反输出
JavaScript如何将字符串取反输出例如在container这个对象中含有字符串“Hello World”，我们如何将他取反输出呢，这里需要用到**split()**方法，它的作用是一个字符串分割成字符串数组，它有两个参数：1.separator，必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。（如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割）。2.howmany，可选。该参数可指定返回的数组的最大长度。如果原创 2020-12-10 15:29:01 · 1632 阅读 · 0 评论 -
如何将button或是input框外面的黑色边框线去掉
如何将button或是input框外面的黑色边框线去掉简单一句话outline:none原创 2020-12-09 18:42:30 · 2532 阅读 · 0 评论 -
line-height:1是什么意思
line-height:1是什么意思其实仍旧是设置行高的一种方法，只不过简化了语句举个例子，比如此时你设置了font-size：20px，之后你设置了line-height:1，转义过来的意思就是line-height:20px，行高为20px，这种定义样式的方法通常会用于iconfont的设置好啦，就是这么简单，希望可以解答你的疑惑！...原创 2020-12-09 18:40:41 · 6752 阅读 · 1 评论 -
通过案例(面试题)来讲解class优先级的问题
通过案例(面试题)来讲解class优先级的问题首先先看问题<html><style> .class1{ color:red; } .class2{ color:blue; }</style><p class="class1 class2">abc</p><p class="class2 class1">abc</p><html&g原创 2020-12-08 17:19:30 · 257 阅读 · 0 评论 -
关于el-table-column组件添加fixed属性后出现行高不冲齐的问题
**关于el-table-column组件添加fixed属性后出现行高不冲齐的问题**闲话少说，先上问题截图这是我遇到的问题，使用flex布局，在浏览器窗口回归正常时，行高会错乱下面说解决办法之前尝试过在vue根组件添加display: table-cell!important，没有起效果，综合了一下搜索的内容，找到了如下解决办法，在mounted()生命周期钩子函数中我们强制让el-table这一组件刷新。首先在el-table中添加ref属性之后在mounted函数中写入如下代码这原创 2020-11-19 16:36:37 · 2711 阅读 · 0 评论 -
el-table表单实现点击编辑按钮对内容进行编辑
el-table表单实现点击编辑按钮对内容进行编辑话不多说，先上效果图这里我将按钮绑定了dialog对话框，避免直接在原有表行之间进行修改，因为后台管理系统多是响应式布局，使用dialog对话框可以更直观的让用户对内容进行编辑，而对于在原有表行中进行编辑，可能会因为窗口的大小造成编辑上的不便，这仅是个人理解下面上代码首先在表行中的el-button绑定el-dialog对话框在饿了么的开发文档上写的很清晰，使用visible<el-dialog id="edit" title="数据产品原创 2020-11-20 11:41:05 · 3592 阅读 · 2 评论 -
vue如何让el-breadcrumb面包屑导航栏根据路由跳转地址动态切换标题内容
Vue如何让el-breadcrumb面包屑导航栏根据路由跳转地址动态切换标题内容废话少说，先上效果图其实想要实现图片上的效果非常简单，我们直接使用路由元信息即可解决，关于路由元信息的解答vue-router上面的开发文档写的非常详细，大家可以自行了解下，下面说代码我们只需在配置的路由信息下加入一个meta字段，写上你想要插入面包屑导航栏标题中的内容之后我们只需在面包屑导航栏中写如下代码{{$route.meta.title}}这样，面包屑导航中就会出现不同路由地址对应的不同标题内容啦！原创 2020-11-24 15:17:18 · 8043 阅读 · 3 评论 -
vue如何根据不同路由地址更改页面的标题
Vue如何根据不同路由地址更改页面的标题先上效果图这个效果实现起来很简单，只需要用到Vue-router中的全局路由守卫分别有beforeEach（进入路由之前），beforeResolve（解析路由）以及全局后置钩子afterEach我们可以简单的看一下这三个守卫和生命周期函数的关系，我们用日志打印一下看看可以看出，这三个守卫全部在生命周期函数之前执行，所以在全局守卫中是不能调用vue实例的，因为实例还未被解析我们利用全局前置守卫beforeEach就可以实现更改标题的效果router.原创 2020-11-24 15:34:51 · 1165 阅读 · 0 评论 -
vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式
Vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式闲话少说，先上效果图可以看到，当页面超出某一位置时，主导航消失，副导航显示，当页面重新回到该位置时，主导航会再次显示简单说下原理，其实页面当中本身就存在着两个导航栏，只是通过v-show来控制他们俩之间的显隐而副导航是固定在浏览器窗口的，所以他的position必须是fixed，即相对浏览器窗口进行定位剩下的事情就是我们监听页面的滚动高度来判断在什么时刻进行动画效果的展示原理是不是很简单！原理搞懂后，我们就抓紧实现原创 2020-11-24 16:04:19 · 1837 阅读 · 2 评论 -
vue如何实现el-menu与el-tabs联动，通过点击el-menu导航中的选项动态添加el-tabs页面
Vue如何实现el-menu与el-tabs联动，通过点击el-menu导航中的选项动态添加tab页面老规矩，先上效果图！达成这个效果，首先我们先了解下原理在el-menu中有一个属性router，开发文档中写的非常清晰，选择该属性后即开启路由跳转，即点击el-menu中的子选项后会进行页面跳转，但是你必须将需要跳转的路由地址写为跟组件的子路由地址，否则点击跳转后会直接跳向路由地址对应的页面，这样就失去了我们想要实现的效果接下来说下el-tabs，它的构成规则大家可以去看一下饿了么ui（eleme原创 2020-11-25 16:58:36 · 12570 阅读 · 39 评论 -
vue如何实现边框线拖拽效果
Vue如何实现边框线拖拽效果闲话少说，先上效果图！这里我多加了一个点击边框线后隐藏左侧内容，给主体区域创造更大空间，这个看大家个人需求了，需要就用上下面说下实现原理，首先这个边框线是一个单独的组件，我把它单独放在了一个公用目录下可做全局的公用组件我们只需通过几个简单的监听事件就可以实现以上效果，分别是mousedown（鼠标左键点击下去触发的事件），mouseup（松开鼠标左键触发的事件），mousemove（指定元素鼠标移动触发的事件）那么清楚这些后，思路就非常清晰了，点击这条边框线组件后，子原创 2020-11-25 18:17:21 · 3000 阅读 · 1 评论 -
v-for如何循环iconfont图标
v-for如何循环iconfont图标先上个效果图关于iconfont如何添加至项目大家可以自行搜索下，很简单，通常我们引用iconfont图标的方式是复制代码然后直接引用，但是在v-for循环的数据中，直接写入循环出的内容就是一堆字符串，那么怎么解决呢，大家打开iconfont.css看下.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-fon原创 2020-11-25 17:16:20 · 2920 阅读 · 0 评论 -
vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果
Vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果先上效果图看下有可能大家想要实现别的应用动画效果，但是掌握好这个技巧后基本可以适用许多简单的基础动画效果先说下原理，其实这里用到的是vue中两个监听事件，分别是mouseover（鼠标悬停在指定元素上）和mouseout（鼠标离开指定元素后），知道了这两个监听事件后，大家应该已经明白是怎么回事了吧下面上代码<span class="right-showout-icon iconfont" :style="{'colo原创 2020-11-26 15:05:39 · 3171 阅读 · 0 评论 -
vue如何解决鼠标进行拖拽时禁止选中其他元素
Vue如何解决鼠标进行拖拽时禁止选中其他元素实现这个方法很简单，我们只需在你想要禁用指定元素的拖动选项即可加入以下代码unselectable="on"onselectstart="return false"style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"加入以上代码来适配不同的浏览器好啦，这样问题就解决啦！...原创 2020-11-27 11:01:27 · 2476 阅读 · 0 评论 -
vue如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果
如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果话不多说，先上图这里两个导航栏分别是不同的组件（我使用的是Vue），但样式原理是一样的，可以用vuex或是父子组件传值的方式来控制v-show的true或false，在点击全屏按钮时，顶部导航栏会向父组件传递一个事件，在父组件进行监听，随后根组件会动态的向两个子组件（两个导航栏）派发当前v-show的值，之后我们通过settimeout函数令v-show这一事件做延迟处理，先让导航栏的opacity即透明度进行一个变化，待透明度完全变为原创 2020-12-06 17:43:11 · 1762 阅读 · 0 评论 -
CSS样式中解决背景图片不能完美填充页面(页面高度很高)
先上个图这里我的图片是1920x1080像素的但页面高度有2000像素左右，想要图片可以完美填充页面背景只需写入以下代码body { margin: 0; padding: 0; background-image: url(assets/img/bg15.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }重中之重就原创 2020-12-07 11:19:25 · 2008 阅读 · 3 评论 -
通过案例(面试题)深度理解absolute与relative的关系(有无TRBL,有无父级）
通过案例深度理解absolute与relative的关系(有无TRBL,有无父级）我们先通过一段代码来引入这个问题<style> span { background-color: #FFFFFF; } p { background-color: blue; position: absolute; top: 0; left: 0; } </style&g原创 2020-12-08 11:39:46 · 354 阅读 · 0 评论