qq_39561207的博客

原创 给输入框内容添加样式

实现原理：在输入框上面添加一层span标签，在输入框聚焦和失去焦点时切换显示(是展示上层。需求：实现一个可添加公式的输入框，点击表格内容可添加到输入框，同时也可手动输入运算符，

原创 自定义组件实现v-model

自定义组件实现v-model

原创 Taro小程序 IOS弹窗输入框聚焦唤起键盘时输入框错位

问题描述：1.弹窗中有上下两个输入框，设置了cursorSpacing属性后，从第一个输入框换到第二个输入框的时候，输入框聚焦位置上下偏移。原因：cursorSpacing设置了与键盘的距离，不同输入框聚焦的时候，距离键盘位置随时改变，但是页面撑起的距离没来得及变化，造成位置误差。画图补充：解决办法：同时设置input框的这两个属性cursorSpacing="100rpx"always-embed={true}...

原创 vue-cli3.x项目使用tinymce富文本编辑器

1.安装依赖包，建议tinymce包安装5.3版本。npm install @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 -S2.(1)在public新建tinymce，将modules下tinymce的skins文件复制到public/tinymce文件夹下。(2)因为tinymce是引文版的，所以还得引入中文语言包。中文语言包下载地址：zh_CN.js，放到public/tinymce下，和skins同级。（3)富文本中表情包功能需要用到这个文件，将modu

原创 vue实现打印功能

打印功能可以自己使用原生js（window.print()）实现，其次就是使用插件，介绍两个打印插件一、vue-print-nb：这个插件使用起来便捷，用法如下1.安装npm install vue-print-nb --save2.在main.js文件中注册使用import Print from 'vue-print-nb'Vue.use(Print);3.具体使用方法：（1）直接绑定id方法 （2）绑定对象方法<!--直接绑定id方法--><di.

原创 react修改antd组件样式不影响其他地方组件样式

用Popover组件举例：要求：不同的地方popover组件的边框颜色不一样代码：<Popover overlayClassName='namespace' content={ <p style={{textAlign:'center',color:"#00C895"}}>展示内容</p> } placement="right"> <span>hover展示框框</span></P

原创 vue实现聊天界面样式

<div class="chat-content"> <!-- recordContent 聊天记录数组--> <div v-for="(itemc,indexc) in recordContent" :key="indexc"> <!-- 对方 --> <div class="word" v-if="!itemc.mineMsg"> <img :sr.

原创 elementUI上传图片限制图片格式，大小和尺寸问题

//上传图片前的图片验证回调beforeAvatarUpload(file) { //图片格式 const isJPG = file.type === 'image/jpg' || file.type === 'image/png'; //图片大小 const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传图片只能为jpg或png格式'); } if (!isLt2.

原创 loaderContext.getResolve is not a function

loaderContext.getResolve is not a function解决vue-cli安装less-loader是报错直接使用命令npm install less less-loader --save dev运行项目时会出现以下报错：loaderContext.getResolve is not a function报错原因：less-loader版本太高解决办法：修改package.json文件：将less和less-loader版本改为上述版本，然后重新npm in

原创 vuex与websocket结合使用实现消息更新推送

