qq_39167934的博客

原创 vue实现在图片中画矩形框,并得到对角坐标，并拿到对应坐标制作图片热区并设置map中area的样式

实现效果如下：实现思路：使用鼠标的按下事件onmousedown ，创建div， 使用鼠标的移动事件onmousemove，更新div的宽度以及坐标 使用鼠标的抬起事件onmouseup，可以限定画的矩形的大小， 由于html的map的area 是无法设置样式的，hover也对其无效，如果想要设置悬浮效果改变样式，可以通过给area设置鼠标的mouseover事件去操作dom...

原创 vue+ueditor百度富文本框的前后端配置以及相关bug解决方法

前端配置在vue中使用ueditor，可以用已经封装好的vue-ueditor-wrap，配置简单，功能也是十分强大安装依赖包npm i vue-ueditor-wrap下载ueditor将下载好的ueditor解压至项目static目录引入VueUeditorWrap组件//可全局引入也可局部引入 import VueUeditorWrap from 'vue...

原创 jq/js检测鼠标指针移动离开页面

relatedTarget 事件属性返回与事件的目标节点相关的节点。对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。对于其他类型的事件来说，这个属性没有用。

原创 纯CSS实现Table固定表头和首尾列以及表格边框设置

【代码】纯CSS实现Table固定表头和首尾列以及表格边框设置。

原创 UNIAPP学习点滴记录

在HbuilderX中，两者都是点击时触发事件;不同的是:1.@click是组件被点击时触发，会有约300ms的延迟(内置处理优化了)2.@tap是手指触摸离开时触发，没有300ms的延迟，但是会员事件穿透；3.编译到小程序端，@click会被转成@tap4.@click,@tap 事件，在浏览器上，@tap 事件会覆盖@click；在手机端的时候，2个事件都存在，这2个取其中一个就可以事件穿透的理解:@tab可以阻止事件冒泡，@click不可以用@事件监听 DOM 事件。

原创 谷歌地图开发使用记录 Google Maps

谷歌地图开发使用记录 Google Maps

原创 shopify js使用liquid配置数据方法

关于shopify js使用相关数据的步骤

原创 Shopify学习记录

目录一、shopify的文件结构1.Layout2.Templates3.Sections4.Snippets5.Assets6.Config1） settings_data.json2） settings_schema.json 7.Locales二、setting_schema.json 三、section1、描述2、section schema tags相关属性1）class2）tag​3）settings4）blocks5）max_blocks 6）presets 7）default8）locale

原创 vux的 popup组件兼容ios的大坑之遮罩层挡住了弹窗内容

vux在安卓是完全没有问题的，但是在ios不兼容，蒙版会遮住主题内容，导致无法对内容进行操作。解决如下：1.引入vux封装好的自定义指令 tansferDom2.使用自定义指令（如果不了解vue的自定义指令，可以参考https://cn.vuejs.org/v2/guide/custom-directive.html）3.注意：如果包裹了一层div，可能出现里面的样式失效，可以把样式提取到最外层即可，如下：...

原创 如何下载node指定版本以及node版本升级导致项目不可用

一.安装指定的node版本1.进入node官网https://nodejs.org/zh-cn/2.点击其他下载3.点击以往的版本4.选择你想下载的版本即可二.解决node版本升级导致旧项目不可用报错的主要原因是sass-loader报错1.在项目中执行 npm i node-sass -D如果不行改成cnpm试试2.安装完成之后运行便可以了...

原创 SourceTree 3.1.3 版本安装以及跳过bitbucket注册

1.进入官网下载https://www.sourcetreeapp.com2.双击安装进入这个页面之后关闭该窗口3.打开 %LocalAppData%\Atlassian目录，双击SourceTree文件夹，创建accounts.json文件，内容为：[ { "$id": "1", "$type": "SourceTree.Api.Host.Identity.Model.IdentityAccount, SourceTree.Api.Host.Ident

原创 JS获取手机型号和系统类型

window.devicePixelRatio手机以dpr2为标准比如在dpr为2的手机 100px；那么在dpr为3的手机应该为 100px * 3/2

原创 chrome 安装crx插件 【亲测有效】

