- 博客(29)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 vue中事件修饰符，stop,prevent,capture,self,once
1,stop修饰符，能够阻止冒泡事件，按照案例说明如下：按钮在div容器中。①，点击框中非按钮的位置，会触发div的事件②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件注意：此时还没加stop事件③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下，stop会阻止事件冒泡行为。代码如下：<templ...
2020-01-10 17:03:58
1143
原创 div+css 元素水平居中 及垂直居中的几种写法
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。 谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。一、水平居中 使用CSS控制水平居中很简单：...
2020-01-03 10:08:36
1246
原创 js--数据类型是nodeList 转成数组Array类型
问题：获取div下的子元素获取div为 class=‘mainContent’下的所有子标签使用 Array.prototype.slice.call(NodeList); let contentMain = document.querySelector('.mainContent'); let nodes =contentMain.childNodes; //nodeList类型 l...
2020-01-21 16:36:03
890
原创 css动画--使用图标进行顺时针与逆时针转圈
css动画–使用图标进行顺时针转圈代码如下：<template> <div style="width:1300px;height: 600px;border: 1px solid red;margin:0 auto"> <div class="circel"> </div> </div&g...
2020-01-21 16:08:13
5200
原创 vue项目开发首页模板，支持scroll鼠标滑动，菜单按钮选项会浮动
案例：如下图所所示，项目首页类似如下图所示的结构，菜单模块（模块A，模块B，模块C），点击 “模块A”的时候，在浏览器上会滚动到A模块的内容上，点击“模块B”会滚动到“模块B”的模块上，模块C 同上。当浏览器鼠标下滑时，菜单模块会进行浮动。注意事项：本案例需重构 html与body的height，如下代码html,body{ height: 100%;}1，菜单模块在浏览是悬浮...
2020-01-21 14:28:24
693
原创 div上添加scroll监听事件失败的原因
1，问题：在给div添加scroll监听事件时，发现添加失败，即在添加的方法中没有执行要添加方法，如下document.querySelector('.appMain').addEventListener('scroll',this.handleScroll,true)2，发现问题在寻找问题的过程中，使用window添加 scroll 监听事件时可以的，但是在div上添加scroll监听事...
2020-01-21 12:05:13
6388
1
原创 vue项目引入vue-scrollto
vue-scrollto 官方网址为：https://www.npmjs.com/package/vue-scrollto由于没有安装vue-scrollto，会爆出 Can’t resolve 'vue-scrollto’的问题，如下所示：解决方案：使用npm安装则如下：npm install --save vue-scrollto使用yarn则如下：yarn add vue-...
2020-01-20 15:16:11
3768
原创 css去掉 ul li标签的前的点
开发中ul li标签前默认存在一个小点，去掉默认点使用list-style-type: none;即可list-style-type: none;
2020-01-20 14:12:24
13585
原创 vue项目el-table使用slot解决表头是可变的列
vue项目el-table使用slot解决表头是可变的列需求：列表中表头是不固定的，可以说是个可变的列，所以使用了slot标签和循环遍历可变的数组。案例和代码如下所示。代码如下：<template> <div> <el-table ref="tab" stripe ...
2020-01-19 16:08:30
6300
原创 vue项目中slot的使用
vue中的插槽————slot插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。案列如下：①SectionSet.vue是带有slot的一个组件②SlotTest.vue组件调用SectionSet.vue组件代码如下：SectionSet.vue组件<template&g...
2020-01-19 14:18:39
358
原创 vue项目中添加lodash
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。官方网址为：https://www.lodashjs.com/1，安装Lodash，通过npm安装，如下： npm i -g npm npm i --save lodash浏览器环境中，引入如下：<script src="lodash.js"></script>2，引入load...
2020-01-19 10:13:24
1351
原创 git常用命令
项目已提交到git后，创建新的文件及修改文件常用的命令（如多个人需要更新代码）1，git add -A2，git commit -m “备注信息”3，git push需要填写用户名/密码...
2020-01-17 17:48:43
84
原创 vue锚点滚动问题v-scroll-to
使用v-scroll-to 可解决锚点问题，在offset中可使用三目运算符v-scroll-to="{ element: ‘#v’ + index, offset: -20 }"
2020-01-17 16:56:21
1447
原创 onscroll事件没有响应的问题
案列：在项目中给页面dom元素添加scroll事件，即鼠标上下滚动时发现没有响应，排查问题如下我遇到的问题如下：①没有添加over-flow:auto②在绑定的元素上 document.querySelect(’.bindDiv’).addEventListener(‘scroll’,this.myScroll) ,添加监听事件后，在myScroll方法中没有起作用③在window上添加w...
2020-01-16 19:59:32
1871
原创 安装Adobe AIR 时出错 管理员可能不允许安装
工作中遇到的问题，下载软件找了好几个都不成，废了些时间，所以就分享一下1，解决这个问题，需要先下载Windows Installer Clean UP,然后运行，然后卸载Adobe AIR ，详细方法不再赘述，主要参考了百度文章 ，地址链接如下： https://jingyan.baidu.com/article/8065f87f8a605a23312498b2.html安装Adobe AIR...
2020-01-15 12:09:40
1611
原创 vue项目中使用阿里iconfont图标
本文是在vue项目中集成阿里iconfont图标库，本文添加的图标结果案例如下图所示。具体步骤如下：1，进入阿里 https://www.iconfont.cn 图标库，登录自己的账号密码，如果没有账号，请先注册账号后登录。2，在iconfont首页 点击“图标管理”后选择“我的项目”，如下图所示。3，新建项目，在图标管理中，选择如下图所示的紫色按钮图标，点击后会出现新建项目的弹框，如...
2020-01-14 16:47:50
6502
1
原创 vue中axios的简单使用
1，本文是对axios的简单使用，并没有对axios进行封装首先在vue项目安装axios，如下代码npm install axios --save2，直接使用axios在axios请求之前：如下图所示。在axios请求之后，得到数据，如下图所示。代码如下：<template> <div> <input type="but...
2020-01-13 16:10:04
165
原创 vue项目引入全局vuex
Vuex 是一个全局的共享数据存储区域，相当于一个数据的仓库，Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组件之间传值了，如果组件的数据不需要共享，就不必放到vuex中；只有共享的数据。配置vuex可有如下五个步骤运行 cnpm i vuex -S导入包注册vuex到vue中new Vuex.Store() 实例，得...
2020-01-13 11:00:25
3251
原创 使用element的Tree树形控件，节点选中状态下设置禁用disabled,每次选一个，且不可编辑
使用element的Tree树形控件，节点选中状态下设置禁用disabled,每次选一个，且不可编辑，效果如下图所示。代码如下：<template> <div class="tree3"> <el-tree :data="data3" ref="tree" ...
2020-01-10 12:08:17
16860
原创 CSS3 box-shadow 属性使用案例
对css3 中的box-shadow的使用案例如下几个案例！截图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>boxShadow应用</title> <style> ...
2020-01-08 20:27:03
361
原创 js中使用if(val)判断中,val值会被认为是false的情况
js中使用if(val)判断中,val值会被认为是false的情况，如下图所示① if(undefined)② if(0)③ if(null)④ if("") //空字符串⑤ if(NaN)⑥ if(false) 本身即是Boolean代码如下所示，浏览器运行结果如上图所示。<!DOCTYPE html><html lang="en"><hea...
2020-01-08 14:49:29
1778
原创 vue项目中 el-tree 的扩展下拉图标放置右侧
vue项目中原有的扩展下拉图标默认是放在左侧的，现在需求：是放置在右侧。如下两个图所示：图一 为默认，图二为已放置右侧的图标代码如下：<template> <div class="tree-scroll"> <el-input style="width: 180px;margin-top: 10px" p...
2020-01-08 11:17:29
4396
原创 css3中 flex:1的使用
案例1：设置div的flex:1 会得到剩余的宽度假设a是父组件，用flex布局设置子控件左右居中，width:400px；display:flex;b是子控件，居左。width：150px;c是子控件，居右。width不给，设置flex：1；那么c.width = a.width-(a的margin和padding[左右])-b.width–(b的margin和padding[左右])-...
2020-01-08 10:13:31
11314
原创 css 修改浏览器滚动条样式
本文是基于谷歌浏览器将原有的滚动条样式进行修改，修改结果如下所示。代码如下：<style> ::-webkit-scrollbar{ width: 5px; height: 5px; } ::-webkit-scrollbar-track-piece{ background-color: rgba(0,0,0...
2020-01-07 16:24:38
313
原创 vue项目中el-tree 支持横向和纵向滚动条设置
vue项目中el-tree 支持横向和纵向滚动条设置，如下所示。①纵向滚动条容易设置，只需要在el-tree组件中设置height即可②横向滚动条稍微复杂，如下代码<template> <div class="tree-scroll"> <el-input style="width: 180px;margin-top: 10px" ...
2020-01-07 10:27:25
21063
4
原创 vue知识点，面试题考试
vue面试题1.Vue和react的相同与不同相同点：都支持服务器端渲染都有virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现webComponent规范数据驱动视图都有支持native的方案，react native，Vue的weex都有管理状态，react有redux,vue有自己的VueX不同点：react严格上只针对MVC的view层，V...
2020-01-03 11:14:41
225
原创 vue中使用v-for遍历对象的键和值
使用v-for遍历对象的键和值时要注意，v-for="(val, key, i) in obj，其中val是值，在键的前面， 除了 有 val key ,在第三个位置还有 一个 索引<body> <div id="app"> <!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 --&g...
2020-01-02 14:21:22
10712
原创 Vue项目中引入全局路由router
Vue项目中引入全局路由router并可以通过浏览器路由的改变页面内容而随之改变，可分为如下几个步骤①创建一个mainRoutes.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new Router({ routes:[ { ...
2020-01-02 13:50:33
8543
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人