黄哈哈的博客

原创 获取vue页面内容转为html格式

实现方法：用innerHTML 转换需要在组件标签上加上ref 属性 像这样 <Child class="testDemo" ref="child"></Child>this.$refs[child].$el.innerHTML// 或者this.$refs.child.$el.innerHTML$el 表示的是 Vue 实例使用的根 DOM 元素。...

原创 vant 可输入可选择 输入框组件

参考https://www.jianshu.com/p/2d861fedc68e 不完全一样is-link 不影响功能 只是出现一个右箭头为了给右箭头绑定点击事件 让其出现下拉框 所以我自己添加了右箭头图标样式：1，template中vant 中的Field组件 ，ActionSheet组件 结合2，data中3，函数中handelType函数 和 onSelect函数 结合以上遍历 是给对象添加了一个新的属性...

原创 el-cascader 懒加载实现动态添加children数据

样式问题 使用deep不起效 用popperClass=“multi-choose” ，注意style没有scoped。我们后台的接口数据 需要上层的字段去掉接口请求下层的数据 这样就麻烦很多。需要实现三级联动 但是后台数据不是视图组件所需要的嵌套关系。2.初始数据 mounted。3 懒加载绑定的函数。

原创 nuxt 获取不到localStorage，使用cookie持久化

nuxt项目中在store和plugins的js文件里使用localStorage会报错。1.安装 cookie-universal-nuxt。

原创 vue性能优化之预渲染prerender-spa-plugin+vue-meta-info解决seo问题

单页面应用中，web项目只有一个页面，前端根据路由不同进行组件之间的对应切换，动态的渲染页面内容。这就是客户端渲染，具有减少服务器端压力、响应速度快等优点。但是单页应用在优化用户体验的同时，也给我们带来了一些对SEO不友好，首屏时间过长等问题。因此，预渲染（Prerender）技术应运而生。纯前端就能完成。

原创 base64加密 ＞ json字符串 ＞ 中文转Unicode所遇问题

需求：需要先将搜索的汉字转Unicode， 然后键值对转为json ,再base64加密 传给后端。解决：就出在json转之后会多一个\，用正则都替换解决不了，最后只能手动拼接成json。3.Base64加密json字符串 导致接口传参 后端识别不出来 因为多了一个\。1.中文转unicode。

原创 vue中this.$set()-数据更新，视图没有更新、element计数器加减失效的问题

当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，concat等修改数组，同时也将触发状态更新。当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] = newValue。控制台打印的数据更新了，但是页面视图却没有更新。当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。target：要更改的数据源(可以是对象或者数组)value ：重新赋的值。

原创 vue商城商品详情大图、放大镜、轮播小图功能实现

使用了轮播图插件vue-awesome-swiper 和放大镜插件vue-piczoom，安装之后就可以使用了。3.鼠标放在大图上 可以放大查看图片。1.点击小图 大图切换。2.小图可以左右切换。

原创 vue-elementui表格组件动态多级表头

我的数据结构，需要循环sign_time，确定日期表头，然后拿着日期去data中取上下午的值。需求日期多级表头，日期不固定随着后端接口返回的数据变化。每个日期的上午下午是固定的。一开始想着循环一下就行，但是有问题有多少条数据就会循环多少个表头，日期重复。在接口返回值时赋值tableData、tableConfig注意prop。然后再需要表格组件的地方引用整表组件分别传值表数据和表头数据。建立一个表头组件，再建一个整表组件(包含表头)，然后进行传值引用。...

原创 vue hash模式转为history模式 网站路径去掉#号

vue中hash模式转history模式，vue.config.js

原创 vue element图片、视频上传删除回显，动态添加上传组件的区分字段上传

每次遇到图片上传都很麻烦 其中删除 回显 格式限制，很繁琐，特别遇到动态添加多个上传组件 进行分别上传时， 这次终于全部搞定 ，特地记录下来整个过程。主要分为三个部分：1、单图片上传 2、多图片上传 3、动态添加表单项的多个上传（复杂、难点）......

原创 vue 多个正计时setInterval同时运行 互不影响

需求：后端返回多条数据，给一个洽谈开始时间，分别计时。难点：多处调用定时器进行计时 会互相影响 出现混乱。

原创 vue+element:选择框多选并赋值接口返回数据

选择框多选并且编辑时回显已选数据

原创 element中timepicker赋值接口返回的时间

一般是这种默认的第一步向接口传值： 要借助moment 转一下格式变成9：:00：00但是做编辑功能时 接口返回的格式也是09:00:00 怎么赋值给时间选择器呢 试了很多方法都不行 后面发现有一个自带属性：加上这个属性之后 虽然还是 new Date()格式给后台穿参数时 但是已经自动变成了09:00:00 不需要在用moment转一下了 而且格式一样 就能直接赋值了 ！！！这样就完成了 传参和赋值！！...

原创 vue中使用vue-i18n实现整个项目中英文切换

比如 element页码组件 随着语言切换而变化。

原创 vue模块动态增加和删除

一个常见的模块增加和删除功能如果用js写相对复杂一点elementUi 表单组件中有一个类似的功能 可以改成自己的需求<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="name" label="问卷名称"> <el-input v-model.

原创 element tree 可搜索可排序可选中功能