1.下载 crossRequest2.打开谷歌浏览器，右上角的设置，点击扩展程序，3.开启开发者模式4.加载已经解压的扩展程序5.解压下载好的文件里面有两个文件，如下6.把cross-request.crx后缀改为.zip7.解压cross-request.zip8.点击chrome的设置里面加载已经解压好的文件，选择被解压的 cross-request文件，安装完成，刷新即可在yapi上使用。...

转载 浅谈我对微信小程序云开发的认识与见解

一、微信小程序云开发的优点1.无需自建服务器2.项目快速上线3.轻轻松松获取用户凭证二、微信小程序云开发的坑1.基础版CDN流量太少2.云数据库限制多（1）小程序端读取限制（2）云数据库读写权限限制3.对外开放限制多三、我对小程序云开发总结对于微信小程序云开发，我也算是入门吧，跳了很多坑，但也都从坑里爬了出来。通过写下这篇博客来总结一下我对小程序云开发的认识。所有外部依据均来自小程序官方文档微信推出小程序云开发的SDK是在2018年8月份，距离今天已经过去一年多了。看一

转载 vue h5转换uni-app指南（vue转uni、h5转uni）

vue h5转换uni-app指南（vue转uni、h5转uni）分类：uni-app转换vue转h5转如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。首先注意2个前提：1、你的web站是适合手机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。一切从新建一个uni-app项目开始。然后依次进行文件处理把之前的vue web项目的前端代码copy到新项目下 如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件..

原创 小程序转h5步骤(利用uniapp)

1.介绍个好用的工具，那便是miniprogram-to-uniapp自动转换工具。2.全局安装此工具，命令行如下npm install miniprogram-to-uniapp -g3.查看工具版本号，命令行如下wtu -V回车若显示该工具版本号，则证明安装成功4.开始进行转换，命令行如下//冒号里面是小程序的项目路径wtu -i "E:\其他\patient-wechat\miniprogram"回车后即可以在源项目同及目录得到一个后缀为_uni的目录，即

原创 vscode开发小程序

1.进行小程序的插件安装，先搜索安装vscode weapp api，这是小程序的语法结构api 2.安装vscode wxml这个插件，主要是针对wxml文件的 3.安装vscode-wechat这个插件 4.安装一下Easy WXLESS，是针对wxss文件的注意：利用vscode开发小程序只是起到了编辑的效果，真正的调试等还需要在小程序开发工具中进行...

原创 uni-app项目搭建，vsCode编辑项目，微信开发者平台实时调试以及各平台调试命令

启动各个端的命令//启动项目（微信小程序）npm run dev:mp-weixin//启动项目（h5）npm run dev:h5//启动项目（app平台）npm run build:app-plus （也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试）//启动项目（支付宝小程序） npm run dev:mp-alipay//启动项目（百度小程序）npm run dev:mp-baidu //启动项目（字节跳动小程序）npm run dev

原创 学习uni-app步骤

一。看完官网的介绍-https://uniapp.dcloud.io/二。体验uni-app-https://uniapp.dcloud.io/quickstart三。看官方给的入门教学视频-https://ke.qq.com/course/343370?taid=2788142445051210如果你熟悉h5，但不熟悉vue和小程序看完这篇白话uni-app DCloud与vue合作，在vue.js官网提供了免费视频教程，也可以直达教程地址：https://learning.dcloud

转载 vscode创建uni-app项目

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。不过，由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode，不想更换编辑器。直接使用 vscode 开发 uni-app，其体验并不是很好。其实 uni-app 和 vscode 也可以很搭，接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。CLI 工程全局安装 vue-cli 3.x（如已安装请跳过

转载 yarn的安装和使用

yarn的简介：Yarn是facebook发布的一款取代npm的包管理工具。yarn的特点：速度超快。 Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。 超级安全。 在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。 超级可靠。 使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。 yarn的安装:1. 下载node.js，使用npm安装 npm i..

转载 同一台电脑 实现 vue-cli2和vue-cli3同时并存

