白白的博客

原创 图片旋转并保存图片

this.$message({ message: ‘图片未旋转’, offset: 100 });

原创 全屏时框架的message alert 下拉框失效问题

在工作中将#app div设为全屏后，elementUI的message和alert和下拉框展开都不见了，解决方法是将设为全屏。

原创 对于数据应该做好非空判断

正常情况下运行良好的代码，在接口返回的数据字段有缺失时(非正常情况)，要保证程序可以正常运行需要对返回值做判断。如果直接把null传到接口可能会报错，空就不会。给接口传值时要判断val?一定要判断arr的length大于0，取数组的arr[0].text时候。

原创 padEnd使用出错问题

将val不足number位的在后边用空格补足位数，val不能为数字类型 null undefined。否则会报错(•̀⌓•́)シ886。

原创 nodejs，处理表单提交文件和普通参数（enctype=“multipart/form-data“），使用插件multiparty，将图片上传到服务器的文件夹中

目录1. 页面form是有text类型和file类型输入框，所以需要将form提交类型设置为enctype="multipart/form-data" method="post"2.普通的参数只需要req.body.id就可以取到，而文件在这种状态下只有一个文件名，enctype="multipart/form-data"，可以传输文件，但node不可以使用req.body.id来接受数据。需要用到插件multiparty。1. 页面form是有text类型和file类型输入框，所...

原创 mongodb导入导出数据库

在使用navciat导出的时候，选择cvs格式，其他默认，导出的文件，用来导入的时候，选择cvs格式，并且手动设置id，等要求为数字类型的字段为int64，否则服务器会报错，比如id原本是数字类型，如果在导入时候没有手动设置，会出现冲突这个报错是因为id的类型不是int，查不到，所以要注意如果选择DBase格式会使得我的富文本编辑器字段不完整，数据不完整，故选择cvs文件...

原创 node-设置允许跨域请求

