King的博客

sync。

使用antdesignvue时间组件设置自定义页脚后发现无法关闭面板。

【代码】antdesignvue表格使用fixed出现空白列——已解决。

【代码】在vue中全局修改滚动条样式。

有疑问欢迎一起讨论啊~

select选择框匹配

【代码】在antdesignvue中设置nProgress的zIndex无效——已解决。

对antd-vue输入框的二次封装，显示长度限制，兼容v-decorator和v-model

首先，我们看到vue官网中关于productionTip的API使用

在输入框中点击回车（@keyup.enter）和失去焦点（@blur）这两个操作均可以触发修改数据的接口。但是在输入框中回车会触发失焦事件，导致请求了两遍。

【代码】安装vue-grid-layout后报错——已解决。

title属性

【代码】vue学习之textarea输入英文时换行。

关于vuex的一些基本使用及扩展

moment常见用法

vue组件间传值

vue组件中动态获取浏览器宽度

问题描述：vue移动端高度设置auto后，rem偏小问题解决：使用px代替rem

需求：跳转到某一页面时保存当前data数据，而跳转到其他页面时清空缓存中的vuexbeforeRouteLeave(to, from, next) { if(to.name !== 'targetDistribute') { this.SET_TARGET_DATA({}) } next() }, created() { if(JSON.stringify(this.targetData) !== "{}") { let targetData = JSON.p

<template> <!-- 美容师大于55个（包含全部和未分配时增加滚动条，不然页面会很长） --> <div class="tabsContainer flex-none" ref="tabsContainer" :class="{ wrap: staffList.length > 55 }"> <scroll ref="scrollContainer" v-if="!isWrap" direction="horizontal" clas

<template> <div class="arrivalCanvas"> <canvas id="arrivalCanvas" style="width: 100%;height: 100%" class="canvas"></canvas> </div></template><script type="text/ecmascript-6">/** F2按需引入start */const F2 =

问题描述：在使用表单的对话框时，我在el-form中使用了v-if来移除校验(即重新渲染)，可是发现在对话框消失的时候就没有那么丝滑！！部分代码如下：<el-dialog title="编辑'" :visible.sync="dialogVisiable" top="0" width="550px" class="el-dialog-wrapper"> <el-form v-if="dialogVisiable" size="medium" ref="form" :rule

问题场景：在tab切换表格或者切换页面时，希望滚动条每次都回到顶部。代码：table上添加 ref='table'this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0})

2.3.0新增在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。但是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。推荐以 update:myPropName 的模式触发事件取而代之this.$emit('update:title', newTitle)父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：<text-document :title.sync="doc.title"></.

问题描述：如下图所示，如果我们点击上下箭头中间时，会出现排序为null的情况。问题解决：那么如何去掉这个情况呢？只需要自定义sort-orders即可，sort-orders默认是['ascending', 'descending', null]，点击时先升序ascending,再点击降序descending,再点击不排序null，如果想先降序的话，把descending放在开头即可，并且去掉null<el-table-column :sort-orders="['descending', '

问题描述，在日常开发时，我们会碰到切换表头，就是让某些表头显示和隐藏。这个时候切换时，表头会出现抖动的现象。解决：beforeUpdate(){ this.$nextTick(() => { //在数据加载完，重新渲染表格 this.$refs.table.doLayout(); })}看到网上一些人说使用在el-table中使用key属性，但是那个并没有用...

问题描述：el-table表头添加icon悬浮提示样式展示：代码：<el-table-column min-width="80" :render-header="renderHeader"> <template slot-scope="scope"> {{ scope.row.growthValueThreshold / 100 }}元 </template></el-table-column>methods: { re

在日常开发过程中，遇到的props类型大概有6种：字符串、数字、布尔值、数组、对象、函数。 props: { demoString: { type: String, default: '' }, demoNumber: { type: Number, default: 0 }, demoBoolean: { type: Boolean, default: true }, dem

代码如下：<template> <el-select v-model="person" multiple placeholder="请选择" value-key="id" > <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item" /> </el-select></template>这样，获取到的perso

问题描述：在一个下拉页面中，按钮是在底部的，当页面滑动时，始终在底部，android手机是好的，但是ios出现按钮随页面一起滑动。解决：保证content和footer是分离的<div class="wrapper"> <div class="content"><!-- 页面主体内容区域 --></div> <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 -->&

[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined”出现上述问题，只需要把v-if改成v-show即可。

环境准备安装better-scrollnpm install --save better-scroll引入better-scrollimport BScroll from "better-scroll"实现左右滚动使用BScroll实例化之前必需要等待DOM渲染完成。产生左右滚动的条件是子盒子内的宽度必须要大于父盒子的宽度，所以我们在用better-scroll时，必须要先得到滚动区域的尺寸和父盒子的尺寸，来计算出是否能滚动。下面是一个小demo<template> .

问题描述：使用elementUI组件的数字输入框时，键盘输入内容时按shift键时，光标上移！解决：给input设置line-height:1;

问题：a页面使用push进入到b页面，再使用push进入到c页面，c页面使用replace回到b页面，b页面需要点击两次才会返回a页面。分析：页面跳转记录：a->b->c->b现在c->b使用replace进行跳转，所以页面的堆栈记录是a->b->b，所以b页面需要两次才会跳转到a页面。解决：在c replace 到b的后面加上this.$router.go(-1)回退一页。this.$router.replace({ name: 'b' })this.$rou

需求场景： 使用elementUI组件时默认点击对话框外的空白处是会关闭对话框的，现在想要实现点击空白处不关闭！问题解决：使用官方文档提供的属性：close-on-click-modal注意：这里的modal指的是遮罩层！！默认点击遮罩层是可以关闭的，只需要设置成false即可。<el-dialog title="编辑" :close-on-click-modal="false"></el-dialog>...

场景：vue移动端输入框input限制小数点后两位实现<input type="number" @keydown="InoutChange" v-model="绑定的变量">methods:{ InoutChange(e){ e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null }}

首先我们来看一下要实现的滚动效果：部分代码如下：<div class="scroll_wrap"> <div class="left_list_box" ref="leftBox" :style="'height:' + maxHeight"> <div v-for="(item, index) in parentTypeList" :key="index" @click="parentItemClick(item)" :class="item.active

问题详情：在项目中，我们可能会碰到图片预览的功能需求，但是element中暴露出来的是el-image。它必须是点击图片才能够预览的，如果我们想点击文字进行预览图片呢？解决办法：<template> <div> <el-button @click="onPreview">预览</el-button> <el-image-viewer v-if="showViewer

问题描述，我们在项目开发过程中，select下拉框根据项目需求可能需要不同的样式。按常理来操作，假设我们使用的是less样式，会用/deep/来穿透样式。但是我们发现这样行不通。为何？因为默认情况下，select组件库是在body之外的，所以我们控制不了。解决办法：element提供了两个属性：popper-class和popper-append-to-bodypopper-append-to-body用来把select重新插入到body中，这样我们就可以使用/deep/来控制自己想要的样式

方法一：使用type=“number”<el-input v-model.number='count' type='number' maxlength='9'/>缺点：maxlength不生效可以输入e可以输入小数点方法二：使用正则表达式<el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'/>其中v-model.number确保获得的