原型图如下：要求可选择(check) 可排序(drag) 可搜索 (filter) element中tree组件可满足需求 不过要将三个功能融合 并解决一些小问题:比如-选中之后 再拖拽 ，选中状态就消失了html <el-tree :data="data" node-key="id" show-checkbox default-expand-all @node-drag-start="handleDragStart" @node-drag-

原创 js 字符串截取

function getUrlParams(param) { var search = 'www.bicycle.com?resource_name="123456"&resource_content="解落三秋叶，能开二月花。过江千尺浪，入竹万竿斜。"&user_name="全能召唤魔法师"&Name="bicycle"&voice_url=https://rjwgushici.oss-cn-beijing.aliyuncs.com/record/风..

原创 axios里设置了withCredentials跨域报错

报错：Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode .

原创 elementui tree树形结构

默认展开第一项 num

原创 jq原生写弹框 遮罩层

bug:页面滚动之后 遮罩层盖不住下面的内容 fixedhttps://blog.csdn.net/yingzizizizizizzz/article/details/72824502

原创 vue导航栏 嵌套子路由的选中样式技巧

用this.$route.matched[0].path可以打印路由前缀 mounted() { console.log(this.$route.matched[0].path); this.path = this.$route.matched[0].path ? this.$route.matched[0].path : "/"; // this.path = this.$route.path; },注意：选中首页“/”时 打印不出东西来以下是路由表：子.

原创 路由拦截器

原创 vs报错Clear up some disk space and try again

npm install 报错：Clear up some disk space and try again解决：npm cache clean --forcenpm cache clear --force && npm install --no-shrinkwrap --update-binary参考：https://www.cnblogs.com/xiaozhang666/p/11375157.html

原创 本地仓库关联远程仓库

已有本地仓库新建远程仓库 然后关联 第一次上传

原创 vue项目生成二维码功能使用QRCode（接入微信和支付宝支付接口）

微信：需求：微信支付 跳出弹框 二维码下载二维码生成器npm i qrcodejs2 --save

原创 vue 解决v-for 循环列表生成不同背景图片问题

HTMLdata 图片必须是完整路径js

原创 vue视频播放插件vue-video-player的具体使用方法

vue-video-player官网：https://www.npmjs.com/package/vue-video-player全局引入方式：html <div> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player></div

原创 vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

大屏主要的炫酷效果本人引用的是datav组件，地址：http://datav.jiaminghi.com/,这简直就是数据可视化的一款神器，神奇之处我就不多说了，大家可以自己去它的网站上自行体会。它也提供了如何在vue 中使用该组件。datav可以全局注入，也可以按需注入，本人省事就直接在main.js中进行了全局注入。gitee源码地址：https://gitee.com/vijtor/vue-map-datavhttps://www.jb51.net/article/199808.htm.

原创 vue出现无法更新视图的情况

原因：Object.defineProperty没有对 对象的新属性进行属性劫持对象新属性无法更新视图：使用 Vue.$set(obj, key, value)，组件中this.$set(obj, key, value)删除属性无法更新视图：使用 Vue.$delete(obj, key)，组件中this.$delete(obj, key)数组直接arr[index] = xxx无法更新视图原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接 arr[i

原创 审查元素时发现data-v-xxxxx，这是啥？

这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的’data-v-xxx’标记

原创 相同的路由组件如何重新渲染？

开发经常遇到的情况是，多个路由解析为同一个Vue组件。问题是:Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。同一个Vue组件component: MyComponent路由：const routes = [ { path: "/a", component: MyComponent }, { path: "/b", component: MyComponent },];如

原创 如何将获取data中某一个数据的初始状态

在开发中，有时候需要拿初始状态去计算。例如data() { return { num: 10 },mounted() { this.num = 1000 },methods: { howMuch() { // 计算出num增加了多少，那就是1000 - 初始值 // 可以通过this.$options.data().xxx来获取初始值 console.log(1000 - this.$options.data(

原创 计算变量时，methods和computed哪个好？

computed会好一些，因为computed会有缓存。例如:index由 0 变成 1，那么会触发视图更新，这时候methods会重新执行一次，而computed不会，因为computed依赖的两个变量num和price都没变。<div> <div>{{howMuch1()}}</div> <div>{{howMuch2()}}</div> <div>{{index}}</div></

原创 nextTick的用处

我举个例子，在vue中：我们修改了三个变量，那问题来了，是每修改一次，DOM就更新一次吗？不是的，Vue采用的是异步更新的策略，通俗点说就是，同一事件循环内多次修改，会统一进行一次视图更新，这样才能节省性能嘛答案是“小林”前面说了，Vue是异步更新，所以数据一更新，视图却还没更新，所以**拿到的还是上一次的旧视图数据，**那么想要拿到最新视图数据怎么办呢？ **nextTick**...

原创 为什么v-if和v-for不建议用在同一标签

在Vue2中，v-for优先级是高于v-if 的，咱们来看例子上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：...

原创 bug定位+数组循环

报错：上一行少个逗号 -·-！dd 写在循环外面 导致新数组全是重复的最后一条数据写在循环里面 才能确保新数组数据正确

原创 vue移动端 实现公告栏文字上下滚动效果

1、html2、 js

原创 http request 请求拦截器，统一携带token

// http request 请求拦截器，有token值则配置上token值axios.interceptors.request.use(config => {if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了config.headers.Authorization = token;}// sratload();return config;},err => {ret

原创 大数据_数据上报 ——登录

不能用 封装的请求formdata格式随机生成四位随机数