哈哈hyc-CSDN博客

原创 post方式返回文件流实现前端blob下载,responseType: ‘blob‘无效

一般情况下，下载分为好几种，但是常用的是get下载文件流直接下载post下载文件流是很少见的，但是鉴于参数太多，不能走get 只能走post下载，post下载分为两种：1.form表单下载2.post返回文件流转成blob下载，研究了很久也很坑，上代码：这个地方如果responseType设为blob的话，返回的文件流将会被转成blob对象，不是文件流，但是无论怎么设置都没有转成blob对象，网上有很多解释，一个是说封装好的axios设置responseType是无效的，于是乎，我就引入了原生axios，

2022-07-12 16:23:25 3979 1

原创 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 580

原创 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 4772 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 614

原创关于Vue不能监听（watch）数组变化

一、vue监听数组vue实际上可以监听数组变化，比如data () { return { watchArr: [], };},watchArr (newVal) { console.log('监听：' + newVal);},created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000);},在比如使用splice(0,2,3)从数组下标0删除两个元素，并在下标0插入一个元

2021-02-24 19:11:57 2177 1

原创 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 569

原创基于vuex的任务事项管理的小demo

基于vuex的任务管理的小demo，适合学习vuex，充分运用了vuex程序demo页面使用到的vuex方法总概况大家可以自己看看，探讨一下，附git地址：https://github.com/erdfty/vuex-todos

2020-11-06 17:12:53 156

原创 vue路由切换之淡入淡出的简单实现

路由跳转的淡入淡出在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性<transition name="fade" mode="in-out"><router-view ></router-view></.

2020-10-09 14:07:09 1963

原创 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 609

原创 Vue 实现复制功能,不需要任何结构内容直接复制方式

介绍：在做复制文档功能时，考虑到是个不太会复用的小功能，最后选择直接用 document.execCommand 方法实现。在查阅资料时候，发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容，感觉很不方便。使用：methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; //

2020-09-28 15:38:04 724

原创 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 1701

原创在Vue中使用JSX作为render

ant-design-vue开源了一段时间后，收到了一些反馈，尤其是Form组件上线后，很多用户对JSX的使用感到迷惑和不习惯，为此专门介绍下Vue JSX的使用姿势及注意事项。Form组件的自动收集校验功能需要在JSX下使用，当然如果不需要自动收集校验，你依然可以使用templateVue 推荐在绝大多数情况下使用template来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，就需要使用render函数，它比 template 更接近编译器...

2020-09-16 15:54:11 1458

原创 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 215

原创 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 2946

原创 vue中按钮防止暴力点击，多次提交数据的问题，组件通用化封装

