日常分享

原创 Invalid dates

这样就不会提示这个错误信息了，因为我的后端接口返回的数据没有时间，不加这个配置页面会一直提示Invalid dates。使用dhtmlxgantt 画甘特图时页面爆红色Invalid dates错误，如图。

原创 Scss--将node-sass切换为sass(原dart-sass)

原文网址：Scss--将node-sass切换为sass(原dart-sass)_IT利刃出鞘的博客-CSDN博客

原创 vue配置多个后端

overlay: {},proxy: {},'/api': {

原创 Vue3DraggableResizable-多选复制粘贴

{name: "问我问1", id: 3, type:2, zIndex: 1, initW: 200, initH: 40, x: 110, y: 110, w: 150, h: 80, active:false, isClone:false,ctrl:false,selectStyleName:'noSelectedStyle',selectHandleName:'noSelectHandle',v.ctrl) { // 仅当 v.ctrl 为 false 时才将元素设置为活跃状态。

原创 js vue实现6位验证码输入框效果

说明 因业务需求需要有个6框连续输入的组件，这边是直接画了6个输入框，然后通过一些事件控制输入框的输入顺序，以及一些特殊处理。效果组件源码<template> <div class="row-center captcha_input_wrapper"> <input v-for="(item,index) in captchas" :key="index" v-model="item.num" :id="......

原创 element-ui的el-select如何不显示value，显示value对应的label值

现在遇到问题 效果是这样的：我们想到得到的是下面的效果：调试发现 是value的格式存在问题，数据库读取到的数据不一定为number类型需要自己转换一下代码如下即可<template><div> <el-card class="el-card"> <el-form :model="form" label-width="100px" label-position="right"> <el-form-item

原创 结合element-ui表格自动生成sku规格列表

最近在写一个根据输入的规格,属性值动态生成sku表格,实现的效果大致如图,这是在vue项目里,结合element-UI表格写的,写好了就整理了一下,把代码贴上来,方便以后使用,不过代码里还是有一些重复的东西没整理,因为急着完成功能,也没太注意代码整洁,以后有时间再整理一下读取规格列表的功能是,如果你这次存了一个表格给后台,查看详情时,后台返回给你,你需要把它渲染到页面上用的,我这里写的比较复杂,因为用v-model绑定input,取值的时候要用对象取法,所以存进去的时候也是用的对象存放如果你只是

原创 前端vue excel导出数据流

项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。先看下效果图：页面效果：点击 导出Excel 调用导出接口成功了：后台返回的数据流，一堆看不懂的乱码：接下来要处理这堆乱码，因为用到的地方多，所以在util.js文件里封装了一个公共方法并抛出：虽然vue里有封装好的请求接口的方法，但这里要单独用axios，所以先在util.js里...

原创 VUE中友盟统计的使用方法

1.在项目中使用友盟统计，查过资料，看过同行写的各种方法，以下为，成功统计到数据的示例。2.在友盟统计中要查看自己的统计数据，首先添加自己的站点，填写网站名称和网站域名。如果统计数据生效之后，点击查看报表就可以看到统计的数据了。也可以点击事件统计，查看相对应的点击数据统计。//在vue项目中的App.vue中添加公共的方法，这样只需要引入一次，其他页面只需要使用即可mounted(){ // 友盟统计添加 const script = document.cre.

原创 微信h5禁止微信内置浏览器调整字体大小

1.ios 通过重写样式控制：body { /* IOS禁止微信调整字体大小 */ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important;}2.android 通过重写事件控制：<script> (fu..

原创 改造vue-quill-editor：实现图片上传到服务器再插入富文本

需求概述vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，通常来讲，每个服务器端接收的post的数据大小都是有限制的，这样的话有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。因此，在富文本编辑的过程中，对于图片的处理，我们更合理的做法是将图片上传到服务器，再将图片链接插入

原创 获取七牛云视频文件的基本信息及关键帧截图

假设已上传视频的七牛文件地址为http://cdn.sunzhongwei.com/video1获取视频文件的基本信息加上查询参数后缀 avinfo 即可http://cdn.sunzhongwei.com/video1?avinfo例如："format": { "nb_streams": 2, "nb_programs": 0, "format_name": "mov,mp4,m4a,3gp,3g2,mj2", "f

原创 vue+element-ui 七牛云分片上传

关于element-ui的el-upload，实际上issue中提到的次数也不少，很多初试者可能 get 不到愉快使用的点，提了issue之后又大多因为规范问题直接被机器人过滤或者关闭。例如最近一次相关的issue是想寻求关于http-request的使用，但也因为规范问题被直接关闭。所以我们就稍微做一个比较接地气的业务类分享。0. 我们要什么？这个问题就简单了：首先，我们需要一个好看的皮囊！那Vue基本没得选了，element-ui的el-upload很符合口味。其次，我们需要一个有趣的灵魂，我们

原创 nginx多代理配置

原创 git 的基本操作

首先git bash的安装（这个就不做过多的描述了，具体的在官网下载就行）1.拉去别人的项目命令：git clone 别人的项目路径一般来讲git clone的项目路径有2中http的和ssh的区别：ssh的需要在本地建立秘钥（听说是安全性要高点）在本地新建的命令 ssh-keygen -t dsaid_dsa...

原创 TCP和UDP的区别和优缺点

UDP协议定义:User Datagram Protocol,用户数据报协议. 主要作用：将网络数据压缩成数据包的形式。 数据包格式：一个二进制数据的传输单位 工作机制：蛮干型。 它想传送时就简单地去抓取来自应用程序的数据，并尽可能快地把它扔到网络上。因此，在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、计算机的能力和传输带宽的限制；在接收端，UDP把每个消息段放在队列中，应用...

原创 渐进增强和优雅降级之间的不同

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本...

原创 cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。web storage和cookie的区别Web Storage的概念和...

原创 jq调取非本地json数据

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery/2.1.

原创 vue简单的table切换 不使用路由

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;

原创 vue-form表单与table表格的数据关联

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial

原创 vue-input按钮实现文字增删

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial

原创 vue-父子组件之间的通信以及兄弟组件的通信

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;

原创 vue-下拉框

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.

原创 vue-hover的实现

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;

原创 vue-for循环的嵌套

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;

原创 表格的制作

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;table bo

原创 表单的制作

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;form&amp

原创 使用getAttribute方法

getAttribute() 方法返回指定属性名的属性值。提示：如果您希望以 Attr 对象返回属性，请使用 getAttributeNode。getAttribute.jsp源码实例，获取请求的时间日期：<%@ page language=”java” import=”java.util.*” pageEncoding=”utf-8″%><!DOCTYPE HTM...

原创 HTML中实现图片与文字不被选中

-webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;前三句是兼容 draggable="false"图片的行内属性 实现图片不可拖动...

原创 js点击按钮实现图片滚动效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;

原创 js制作微信聊天效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin:0;

原创 鼠标右键使盒子消失

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;

原创 js实现鼠标拖拽盒子移动效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin:0;

原创 js键盘方向键实现盒子移动

&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; div{ width:100px; height:100px; background: red; ...

原创 js实现盒子跟着鼠标移动效果

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-

原创 7和7的倍数用*代替

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script&gt;

原创 输入天数判断几周几天

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script&am

原创 距离某个时间的倒计时制作

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&a

原创 本地时间的获取

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&a