app.all("*",function(req,res,next){ //设置允许跨域的域名，*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin","*"); //允许的header类型 res.header("Access-Control-Allow-Headers","content-type"); //跨域允许的请求方式 res.header("Access-Control-Allow-Methods","DELETE,PU

原创 node接口数据 处理富文本中的图片加域名，以在前端显示 img src 正则

item.content = item.content.replace(/<img [^>]*src=['"]/g,"<img src=\"http://localhost:8080")

原创 文字和图片同行，垂直居中的三种方式

1.img div :display:inline-block;vertical-align: middle;2.父元素：display:flex父元素flex，子元素自动消除高度差，可以很简单的实现，只是不兼容ie，flex布局时css3的，兼容性不强。3.img: transform: translateY(10px);改变y值向上向下移动...

原创 vue中图片的src是变量的时候，

直接把循环所得的变量放在src会出错，需要使用require导入图片，但是不能直接在src那里写导入，我这么写也报错，放在一个函数里面不会报错，因为require在上标签写的时候，只读取字符串，不会拼接。 <div v-for="item in arr"> <div class="imgBox"> <img :src="getImg(item.img)" alt=""> &.

原创 容器宽度适应内部文字宽度

做p的border-bottom充当文字下划线的时候，p的宽度自适应csswidth:fit-content; width:-webkit-fit-content; width:-moz-fit-content;

原创 vue-watch监听对象数组的变化

1.对数组嵌套对象进行监听的时候，这时就需要深度监听listData: { handler (val) { console.log(val); this.paginationChange(); }, // 这里是关键，代表递归监听 demo 的变化 deep: true },2.监听对象'demo.child': { handler: function (val) { con.

转载 输入框鼠标悬停效果

<div class="col-3"> <input class="effect-7" type="text" placeholder="请输入您要查询的地域关键词"/> <span class="focus-border"> <i></i> </span></div>、.col-3{ width: 400px; height: 38px; position: relative;display.

原创 vue-cli+axios请求本地的json文件的方法-404解决办法

最重要的是json文件的位置要放在public中。请求方法this.$http.get(‘js/districts.json’)getData(){ this.$http.get('js/districts.json') .then(function(res){ console.log(res) }) },，我之前一直放在static文件夹中，总是报404的错。查了之后https://www.cnblogs.com/sllz

原创 vue-mixin混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。使用示例：需求：假设我 demoA组件和demoB组件中有相同的一些方法和处理逻辑。这时候我们为了不写重复的代码，可以视情况使用混入mixins.在mixins.js里定义了混入对象 并通过export导出：// 定义一个混入对象：（这里是局部混入，全局混入官网详见：https://cn.vuejs.org

原创 vue-transitions切换路由时更加平滑

我们都知道vue可以做成单页应用 点击的时候就能切换 如果我们要添加一些视觉效果 比如页面切换的时候有一个缓冲效果 这个时候就需要用到vue里的transition这个标签在使用这个标签之前需要了解下他的6个类使得切换路由时更加平滑第一步在app.vue里使用transition标签在手机上判断前进后退页面左出右进的方法https://www.cnblogs.com/xiechuanghong/p/10881784.html...

原创 vue中&nbsp；失效的解决方法

在vue中此种空格无效<p>'助力数字政务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打造智慧信息系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;规范管理、让交易更安全便捷</p>使用v-html=’'可原样输出<p v-html="'助力数字政务&nbsp;&nbsp;&nbsp;&n

原创 解决layui的弹框出现位置不居中问题layer.ready(function () {})

layui.use(['layer'], function () { var layer = layui.layer; //询问框 layer.ready(function () { // 弹框代码 layer.confirm('<br/>&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx<br/>', { btn: ['确定'], title:'通知',//按钮 }, func.

原创 文字和图片水平对齐

1.flex布局父级元素使用flex，display:flex;justfy-content:center实现水平居中对齐，2.图片transform: translateY(14px);图片向下移动

原创 移动端的rem屏幕适配css文件 于蓝湖配合使用 pc端和移动端的适配，写两套css

375px宽度设计稿对应22px=1rem设置蓝湖的自定义css rem 点击确定就可以直接看到计算好的rem值。非常方便效果：@media only screen and (min-width: 320px) { html { font-size: 18.773px !important }}@media only screen and (min-width: 340px) { html { font-size: 20px.

原创 js常用的公共方法文件

//////////////////////////////////////////////////---------公共js验证方法---------------///////////////////////////////////////拆分地址function getUrlParam(val) { var url = decodeURI(window.location.href); if (url.indexOf('?') != -1) { var urlString = url.spl.

原创 文字的前后伪类装饰

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 1000px; margin: 10px auto; border: 1px solid r.

原创 2021/2/5滑动效果插件：Better-Scroll

7.滑动效果插件：Better-Scroll/iScroll（不维护了）1.局部滚动实现:<div>ul>li*100</div>i：原生：父组件div给固定高度可以实现局部滚动height:200px;overflow-y:scroll（这个属性自带overflow:hidden;）;ii：使用Better-Scroll插件：<div class='wrapper'><div class='content'>u.

转载 Webstorm快捷输入Emmet简单语法

HTML模板生成，这个貌似 sublime Text 中用的多，不过也应该知道一下。！+Tab (Emmet语法默认最后都是+Tab ，下面我就不再多说了)意思就是打完快捷输入后按tab键例子：语法五：最后来个嵌套多的。（细品，你细品就会发现很多时候都会用到。）#page>div.logo+ul#nav>li*5>a{Item $}<div id="page"> <div class="logo"></div&gt...

原创 viewer.js插件--图片预览，放大，旋转，镜像翻转，幻灯片播放等功能

var viewer = new Viewer(document.getElementById('yyzh_img'), { url: 'data-original', toolbar: { zoomIn: 4, zoomOut: 4, oneToOne: false, reset: true, prev: false, play: { show: false, size: 'large', }, next: .

原创 2021-01-12vue输入数字或金额，保留两位小数，不允许输入空格和文字，字母

<el-form-item label="保费（保留两位小数）：" > <el-input type="text" @keyup.native="premium =premium = premium.replace(/[^\d.]/g,''); premium = premium.replace(/\.{2,}/g,'.'); premium = premium.replace(/^\./g,''); .

原创 flex css底部tabbar四个部分均分一行，居中

tab-bar大的父元素tab-bar-item 子元素

原创 vue两种传参方式

原创 前端假分页js一个函数搞定

pageTotal数组长度 // pageSize每页显示 10 条this.pageNum第几页paginationChange分页函数，所有数据在list中，pageData是分页数组，currentPageData是页面展示数据pageData[this.pageNum-1] 分页函数和改变页数和size函数更新数据和改变size时调用分页函数，改变页数时只改变当前页面数据值// 分页查询// pageTotal数组长度// pageSize每页显示 10 条pa.

原创 pdf预览 iframe src赋值 word预览

pdf预览 iframe src赋值word预览1，http://view.officeapps.live.com/op/view.aspx?src=‘公网地址’2.word转pdf<el-dialog title="预览文件" :visible="viewFileDialogVisible" fullscreen :before-close="handleClose" > <div> &lt

原创 vue监听dom渲染结束再触发方法 this.$nextTick

// 文件预览 handleview(index, row) { console.log(index, row); console.log(row.zbwjurl) this.viewFileDialogVisible = true//组件加载，组件可见 加载的组件中的dom获取不到：打印相关信息，发现：this.refs成功打印，且包含了a的信息，但是this.refs成功打印，且包含了a的信息，但是this.refs成功打印，且包含了a的

原创 html5 iframe实现页面预览pdf

一个可以把上传文件的绝对地址拿到的方法： //建立一个可存取到该file的url function getObjectURL(file) { var url = null; // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(fi

原创 jquery封装公共的header、footer等组件

在 index.html 中先引入 jquery.min.js在index.html 页面中预留公共页面的引入位置：…写一个公共js,在每个html中引入该js对于选中当前页面对应的菜单项处理方法，一定要放在公共页面加载完毕之后。<style> .footer{ width: 100%;padding: 20px 0;text-align: center;font-size: 16px;background:#FAFAFA;color: #..

原创 vue-cli配置sass，使用全局sass变量

vue-cli创建vue2.0项目,安装sass步骤创建vue2.0项目:vue init webpack 项目名安装sass步骤:npm install [email protected] install [email protected] --save-dev不要使用一条命令npm i --save-dev node-sass sass-loader因为最新安装的sass-loader是8.0,会报错!就这两个步骤,即可在项目里使用sass(scss)!不需要在build文件夹下的

原创 vue-elementui实现三级的地址选择

vue引入文件js使用this.$axios.get(“http://localhost:8080/static/jsc-json/districts.json”)<el-form-item prop="qyzcd"> <el-cascader placeholder="请点击选择地址" :options="options" v-mo

原创 ajax接口数据传输方法与传输文件时的出现的错误的归纳

一、1，application/x-www-form-urlencoded浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。在这里插入图片描述首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 会进行了 URL 转码。大部分服务

原创 uniapp中集成高德地图

这是在uniapp中集成高德地图，需要城市名字确定地图城市，使用精准定位并且设为地图中心，在初始化地图的时候先不设置center，在下面得到精准定位之后onComplete的参数data中的lng，lat是精准定位，可以用来设置地图中心点，map.setCenter([data.lng,data.lat]),就完成了地图定位；生成H5网页手机版与内嵌安卓，地图的高精度定位在高版本的安卓app中只支持https域名，不支持http，因为安卓提高了安全等级，在没有高级域名的情况下，选择放弃了自己定位而

原创 uniapp做高德地图

这是在uniapp中集成高德地图，需要城市名字确定地图城市，使用精准定位并且设为地图中心，在初始化地图的时候先不设置center，在下面得到精准定位之后onComplete的参数data中的lng，lat是精准定位，可以用来设置地图中心点，map.setCenter([data.lng,data.lat]),就完成了地图定位AMap.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation(

原创 h5和安卓混合开发做微信支付 和jsapi做微信支付

如果在微信非内置浏览器过程是通过后台拿appid等参数请求微信后台返给前台参数，前台拿到参数appId":res.appid,//公众号名称，由商户传入“timeStamp”:res.timestamp, //时间戳，自1970年以来的秒数“nonceStr”:res.nonce_str, //随机串“package”:“prepay_id=”+res.prepay_id,“signType”:“MD5”, //微信签名方式：“paySign”:res.sig

原创 h5与安卓交互的方法

app：指安卓页面一. Vue打开app并携带参数方法vue定义点击事件@click=“vidoe(item.id)”然后写方法：//h5跳转到原生app的方法vidoe:function(id){window.FindActivity.toVideo(id);},toVideo是安卓中定义的方法名！二. app向vue（h5）中传参方法在mounted() {window.getFromAndroid = this.getFromAndroid},中定义这个方法然后，在met