项目描述：一个价格实时更新案例。每一次有人出价，服务端推送最新价格，通过websocket拿到最新价格，渲染到前台页面。问题：1.如何在页面刷新后还保持上一次最新价格的显示解决方法：新建文件目录store：并建立各个js文件main.js中引入import vuex from 'vuex'import store from './store'Vue.use(v...

原创 vue获取手机验证码爬坑

贴上代码： <div class="send_code"> <input placeholder="请输入验证码" v-model="userPwd"> <button @click="sendCode" v-show="isShow" style="background-color: red">发送验证码</button&gt...

原创 Jquery仿淘宝放大镜效果

css部分body,ul,li { padding: 0; margin: 0; list-style: none; } .box{ width: 900px; height: 500px; ...

原创 使用mockjs模拟生成数据

为什么要使用mockjs？为了不在没有接口时闲得慌，所以我们得想办法自己弄到数据。首先，了解一下mockjs怎么写，这时候我们就需要去它的官网mock.js瞧一瞧,看一下别人的事例是怎么写的，在了解了基本的写法之后，就可以自己动手了。（1）安装mock.js,因为只需要在本地使用，所以用–save-dev就好npm install mockjs --save-dev（2）在src下新建...

原创 解决vue中使用swiper无法自动循环播放问题

vue中使用swiper无法自动循环播放首先，使用mockjs生成模拟数据，如下（1）安装swipernpm install swiper(2) 引入swiperimport Swiper from 'swiper'import 'swiper/css/swiper.min.css'（3）在methods里面创建一个swiper初始化函数carouselScroll，关于swi...

原创 vue仿淘宝放大镜插件的使用

1.首先下载PicZoom插件npm install vue-piczoom --save2.使用时注意：原来img标签要改为pic-zoom,并且属性src要改为urlhtml部分代码：<template> <div> <div class="box"> <pic-zoom :url="imgurl...

原创 Ajax解决浏览器缓存问题

1.浏览器缓存的表现： 在项目中一般提交请求都会通过ajax来提交，但是发现，每次提交后得到的数据都是一样的，每次清除缓存后，就又可以得到一个新的数据。2.浏览器缓存原因： ajax能提高页面载入的速度主要的原因是ajax能实现局部刷新，通过局部刷新机制减少了重复数据的载入，也就是说在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要没有刷新页面，这些...

原创 vue中v-for循环图片路径，图片不显示的解决办法

将imgUrl加上require注意：使用require的时候可能出现错误unresolved function or method require解决办法：

原创 使用v-for出现警告：component lists rendered with v-for should have explicit key的解决办法

原创 vue-cli项目中获取自定义mock文件中的json数据

最近在看一个比较先前版的vue小项目，其中就提到了自定义mock文件中数据的获取，这时就需要对build文件中的dev-server.js文件进行配置。但是新版的vue-cli中并没有dev-server.js这个文件，而是被build文件下的webpack-dev-conf.js代替了。那么在进行后台数据模拟的时候，我们也要进行一些相应的配置修改。1.首先创建一个mock文件，...

原创 Node+express创建一个新的Node项目

1.首先要安装Node环境，安装地址https://nodejs.org/zh-cn/download/。2.新建一个文件夹，如：在e盘创建一个dome文件夹，在地址栏输入cmd，然后回车，弹出弹框，如图：3.安装express 命令：npm install express -g npm install express-gene...

原创 vue搭建脚手架cli

Vue cli脚手架（1）通过的的的的WebPack搭建的开发环境（2）使用ES6语法（3）项目文件在环境中编译而不是浏览器步骤：1.安装的node.js的中验证的node.js的中是否安装成功  电脑搜索框，输入cmd，输入节点-v，查看节点版本号，输入npm -v，查看npm版本号。2.安装VUE        ＃全局安装        npm instal...

原创 webstrom为代码片段设置快捷键

点击File→setting在搜索框中输入live→live Templates→html/xml，点击右边绿色的加号，选择第一个live Templates在Abbreviation那一行填上自己设置的快捷键，在Template text框中复制上你需要设置的代码，然后点击最下面一行景红色的Define，全选，最后apply→ok使用的时候直接按快捷键然后tab键就可...

原创 相对（relative）定位和绝对（absolute）定位

首先，position的这两个属性一般是不使用的，因为有了浮动，所以我们才需要position属性来实现我们想要的布局。1.相对定位（relative）：相对于原来位置（原来位置指在文档流中默认的位置，若加上了浮动时，那么这个原来位置就是你设定浮动时的位置）的偏移，原来位置依然占据空间。（1）box1和box2都没有设置position属性（没有设置float属性时）效果图：我...

原创 jsp页面from表单提交到数据库乱码问题

1.jsp页面设置①jsp页面顶部:里面的pageEncoding设为utf-8.2.连接数据库设置②  ?useUnicode=true&amp;characterEncoding=utf-8    这句不要忘了加，很可能就是这个地方导致乱码。3.数据库编码格式的设置①创建好数据库以后，利用语句   show create table  表名;  来查看表里面数据的编...