侯六六-优快云博客

原创将一维度数组转换成三维数组结构

目标UI图：实现想法：希望如下结构直接循环 <div v-for="items in dataList" class="data-info"> <g-card-title :data="{title:items.bigTitle}"></g-card-title> //循环小标题list列表 <g-card v-for="item in items.list" :data="item"> /**组件

2020-12-18 14:58:35 1829

原创 vue使用html2canvas和JsPDF导出pdf组件

<template> <div class="g-down-pdf"> // 该class的作用为在导出的时候需要将导出的dom设置为fixed top:0 否则分页将会有空白 <div ref="pdfDom" :class="downPdf?'downPdf':''"> //插入的内容 <slot name="content" ></slot> </div> <div

2020-12-16 14:38:05 576

原创 string转blob

function download(res, fileName) { const content = res.data.flow; // const name = decodeURI(res.headers['content-disposition'].split('filename=')[1]); // const blob = new Blob(content, {type: 'application/vnd.ms-excel;charset=utf-8'}); // 创建一个类

2020-09-11 15:38:00 7953 1

原创仿蓝湖布局，避免自适应卡片列表页面留白过多

先上图，最终实现效果希望实现的效果：根据屏幕宽度自适应，并且在右边留白过多的情况下，将整体内容居中。之所以会做这个，如下图。是因为当magin存在的时候，视觉上看起来在右边完全还可以放下一个卡片，但是实际它的宽度已经不足够再放下一个card了。最终参考蓝湖的布局，当页面宽度留白太多的时候，处理了居中。但是这样需要计算很特别多重情况，很容易忽视一些特殊情况。并且居中的时候，内部的div会自动填充为100%，需要dom操作去修改内层(home-main)的宽度,才能实现flex的居中…html&l..

2020-07-22 10:16:46 799

原创 require和import的区别

动态加载文件的时候用require 替代import1.import编译时调用，所以必须放在文件开头，并且webpack的现在的实现方式不能实现完全动态，需要一次性将所有文件都引入。import是解构过程，以promise的方式请求的，需要.then返回数据2.require可以在运行时调用随时引用，理论上可以运用在代码的任何地方，并且可以根据传值来选择引用的文件，可以直接赋值*代码示例import('@/pages/demo').then(item=>{})const city =

2020-05-28 15:21:46 481

原创移动端rem与em的区别，以及pxtorem的运用

rem与em都是css的像对单位。em是根据父级节点来改变自身的大小，比如：body{16px = 1.000em} node2{20px = 1.250rem} node3{18px = 0.9em}em是按照父级节点来改变的rem怎么是根据根节点来改变自身大小,rem布局的本质是等比缩放，一般是基于宽度html {font-size: 16px}/* 作用于非根元素，相对...

2020-03-30 15:48:18 644

原创超出隐藏

/* 超出隐藏省略号 */.over_text {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.over_hidden {text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -we...

2019-12-18 11:58:36 160

原创 vue将上传的excel转化成数组

<el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-change="readExcel" > 转换数组 </el-upload>readExcel(file) { // 此处接受的file，为文件上传的file...

2019-11-20 15:43:18 993

原创 vue中使用image-webpack-loader

首先打开 webpack.base.confi.js提示：在这里url-loader 和 image-webpack-loader 不能一起使用，否则会导致图片出不来接着找到 module: { rules: [ {}... ]}在这里写入，一定要先写 ‘file-loader’ 才能使用 'image-webpack-loader’有各种配置，可以调...

2019-10-24 11:44:15 8449

原创 vue中使用wow.js

首先安装wownpm install wowjs --save-devanimate.css会自动安装在 main.js中引用require('animate.css/animate.min.css');import {WOW} from 'wowjs'Vue.prototype.$wow = new WOW({ boxClass: 'wow', // default a...

2019-10-24 11:39:03 1212 1

原创 uniApp处理微信小程序获取用户信息getUserInfo

用微信原生代码应为：使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。 <button form-type="submit" open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>bindgetuserinfo:用户点击该按钮时，会返回获...

2019-09-06 11:50:40 32025 3

原创 web前端vue移动端瀑布流展示

将瀑布流抽成了vue的一个组件<template> <div class="wrapper" :class="isHidden?'isHidden':''"> <div id="sortable"> <div class="card" v-for="item in showList"> <div cla...

2019-07-22 14:18:21 1472

原创 ios内嵌h5返回上一页后空白触屏一下或者拉动一下,才会显示的问题

移动端开发react vue项目中，ios上点击返回的时候，会出现空白现象，触屏一下或者拉动一下,才会显示出来也查找过很多资料，但都实现不了，包括#app设置为 position:absolute 也不行最后在生命周期总 updated的时候强制改变scorllTop updated() { document.scrollingElement.scrollTop = 0...

2019-05-21 15:24:12 5336 2

原创 axios导出文件

fileRequest.js需要将responseType设置为blobimport axios from 'axios'const fileService = axios.create({ baseURL: process.env.BASE_API, responseType: 'blob'})拦截器设置：fileService.interceptors.request.u...

2019-05-13 16:21:15 1704

原创 vue:todolist Demo

TodoList.vue<template> <div> <div> <input v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> &...

2019-05-07 18:20:19 22452

原创 ES6 find 和 filter 的区别

this.SoftwareList = [{'name':'1',index:1},{'name':'2'},{'name':'1'}]find只查出第一个符合条件的结果直接返回了一个对象const arr1 = this.SoftwareList.find(t => t.index== num)console.log(arr2 ); { name: '1', index: 1 }...

2019-04-30 16:39:01 268

原创使用 WebViewJavascriptBridge 处理 OC 与 JS 间的交互

区分安卓和ios的情况下：var ZmqBridge = { init: function(callback) { var u = navigator.userAgent var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //判断是否是ios if (!isiOS) { //安卓 if...

2019-04-23 18:18:07 137

原创 flex相关布局属性以及垂直居中布局方式

2019-01-25 11:43:04 503

原创企业微信微信api开发调起默认浏览以及支付方式

判断是否为pc端企业微信function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/windowswechat/i) == 'windowswechat'&&'wxwork'==ua.match(/wxwork/i)) {//发送请求向后台获取wx....

2018-12-14 10:21:18 7070 1

原创 mpVue

http://mpvue.com/全局安装 vue-cli$ npm install --global vue-cli创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project安装依赖$ cd my-project$ npm install启动构建$ npm run dev新增的页...

2018-11-22 11:41:29 431

原创 eslint

在项目中安装示例，只需要在 package.json 中添加如下配置，并进行安装：“eslint”: “^4.11.0” "main"：... , "scripts": { "lint": "eslint src", ... }在项目的根目录下，新建一个名为 .eslintrc 的文件，在此文件中添加一些检查规则。Environmen

2018-11-22 11:41:15 242

原创 react:setState延迟

setState是异步的，不保证同步的1.回调函数 this.setState({current:e.key}, function () { console.log(this.state.current); });2.生命周期componentDidUpdate(){ console.log(this.state.current);}3...

2018-11-22 11:40:24 2814

原创 mpvue:echart

安装npm i mpvue-echarts使用&lt;template&gt; &lt;div class="echarts-wrap"&gt; &lt;mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-c

2018-11-22 11:39:56 717

原创 mpvue:swiper

用到的关键字如下：class:classcurrent:currentbindchange@changecircular是否实现无限滑动 true/falseskip-hidden-item-layout轮播图性能的优化 true/false附上源码：&lt;template&gt; &lt;div class="wraper"&gt; &lt;d

2018-11-22 11:39:39 611

原创 mpvue:table

&lt;template&gt; &lt;div class="gen-schedule-card"&gt; &lt;div class="gen-table"&gt; &lt;div class="gen-tr"&gt; &a

2018-11-22 11:39:27 1616

原创 angularJs

radio 取得的值为string，不是boolean类型&lt;button ng-class="x.canLive?'btn-success':'btn-danger'" ng-repeat="x in arr" ng-click='btnClick(x)' ng-bind='x.a'&gt;&lt;br/&gt;&lt;/button&amp

2018-11-21 09:39:19 306

原创 vue:vuex

如何使用vuex、使用store中的数据、替换store中的数据？　　vuex大家都不陌生，比如我在一个store的state中存储了items为一个空数组，然后在组件中循环数组中的每一个元素并展示出来，然后再通过axios获取到数据之后更新store，这样数组中就有元素了。　　最开始我使用的思路如下所示：const state = { totalPrice: 0, items: ...

2018-11-21 09:39:07 138

原创 echart:option以及rich

option = { title: { show: true, text: 'name', //标题 link: 'name', //;文本超链接 target 'name', //（self、blank）指定窗口打开 textStyle: { color: '#fff', fontStyle: 'normal', //'italic' 'oblique' ...

2018-11-21 09:38:58 1175

原创 scrollTop总是0的原因

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;页面此时才正常.原来是这行东西造成IE无法获取document.body.scrolltop!把顶部这两行删掉将可以了.但是为什么会这样呢?google一下,发现改成:&a

2018-11-21 09:38:35 8077

原创 mpvue:flyio

main.js// main.js// 将fly实例挂在vue原型上，在然而你和组件中通过this使用flyvar Fly=require("flyio/dist/npm/wx") var fly=new Flyfly.config.baseURL='http://xx.xx.xx.xx:xxxx/api/v3/' // 配置请求基地址Vue.prototype.$http=fly /...

2018-11-20 15:24:02 440

原创 vue:computed和method的对比

HTML中，每一个调用了Vue的methods的方法，都需要执行一遍reversedMessage()这个方法；而使用computed计算属性的，只执行一遍将结果保存在缓存中。

2018-11-20 15:22:34 104

原创 vue:异步async and await and generator与promise与this.nextTick()的使用

项目例子：async focusInput (index) { await this.$nextTick(() => { let el = this.$refs[`scopeInput-${index}`].$el let input = el.querySelector('.el-input__inner') input.focus() })},&l...

2018-11-20 15:21:58 3406

原创 vue监听赋值值以及provide与inject

在子组件增加watch监听watch: { 'oState': function (val) { this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1}) }},

2018-11-20 15:19:06 7965

原创 vue:router

this.$router.go()// go forward by one record, the same as history.forward()router.go(1)// go back by one record, the same as history.back()router.go(-1)// go forward by 3 recordsrouter.go(3)...

2018-11-20 15:17:58 311

weixin_41143662的博客