jokren的博客

问题：键盘弹起将底部按钮顶上去遮住输入框解决思路：实时监听窗口高度与初始高度比较，判断键盘是否弹起，弹起隐藏底部否则显示底部/vue/<div class='footer' v-show="isShow"></div> export default{ data(){ return{ originHeight: 0, // 原始高度 screenHeight: 0, // 实际高度 isShow: true, // 显示或隐藏底

实现断点续传主题思路:对文件进行每200MB切片,基于spark-md5计算出第一个切片文件的hash值,将文件的名称,大小,hash值传给后台,后台确认当前文件是否上传过,已上传过返回之前上传大小或第几个切片,前端再次上传切片,直到上传完成.代码:<el-upload class="upload-demo" ref='upload' action="" :http-request='calcMd5' :on-preview="handlePreview" :on-rem

转载：使用vue + less 实现简单换肤功能

面包屑有两种：一种是不带动态参数，一种是需要携带动态参数跳转的一，不带动态参数：1，通过路由元meta实现，在每个需要面包屑的页面路由中固定写好如：router.jsconst router = new Router({ routes: [{ path: '/test', name: 'test', component: test, meta: { breadList: [{ name: "首页", path: "/home" }

逐个赋值Object.assign(this.$data, this.$options.data())this.data获取当前状态下的datathis.data 获取当前状态下的datathis.data获取当前状态下的datathis.options.data() 获取该组件初始状态下的data3.如果有引入外部js的话使用：Object.assign(this.$data, this.$options.data.call(this))因为调用this.$options.data..

问题：由于每个人的IDE格式化不一致，导致提交的代码格式各异，在有冲突时可能会出现整个文件的冲突解决：1，在创建vue项目时添加eslint或者已有项目再单独添加eslint再pack.json里 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },这时，只要再提交代码前 npm run lin

问题报错:error in render : ‘typeerror’:cannot read property ‘path’ of undefinedvue 三层对象的渲染(Splash.a.b)例如:渲染的组件为Splash,数据Splash原因:1.这很可能是由于Splash首次渲染的值所致。那是一个空对象，它将为任何属性返回undefined2.数据Splash是异步获取赋值,同...

vue 同通过Object.defineProperty( )数据劫持方法里的get,set属性来监听data里的数据变化一,先熟悉下Object.defineProperty( )及其属性get,set通过以下代码就能理解var Book = {}var name = '';Object.defineProperty(Book, 'name', { set: function (v...

解决:把 v-model 的值加到循环数组中去，为每个 select 设置了单独的 v-model 变量值，对数据提前加工一下直接上代码:<template><div v-for='(val,index) in data'><el-select v-model="models[index]" placeholder="请选择"> <el-o...

问题：未登陆直接输入url：地址进入网站vue项目实例：一，设置router1.首先配置路由/src/router/index.js文件import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/',/...

一，后端文件流的形式（优点：简单）url=拼接的url（接口url+param参数）1，window.open(url)缺陷：有被拦截的可能2.利用a标签download属性实现下载，href为url3.利用from实现下载（推荐使用）直接贴代码download(url){ let from=document.createElement('from'); ...

一，父组件不触发原因：$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名。二，解决办法1.改小写命名2.用this.$parent.Event (Event为父组件中的自定义方法)使用父组件实例触发方法。3.如果是点击触发的 直接$emit(‘click’)触发...

一，watch和computed区别（各自处理的数据关系场景不同）1.watch擅长处理的场景：一个数据影响多个数据2.computed擅长处理的场景：一个数据受多个数据影响二，（1）watch最简单的监听 <input type="text" v-model="input"> watch: { input(val) { // ...

作用：mock数据实现前端不依赖后台接口开发步骤：1.npm install mockjs --save-dev2.目录3.在src目录下创建mock文件index.jsimport Mock from 'mockjs'import user from './user.js'Mock.mock('/main.php', 'get', () => { return us...

一.在vue单文件中html格式化失败原因： 在vuter默认配置中： “vetur.format.defaultFormatter.html”: “none”,解决：在user setting中设置 “vetur.format.defaultFormatter.html”: “js-beautify-html”,二.在拉下代码或者修改""双引号->’'单引号 后格式化 “单引号-...

vue中 有这种情况: 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新例如: 1.当你利用索引直接设置一个项时 this,arr[2]=‘美女’2.当你修改数组的长度时 this.arr.length=10$set()方法解决:this.$set(this.arr,2,'美女')...

vue路由钩子大致可以分为三类:1.全局钩子主要包括beforeEach和aftrEach,beforeEach函数有三个参数：to:router即将进入的路由对象from:当前导航即将离开的路由next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。afterEach函数不用传next()函数这...

重点:this.$forceUpdate();html&lt;div class="invoice-list" v-for="(item,index) in data" :key="index"&gt; &lt;img src="../../../../../static/images/arrow_bottom.png" v-if="item.imgIf" @cl

报错内容:No PostCSS Config found in: C:\Users\Desktop\Taboo\Taboo-portal\node_modules\element-ui\lib\theme-chalkat config.load.then (C:\Users\Desktop\Taboo\Taboo-portal\node_modules\postcss-load-config\s...

1,可能你真的没定义,这就不说了2.就是定义了例如:html&amp;lt;div&amp;gt;{{data.val.codeId}} &amp;lt;/div&amp;gt;data(){ return{ //详情 接口数据 data:{}},mounted(){ //通过接口请求回来数据进行赋值： this.data=res.data }}问题原因: ...

import App from ‘./App.vue’执行npm run dev后出现了警告提示：warning in ./src/App.vueThere are multiple modules with names that only differ in casing. //有多个模块同名仅大小写不同This can lead to unexpected behavior w...

1,支持vue2以上版本2,安装:npm install vue-i18n3,目录:4,创建i18n.js文件import Vue from 'vue'import VueI18n from 'vue-i18n'import locale from 'element-ui/lib/locale';import zh from './langs/zh'import en from ...

@'直接指向src 需要在webpack.config.js里面设置: resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), }, extensions: ['*', '.js', '.vue', '.json'] },...

1,添加自定义类名 popper-class=“atooltip”&lt;el-tooltip popper-class="atooltip" content="Top Center 提示文字" placement="top"&gt; &lt;el-button&gt;Dark&lt;/el-button&gt; &lt;/el-tooltip&gt;

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：&lt;li v-for="article in articles" @click="getDescribe(article.id)"&gt;methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 t...

在Vue项目中使用Echats，可以极大程度的方便完成很多Canvas功能。1 . 安装Echatsnpm install echarts --save2.项目main.js中引入Echarts// 引入Echartsimport Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Echarts)3.项目中...

html&lt;input type='text' ref='input1' /&gt;&lt;button @click='add'&gt; 添加数值&lt;/botton&gt;jsmethods:{ add:function(){ //this.$refs.input1 减少获取dom节点的消耗 this.$refs.input1.value...

html&lt;input type='text' :value='num'&gt;&lt;button @click='add'&gt; + &lt;/botton&gt;jsdata(){ return{ }},methods:{ add(){ this.$store.commit('add',1) }},co...

一,出现的问题1.路由跳转不起作用(1)解决方法:routerVue.use(Router)export default new Router({mode:'history', // 注意添加这一项routes: [ { path: '/', component: home}, { path: '/content', component: Content },...

问题1:vue中动态修改img的src属性,直接改路径图片不显示问题2:我在vue中创建common.js为公共方法,在其中的方法有要用到img,src为形参,调用方法写入路径参数,但一直不显示图片解决:vue中的js引入图片,必须require进来例如:1.html&lt;img :src='imgurl' /&gt;jsdata(){ return { im...

问题:watch:{ $route:(to,from)=&gt;{ // this.title 为undefined }}解决:换回正常函数watch:{ $route:funciton(to,from){ //this 指向Vue }}...

element-ui使用导航栏跳转路由用法最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程element-ui引入vue项目的用法参考element官网首先复制官网的例子，在这基础上再修改成我们想要的样子。&amp;lt;el-menu :default-active=&quot;activeIndex&quot; class=&quot;el-menu...