
前端
哈哈hyc
这个作者很懒,什么都没留下…
展开
-
Do not access Object.prototype method ‘hasOwnProperty‘ from target object
今天用对象的属性hasOwnProperty,去判断对象是否包含该值,我这里主要判断对象是否为空,出现了以上错误,之前也遇到过类似的错误,如parseInt(‘24.5’),必须要给转换的进制类型,改为parseInt(‘24.5’,10)则正常通过上述文字提示发现,不要从目标对象访问 Object 原型方法”,想到一种解决方案——直接找到这个方法,用 call 改变指向调用:Object.prototype.hasOwnProperty.call(obj, 'key')在ECMAScript.原创 2021-08-13 17:07:23 · 654 阅读 · 0 评论 -
vue3.0中setup使用(两种用法)
一、setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的原创 2021-07-13 10:59:11 · 4954 阅读 · 1 评论 -
vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件.原创 2021-03-16 09:55:10 · 705 阅读 · 0 评论 -
element-ui树形图,名字过长滚动条问题
<el-tree ref="tree" v-loading="treeLoading" default-expand-all :expand-on-click-node="false" :data="treeData" :filter-node-method="filterNode" :props="defaultProps" style="margin-top: 8px;" @node-click="handleNodeClick"/>/deep.原创 2021-01-07 14:44:58 · 624 阅读 · 0 评论 -
基于vuex的任务事项管理的小demo
基于vuex的任务管理的小demo,适合学习vuex,充分运用了vuex程序demo页面使用到的vuex方法总概况大家可以自己看看,探讨一下,附git地址:https://github.com/erdfty/vuex-todos原创 2020-11-06 17:12:53 · 199 阅读 · 0 评论 -
vue路由切换之淡入淡出的简单实现
路由跳转的淡入淡出在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性<transition name="fade" mode="in-out"><router-view ></router-view></.原创 2020-10-09 14:07:09 · 2176 阅读 · 0 评论 -
css3字体背景颜色跑马灯
页面效果CSS .title { border: 0px; font-size: 200%; font-weight: bold; float: left; line-height: 1.5; width: 100%; padding-left: 5px; margin-top:0px;原创 2020-10-09 14:04:31 · 702 阅读 · 0 评论 -
Vue 实现复制功能,不需要任何结构内容直接复制方式
介绍:在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现。在查阅资料时候,发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容,感觉很不方便。使用:methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; //原创 2020-09-28 15:38:04 · 784 阅读 · 0 评论 -
Vue 自定义指令实现点击DOM元素以外触发事件
1.directive.jsimport Vue from "vue";// 提交验证Vue.directive("clickOutside", { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身,是本身,则返回 if (el.contains(e.target)) { return false; }原创 2020-09-16 17:12:06 · 1867 阅读 · 0 评论 -
在Vue中使用JSX作为render
ant-design-vue开源了一段时间后,收到了一些反馈,尤其是Form组件上线后,很多用户对JSX的使用感到迷惑和不习惯,为此专门介绍下Vue JSX的使用姿势及注意事项。Form组件的自动收集校验功能需要在JSX下使用,当然如果不需要自动收集校验,你依然可以使用templateVue 推荐在绝大多数情况下使用template来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,就需要使用render函数,它比 template 更接近编译器...原创 2020-09-16 15:54:11 · 1563 阅读 · 0 评论 -
div在body中可以任意拖动
HTML代码<div id="idOuterDiv" class="CsOuterDiv"> </div>CSS代码body { background-color:#232429;}.CsOuterDiv { width:256px; height:146px; background-color:white; position:absolute; top:50%; left:50%; tra.原创 2020-09-07 17:10:11 · 252 阅读 · 0 评论 -
js 实现 list转换成tree的方法示例(数组到树)
目标:JS 将有父子关系的平行数组转换成树形数据方法:双重遍历,一次遍历parentId,一次遍历id == parendId;该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;const oldData = [{id:1,name:'boss',parentId:0},{id:2,name:'lily',parentId:1},{id:3,name:'jack',parentId:1},{id:4,name:'john',parentId:2},...原创 2020-07-30 15:42:07 · 3077 阅读 · 0 评论 -
在vue中阻止click事件冒泡,防止触发冒泡另一个事件
使用vue阻止子级元素的click事件冒泡,很简单,用stop<div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span></div>这样点击div里面的按钮1,就不会触发div绑定时间test1()方法...原创 2020-07-01 10:45:07 · 3354 阅读 · 0 评论 -
网站前端如何实现HTML转PDF下载的两种方式
将HTML页面转化为PDF下载是前端经常会遇到的需求,下面就列举两种方式进行实现。以下两种方式默认都是在Vue项目环境下,其他框架项目自行灵活运用。方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下:1,下载插件模块npm install html2canvas jspdf --save2,定义功能实现方法在项目工具方法存放文件夹utils中创.原创 2020-06-11 19:25:56 · 1419 阅读 · 1 评论 -
JavaScript中将iso8859-1的字符转换成中文
var str = “ç\u0088±æ\u0088\u0091ä¸\u00ADå\u009B½”;var utfstring =decodeURI(escape(str))是用escape把iso8859-1的字符进行编码,然后再调用decodeURI按照utf8的方式进行解码。当然上面的编码会把符号也会转义,这个时候只需按照下面的改下就可以了var str = “ç\u0088±æ\u0088\u0091ä¸\u00ADå\u009B½”;var utfstring =decode.原创 2020-05-15 09:07:27 · 5073 阅读 · 2 评论 -
基于vue+iview实现省市区三级联动
表单关键代码<FormItem prop="province" label="省份"> <Select v-model="formValidate.province" placeholder="请选择省份" @on-change="changeProvince"> <Option v-for="(item,index) in provin...原创 2020-04-23 14:25:51 · 1806 阅读 · 0 评论 -
VUE模仿百度搜索框,按上下方向键及回车键实现搜索选中效果
逻辑介绍: 1、表单获取焦点时,显示搜索建议框 2、输入内容时,请求后台接口,并将返回的数据展示在搜索建议框内 3、表单获取焦点情况下,按键盘上下箭头可实现搜索列表项的切换,按回车可以选择当前激活的选项并获取当前选项的数据,然后你可以用数据做其他事了<template> <div class="container"> <div clas...原创 2020-04-21 15:13:06 · 2053 阅读 · 0 评论 -
"export 'default' (imported as '...') was not found in ''..."错误处理
开发中遇到的一个简单问题 却花了我很长时间//在一个js文件中导出fetch请求方法import fetch from 'utils/fetch';export function getCompanyList() { return fetch({ url: '/wx/company/list', method: 'get' })}//在vue的s...原创 2020-04-21 14:57:10 · 43469 阅读 · 9 评论 -
安卓、ios时间转换成时间戳的形式
将日期转换成时间戳的形式,在安卓和ios不同的系统下转正会有兼容性的问题安卓系统下Date.parse(new Date('2018-03-30 12:00:00'))会直接转换成时间戳的形式(简单说就是整数形式)ios系统下Date.parse(new Date('2018-03-30 12:00:00'))sorry,转换不了解决方法ios系统下使用Date.parse...原创 2020-03-25 09:21:20 · 337 阅读 · 0 评论 -
6种css3鼠标滑过动画效果
<html><head> <meta charset="utf-8" /> <title>6种css3鼠标滑过动画效果</title> <style type="text/css"> /*****全局样式*****/ * { padding原创 2018-09-27 16:11:03 · 4669 阅读 · 0 评论 -
es7中Async/await学习
Async/await有一种特殊的语法可以更舒适地与promise协同工作,它叫做async/await,它是非常的容易理解和使用。Async functions让我们先从async关键字说起,它被放置在一个函数前面。就像下面这样:async function f() { return 1}函数前面的async一词意味着一个简单的事情:这个函数总是返回一个promi...翻译 2019-05-05 10:40:05 · 306 阅读 · 1 评论 -
移动端解决点击300ms延迟问题
在页面中加上如下代码: <!-- 下面这段Js是为了解决移动端点击300ms延迟问题 --> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('...原创 2019-04-30 09:47:07 · 1120 阅读 · 0 评论 -
vue项目proxyTable配置和部署服务器的问题
在localhost环境下跑项目时,接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,我们进入 config/index.js 代码下如下配置即可。dev: { // 静态资源文件夹 assetsSubDirectory: 'static', // 发布路径 assetsPu...原创 2019-04-30 22:43:45 · 1025 阅读 · 0 评论 -
vue 生命周期 详解
先来看看vue官网对vue生命周期的介绍Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始...原创 2019-04-30 22:47:01 · 257 阅读 · 0 评论 -
stylus的基本用法
1.语法Stylus的语法花样多一些,它使用“.styl”的扩展名,Stylus也接受标准的CSS语法,但是他也接受不带花括号和分号的语法,如下所示:/* style.styl */h1 { color: #0982C1;}/* 省略花括号 */h1 color: #0982C1;/* 省略花括号和分号 */h1 color #0982C12.变量你可以在...原创 2019-04-30 22:55:19 · 4099 阅读 · 0 评论 -
网页中设计中禁止input框输入空格的做法之一
<input class="layui-input" id ="groupName" name="groupName" value="${advGroup.groupName}" placeholder="请输入" />这是原本的 input 输入框 , 可以输入空格提交表单onKeypress="javascript:if(event.keyCode == 32)eve...原创 2019-05-22 19:07:22 · 835 阅读 · 1 评论 -
input 输入框 只能输入数字、字母、汉字等
<!-- 1.文本框只能输入数字代码(小数点也不能输入) --><input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"><br><br><!-- 2.只能输入数字,能输小...原创 2019-05-22 19:10:29 · 2880 阅读 · 0 评论 -
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
<!doctype html><html><head> <title>js</title> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <scrip...原创 2019-05-29 14:26:00 · 3026 阅读 · 0 评论 -
初始化一个react项目
初始化一个react项目mkdir init_reactcd init_reactnpm init //如果没有什么特殊的配置一路回车,得到package.json文件目录结构dist ---------------------------------------------> //用于存放webpack打包之后的项目文件index.html ---------...原创 2019-08-12 14:08:59 · 475 阅读 · 0 评论 -
-webkit-overflow-scrolling解决移动端iOS滚动卡顿现象
css3中-webkit-overflow-scrolling使用方法-webkit-overflow-scrolling: touch; //有回弹效果-webkit-overflow-scrolling: auto; //滑到哪停到哪实现滚动回弹效果的页面布局 (实战)html<div class="containBox no-scrollbar"> ...原创 2019-08-12 14:42:50 · 1519 阅读 · 0 评论 -
react中JSX详解
什么是JSXJSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。其表现是如何:常规的html代码都可以写,可以通过{props}往html中插入变量或任意有效的JS表达式,而无须加上$ 此外还可以插入带参数的函数{func(props)}<h1>Hello, {getName(props)}<...原创 2019-08-26 14:12:35 · 1174 阅读 · 0 评论 -
js中=,==,===的区别和使用
js中== 是赋值的意思,让左边的值等于右边的值==== 是判断等于的意思,返回值是一个布尔值,它只判断值是否相等,不判断类型是否一样====== 也是判断等于的意思,返回值也是一个布尔值,但是它不仅仅判断值是否相等,还判断类型是否相等java中java中只有=和==还有equals=是赋值的意思,同js==基本数据类型比较的是数值是否相等引用类型比较是不是同一个对象,...原创 2019-03-26 18:24:19 · 260 阅读 · 0 评论 -
利用vue,bootstrap制作简单的列表展示,添加和删除功能
实现效果如下图所示:添加按钮直接添加删除按钮可以删除其中的知识点有:bootstrap运用,v-model,@keyup,@click,全局过滤器,私有过滤器,自定义全局按键修饰符,Vue.directive() 定义全局指令,自定义一个颜色的指令等一些知识点,大家可以参考参考,代码如下:<!DOCTYPE html><html lang="e...原创 2019-03-13 16:56:53 · 1318 阅读 · 0 评论 -
移动swiper中动画卡顿,通过requestAnimationFrame写向下的动画
当手机网页使用swiper的时候,在css中写入动画的时候有些时候浏览页面会进行卡顿,这个时候你就需要手写动画了,以下为参考的一些的案例,大家可以用来参考setT(); var dataSet = 0, dataStop = 0.35, dataSetT = 7; function setT(){ $(".jiantou").css({"margin-bot...原创 2018-11-16 09:55:58 · 2694 阅读 · 0 评论 -
解决移动端视频层级最高的问题,修改video属性
在网页设计在移动端设计的时候有些box里面都是需要放置video的时候,video的时候的层级总是最高的,这个时候就是需要在video的基础上修改属性就可以了,具体的属性如下,大家可以参考参考:<video src="https://hy.v.netease.com/2018/1030/5c9caed3eea6c6e079673d031fca3350qt.mp4" controls="...原创 2018-10-31 13:59:33 · 35484 阅读 · 22 评论 -
前端写README.MD的最全Markdown使用帮助
# 欢迎使用Markdown编辑器写博客 --------------------------- 撤销:Ctrl/Command + Z 重做:Ctrl/Command + Y 加粗:Ctrl/Command + B 斜体:Ctrl/Command + I 标题:Ctrl/Command + Shift + H 无序列表:Ctrl/Command +...转载 2018-10-24 10:57:46 · 2138 阅读 · 0 评论 -
解决音频在ios环境下播放会全屏的bug方法
网页设计在移动端的时候,会出现播放自动全屏的效果的,说实在这个问题还是蛮棘手的,以下为次bug的解决方法:<audio id="video" preload="none" class="hide video" width="0" height="0"></audio>这个时候需要给sudio加上autoplay属性就可以不实现全屏自动播放了原创 2018-10-24 10:50:35 · 687 阅读 · 0 评论 -
jQuery检测浏览器的语言,并做相应的操作
有时候需要判断浏览器所用的语言,在网上查找了一下,整理如下,大家可以参考使用:// 检测浏览器语言var chk_userlanguage = function() { /* get browser default lang */ if (navigator.userLanguage) { baseLang = navigator.use...原创 2018-10-19 14:14:43 · 1801 阅读 · 0 评论 -
Swiper运用在苹果移动端的变暗bug修复
有时候我们在手机端制作全屏滑动的时候可以用到swiper这个插件,插件好用是好用,但是有的时候就会出现一些小bug,比如运用swipper之后苹果手机打开点击或者长按的时候就会变暗,这个时候我们需要用到一些属性控制他就可以使他不会变暗了,一下为css控制的代码:* { outline: none; webkit-focus-ring-color: rgba(0, 0, 0, ...原创 2018-09-30 11:18:15 · 1116 阅读 · 1 评论 -
AngularJS 模块
对于 HTML 应用程序,通常建议把所有的脚本都放置在 <body> 元素的最底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。在我们的实例中,AngularJS 在 <head> 元素中被加载,因为对 angular.mo...原创 2018-10-08 09:42:04 · 194 阅读 · 0 评论