win下 vue-cli2 和 vue-cli3 并存，一起使用开局一张图，内容慢慢编文章目录win下 vue-cli2 和 vue-cli3 并存，一起使用安装vue-cli版本检验安装是否成功修改vue2和vue3的名称配置环境变量打开环境变量所在位置新建系统变量最后修改Path变量最后。重启电脑就行了写在最后vue2和vue3命令，分别代表了vue-cli2 和 vue-cli3的运行环境，是可以同时在一台电脑并存，使用，而且最重要的是，不用安装在C盘！如果你已经安装了

原创 vux的scroll实现移动端 滑到底部，上拉加载更多的数据

<scroller class="scroller" use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore" lock-x ref="scrollerBottom" height="-48" v-model="scroller...

原创 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题

<input type="text" placeholder="请输入联系电话" v-model="phone" oninput="value=value.replace(/[^\d]/g,'')" max...

原创 js限制input框只能输入数字和小数点

<input type="text" placeholder="请输入" maxlength="7" v-model="weight" oninput="value=value.replace(/[^0-9...

原创 vue实现在线聊天页面，首次进入滚动条滑到在底部

<div class="main"> <ul class="message-list" id="scrolldIV"> <li v-for="i in 100" :key=i>{{i}}</li> </ul> </div>//页面挂载的时候执行 mounted() ...

原创 日期选择器限制选择范围（element、vux）

1.element-ui 日期选择器限制限制范围（未来一个月（包括今天）） <div> <el-date-picker v-model="timeArr" type="daterange" :clearable="false" range-separator="至" ...

原创 js实现获取本地日期以及日期格式化以及日期的计算

1.获取本地时间并格式化日期//获取本地时间并格式化日期 convertToDate() { var date = new Date(); var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); var h = dat...

原创 ant design pro 打包上线配置和source-maps理解

1.打包成相对路径，如若不配置，则会打包成绝对路径2.devtool: process.env.NODE_ENV !== 'production'? 'source-map' : 'nosources-source-map',Webpack打包生成的.map后缀文件，使得我们的开发调试更加方便，它能帮助我们链接到断点对应的源代码的位置进行调试（//# souceURL）...

原创 ant design pro 登录拦截

配置路由

原创 ant design pro 代理

一.注意在生产环境代理是无法生效的二.代理配置1.位置 config/config.tsproxy: { //代理以访问/service/api 开头的所有路由 '/service/api': { target: 'http://154.26.140.15:8000',//代理目标地址 changeOrigin: true,//开启跨域访问...

原创 ant-design-pro和服务端交互

1.修改代理文件2.在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：UI 组件交互操作； 调用 model 的 effect； 调用统一管理的 service 请求函数； 使用封装的 request.ts 发送请求； 获取服务端返回； 然后调用 reducer 改变 state； 更新 model。3.与服务端交互页面基本结构...

原创 ant-design-pro-react安装步骤以及相关配置的修改

1.可查看官网https://pro.ant.design/docs/getting-started-cn2.如果按照官网步骤安装失败，则尝试一下步骤。1）先手动安装create-umi cnpm install create-umi2）执行一下命令npm create umi会出现一下页面选择ant-design-pro安装成功后，文件夹会...

原创 局部更改element-ui的默认样式

首先，去掉style的scoped用最外层的class名称包裹 需要修改的elemen ui 组件的class 名称例如

原创 vue中使用vux datetime，数据绑定不上，重新赋值无效

解决办法，刷新组件，通过v-if来创建新的组件<template> <div> <group> <datetime v-model="val" v-if="hackReset"></datetime> </group> </div></template&...

原创 css实现超出部分文字隐藏且显示...

overflow:hidden;white-space:nowrap;text-overflow:ellipsis;这个兼容ie

转载 axios+Vue上传文件显示进度

一,前言最近在用Vue，然后上传文件时需要显示进度，于是网上搜了一下，经过自己实测终于也弄明白了二，效果三，代码HTML代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div...

原创 vue实现element-ui表格table拖拽效果

首先需要安装依赖：npm install sortablejs --save-dev其次导入

原创 拖拽插件vuedraggable的使用

原创 真实文件上传进度条以及实现上传多次同一张图片不生效的解决方案

进度条样式.box{width:100%;height:100%;position:fixed;z-index:1000;top:0;left:0;background:rgba(0,0,0,0.3...