方法1：用计时器改变按钮可点击状态<template> <div class="test"> <button @click="btnClick">button</button> </div></template><script> export default { name: 'HelloWorld', data() { return { is_...

2020-07-18 10:36:22 944

原创在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 3295

原创网站前端如何实现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 1211 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 4479 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 1718

原创 VUE模仿百度搜索框，按上下方向键及回车键实现搜索选中效果

逻辑介绍：　　1、表单获取焦点时，显示搜索建议框　　2、输入内容时，请求后台接口，并将返回的数据展示在搜索建议框内　　3、表单获取焦点情况下，按键盘上下箭头可实现搜索列表项的切换，按回车可以选择当前激活的选项并获取当前选项的数据，然后你可以用数据做其他事了<template> <div class="container"> <div clas...

2020-04-21 15:13:06 1897

原创 "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 43050 9

原创网页设计js 判断数据是否为空

// var a = "";// var a = " ";// var a = null;// var a = undefined;// var a = [];// var a = {};// var a = NaN; if(a === undefined) { // 只能用 === 运算来测试某个值是否是未定义的 ...

2020-04-21 13:52:01 379

原创安卓、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 291

原创小程序中vue for循环出来的数据变成折叠面板

在我们制作移动端折叠面板的时候，可以按照ref的方式获取高度来调节，但是我们在写小程序的时候，要按照小程序的api来获取修改高度，以下为完整的折叠面板代码，可以实现自动识别高度，是否折叠v-for里面写class="changeBox" :style="{'height':flag[index] ? heightArr[index] < staticHeight ? heightA...

2020-03-09 20:02:46 1162

原创 vue for循环出来的数据变成折叠面板

v-for 里面写 :class ='{active:flag[index]} @click="showContent(index)"data:{ flag:[]}showContent:function(index){ var f=this.flag[index] = !this.flag[index] this.$set(this.flag,index,f);...

2020-03-09 19:52:40 1133

原创 filter函数（JS）

filter函数filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：var arr = ...

2020-01-10 17:12:06 4561

原创 webkit-box-orient不见了， webkit 和 autoprefixer 的坑

autoprefixerautoprefixer不仅会帮你加-webkit-之类的prefixer，它还会帮你删除你自己写在 css/sass/less里的样式，真是厉害了关闭autoprefixer的自动删除功能，这样：/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */...

2019-12-27 15:20:54 423

原创 git-bash的alias别名设置

常需要设置别名时，直接使用aliasgs="git status"输入上边的命令之后，就可以使用gs（命令）代替git status（命令），这是一种设置别名简化输入，提升效率的办法可以根据自己日常的习惯，和自己的理解，按照自己是喜好特点定义自己的一组常用的别名缩写。然后日常操作就会变得简单很多。但是，如果只是如此操作，当我们关闭终端窗口的时候，重新启动之后会发现，这个别名...

2019-11-06 17:06:21 1395

原创 react中JSX详解

什么是JSXJSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。其表现是如何：常规的html代码都可以写，可以通过{props}往html中插入变量或任意有效的JS表达式，而无须加上$ 此外还可以插入带参数的函数{func(props)}<h1>Hello, {getName(props)}&lt...

2019-08-26 14:12:35 1077

原创 react制作简单评论列表展示页面

效果图：以下为源代码部分截图：webpack.config.jsvar path = require('path')var webpack = require('webpack')var ExtractTextPlugin = require('extract-text-webpack-plugin') var HtmlWebpackPlugin = require('h...

2019-08-19 15:01:29 1368 3

原创 -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 1474

原创初始化一个react项目

初始化一个react项目mkdir init_reactcd init_reactnpm init //如果没有什么特殊的配置一路回车，得到package.json文件目录结构dist ---------------------------------------------> //用于存放webpack打包之后的项目文件index.html ---------...

2019-08-12 14:08:59 432

原创推荐一个为按钮加好看的css网站，大家可以参考一下

大家还在为怎么样做出好看的按钮而劳心吗，下面有一些样式可以参考参考参考代码参考网址地址：https://cssfx.dev/

2019-06-26 09:32:38 2089

原创使用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 2948

原创 input 输入框只能输入数字、字母、汉字等

<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 2753

原创网页中设计中禁止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 774 1

原创 Nginx 如何设置反向代理

Nginx 如何设置反向代理网络结构如上图.可能你只有一个公网的Ip地址. 但是您的内网有个网站需要映射至外网.而又不想添加其它的非80端口.则你可以直接使用nginx来做反向代理即可.首先,配置nginx.conf文件.第一次安装的Nginx的默认根目录查找方法：首先到/usr/local/nginx/conf目录下找到nginx.conf文件在location /...

2019-05-07 13:58:36 2627 1

原创 nginx服务器的根目录在哪

今天第一次安装好Nginx服务器之后，一时找不到Nginx服务器存放网页的根目录在哪里，于是上网查了查，总结一下。第一次安装的Nginx的默认根目录查找方法：首先到/usr/local/nginx/conf目录下找到nginx.conf文件，如图打开ngin.conf文件之后找到server处，如图其中listen 80 表示监听端口默认为80root表示默认的页面...

2019-05-07 13:53:02 7762

原创 linux下Nginx的启动、停止与重启

启动启动代码格式：nginx安装目录地址 -c nginx配置文件地址例如：[root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf停止nginx的停止有三种方式：从容停止　　1、查看进程号[root@LinuxServer ~]# ...

2019-05-07 13:50:53 123590

转载 Linux中命令行终端切换工具screen

Screen是一款由GNU计划开发的用于命令行终端切换的自由软件。用户可以通过该软件同时连接多个本地或远程的命令行会话，并在其间自由切换。GNU Screen可以看作是窗口管理器的命令行界面版本。它提供了统一的管理多个会话的界面和相应的功能。会话恢复只要Screen本身没有终止，在其内部运行的会话都可以恢复。这一点对于远程登录的用户特别有用——即使网络连接中断，用户也不会失去对已经打开的命...

2019-05-06 11:42:19 5576

40款H5小游戏完整源码下载

空空如也