flowRight的博客

前端要实现一个功能，读取Excel表格批量导入题目（有种做法是前端请求后端接口，后端接口会返回相应的模板文件，然后前端在模板文件里面写好数据，把模板文件post给接口，接口读取文件返回读取的数据给前端，其实就是把读取Excel表格的数据给后端处理，这种方式感觉比较麻烦）我是使用elment ui里面的组件upload组件 + XLSX插件前端实现读取Excel数据。1 安装XLSXnpm install --save xlsx2 在main.js引入import XLSX from 'xlsx'

使用element ui的组件el-upload上传图片，一般使用两种方式base64形式![在这里插入图片描述](https://img-blog.csdnimg.cn/20201208165633616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtbGxqZXQ=,size_16,color_FFFFFF,t_70<el-upl

第一步：安装less依赖：npm install less less-loader --save第二步：修改webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加{ test: /\.less$/, loader: "style-loader!css-loader!less-loader",　　options: { sourceMap: true }// 可以看到当前标签样式来自于哪个less文件}第三步：<

思路：将input框隐藏 ，用六个li格子当框，，焦点聚焦在input上，通过监听input框输入的长度，根据输入长度判断控制格子内小黑点是否显示，同时用正则替换非数字。<div id="payPwd"> <div style="text-align: center">支付密码</div> <input ref="pwd" typ...

v-model只是一个语法糖，等于:value+@input，真正的实现靠的还是： v-bind:绑定响应式数据，触发 input 事件并传递数据 (核心和重点)<input v-model="something">其实和下面一样的<input :value="something" @:input="something = $event.target.value"&g...

代码如下效果如图

extend创建的是一个组件构造器，而不是一个具体的组件实例创建一个myToast.vue文件：<template> <div class="wrap" v-if="show"> <div>{{text}}</div> <div>{{title}}</div> </di...

extendextend使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件对象。类似于类中的继承概念（我上篇文章中已提及，此处省略）mixins可以混入多个，当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为...

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name<template> <div class="hello"> <div v-test='name'></div> <...

1 安装cnpm install echarts -S2 main js中引入import echarts from 'echarts'Vue.prototype.$echarts = echarts 3 使用<div id="myChart" :style="{width: '500px', height: '500px'}"></div>export ...

效果如下，当列表滚动时标题切换粘附固定头部代码如下<div class="table" id="tab"> <div v-for="(item,k) in list"> <div :class="['title',fiexdItem ==k?'fiexd':'']" > {{item.name}} </div...

watch和computed都是以Vue的依赖追踪机制为基础的：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。区别：computed是一个计算属性,类似于过滤器,如果在data里面定义数据再在computed里面书写会报错data () { return { firstName: '...

1 进入node官网安装node js安装成功后运行 node -v检查是否安装成功$ npm -v4.2.02 安装webpack需要先获取root权限所以现在terminal（终端）内输入 sudo -s 然后输入密码再输入如下$ sudo npm install webpack -g3 安装vue-clisudo cnpm install --global vue-c...

图片懒加载就是初始时统一将img的src设置为一张默认图片，当图片加载完出来，才将真正的图片链接填入img的src属性。使用步骤如下：1 安装插件cnpm install vue-lazyload --save-dev2 main.js引入import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad,{ error:requ...

我想用params来传参，是这么写的，嗯~this.$router.push({ path:"/detail", params:{ name:'java', }});结果可想而知，接收参数的时候：this.$route.params.name //undefined这是因为，params只能用name来引入路由，下面是正确的写法：this.$router.push...

一个vue文件就是一个组件 有些组件再项目中经常用到 每个页面引入太麻烦 可以新建一个文件批量引入注册，这样代码好管理新建一个select js文件里面批量引入组件注册再导出import searchSelect from ‘…/components/common/searchSelect.vue’;import selectPub from ‘…/components/common/sel...

原因：ES6语法IE浏览器不能识别，js文件没有加载，下载引入polyfill（polyfill指的是“用于实现浏览器不支持原生功能的代码”）在index.html中引入即可

vue中引入vux，需要在原组件基础上修改某个组件的功能，可使用组件的继承属性

vue路由默认是hash模式，改成history路由模式可以去掉#,这个除了需要后端服务配合外，config文件修改如下

1 、npm install vue-i18n2、在 main.js 中引入 vue-i18n （前提是要先引入 vue）import zheng from ‘@/assets/zheng.js’//中文文件import English from ‘@/assets/English.js’//英文文件import VueI18n from ‘vue-i18n’Vue.use(VueI18...

浏览器接收接口返回的数据如果是Number类型且位数太长，会出现精确定误差（如id:154564548788121240)在经过浏览器解析后（id:154564548788121241），拿id去请求详情会出现报错情况。解决办法:api返回String类型...

1.利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了 npm install vuex --save2.新建一个文件夹，并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。import Vue from ‘vue’;import Vuex from ‘vuex’;3.使用我们vuex，引入之后用Vue.use进行引用。4 在main j...

vue配合vux（ 移动端 UI 组件库）进行手机端开发构建vux-loadernpm install vux-loader --save-devvux-loader使用为了减少使用成本，只需要调用merge方法对原来webpack配置进行操作：const webpackConfig = {} // 原来的webpack配置const vuxLoader = require(‘vux-...

父组件传给子组件1 子组件先注册一个属性2 把属性绑定到组件上放在父容器内， 指定要绑定传给子组件的的值3 父组件内要有值，4 子组件取值子组件传给父组件1 在子组件绑定2 在父组件内接受触发 company_close为一个在父组件内被触发的函数...

先浏览器渲染页面前需要先构建 DOM 和 CSSOM 树可以看到DOM树的构建过程为：将字节转换成字符，确定tokens，将tokens转换成节点，然后构建 DOM 树。CSSOM 为何具有树结构？为页面上的任何对象计算最后一组样式时，浏览器都会先从适用于该节点的最通用规则开始（例如，如果该节点是 body 元素的子项，则应用所有 body 样式），然后通过应用更具体的规则（即规则“向下级...

某个手机端页面需要显示报表 报表需要强制横屏展示（通过css样式媒体查询判断旋转布局）代码如下强制横屏 <div class="top"></div> </div></div>...