weixin_47813845的博客

【代码】el-select失去焦点触发表单的必填校验。

去除el-input type=number右侧操作按钮

记录vue-i8n使用时遇到的问题

js数组内对象某个key值相同合并后放到一个新数组里面

复制图片到剪切板

实现根据图片链接下载图片

【代码】element-ui的el-input组件实现只允许输入正整数（禁止以0开头，和输入e、+、-、.）

在实现单点登录时，发现关闭浏览器后，并不会自动退出登录然后，再关闭浏览器后，就会自动调用我们的退出登录函数了。

1.交换位置const list1 = [ { labelId: 0, name: 'xiaomin' }, { labelId: 1, name: 'xiaohong' }, ]; const list2 = [ { labelId: 0, name: 'xiaomin' }, { labelId: 1, name: 'xiaohong' }, { labelId: 3, name: 'xiaomin' }, { labelId: 4, name

vue 上传打包后的文件到oss上第一步：安装插件npm i -D ali-oss-publish这个插件可以帮助我们把打包后的文件轮询后插入到oss指定目录下第二步：在根目录下新建ali-oss-publish.js文件const publish = require("ali-oss-publish");publish( { id: "", secret: "", region: "", bucket: "", entry: "dis

首先，我们在src目录下新建utils文件夹，然后建一个文件用来写我们的自定义指令const copy = { bind(el, { value }) { el.$value = value el.handler = () => { if (!el.$value) { // 值为空的时候，给出提示。可根据项目UI仔细设计 console.log('无复制内容')

我们可以在src目录下新建utils文件夹，里面新建文件夹（随便起个名字，本文为了演示防抖，就命名为了debounce.js）上代码const debounce = { install(Vue) { Vue.directive('debounce', { inserted: function (el, binding) { let timer el.addEventListener('c

小编最近做项目时，遇到了一个问题，需求是点击编辑icon后，输入框出现，输入框失焦时隐藏。项目采用的vue-antdv的技术，做的时候发现，给输入框加上autofocus属性后，只有第一次输入框出现的时候，才会自动聚焦，查阅资料后，发现可以用自定义指令实现，下面上代码： <a-input v-focus v-model="item.name" @blur="() => (item.isEdit = false)" autofocus /> directives: { /

首先，我们要清楚防抖和节流的区别防抖 在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行节流 在事件频繁触发时，规定时间内，事件只会执行一次然后我们来看封装的工具类函数//防抖:在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行 function debounce(fnEvent, time) { var _time = null return function () { ..

首先，我们查询下github的ip，查询网址如下：https://www.ipaddress.com/然后，我们在找到hosts这个文件然后通过vscode打开，修改里面的ip为刚才搜索到的ip，然后保存。如果保存失败，以管理员身份运行vscode再次保存即可。...

今天发现了一个图片放大镜插件，故来记录一下。先来给大家看下效果：4.1.安装插件yarn add vue-piczoom2.在项目中引入(要在components里面注册的)<script>import PicZoom from 'vue-piczoom'export default { name: "index", components: { PicZoom },};3.在模板中使用<template> <d.

今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写：.parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; }}但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可：.parent{

1.首先我们在components里面新建一个文件，并输入以下代码<template> <div class="th-back-top" v-show="btnFlag" @click="backTop"> <img class="bg-back2top2" :src="require('@a/backTop.png')"/> </div></template><script>export default {

1.首先下载vue-i18nnpm i vue-18n --save2.在项目根目录新建文件夹(自己命名)i18n.config.js,写如下代码 注意：小编在vue.config.js里面配置了路径别名，@l指向src/lang目录import Vue from 'vue'import VueI18n from 'vue-i18n'import Element from 'element-ui'const zh =require("@l/zh.js")const ...

今天在做项目中的时候，要加一个返回顶部的功能。因为项目中用到了饿了么的组件，所以就直接引用了Backtop这个组件。我们在app.vue中写如下代码即可：<template> <div id="app"> <router-view /> <el-backtop target="#app" :bottom="100" :visibility-height="300"> <i class="el-icon-car

webpack目录相关知识路由组件和其他组件异步加载Ant Design of Vue组件库等的优化gzip压缩优化loadsh图片压缩CDN配置代码压缩公共代码抽离相关知识简单的配置方式调整webpack最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象：// vue.config.jsmodule.exports = { configureWebpack: { plugins: [ ..

很早就发现，有些项目在运行后会自动打开默认浏览器，但一直没想过这是什么原因。今天闲来无事看了一下，原来这么简单就可以实现。打开我们项目的package.json"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build" },在serve命令后面加上 --open就可以实现了，是不是很简单呢。...

今天小编在做项目的时候发现了一个问题，各种查资料才得以解决。下面来简单介绍一下问题：在页面中，我们需要点击按钮展示一个遮罩层，且遮罩层里面内容可滚动，但是遮罩层盖住的区域不可滚动，这样一个问题。搜索之后发现，在遮罩层标签上添加这样一个代码@touchmove.prevent.stop @mousewheel.prevent可以实现禁止页面滚动，但是遮罩层内容也不可以滚动，所以这个方案pass，如果你们遇到不需要遮罩层内容滚动的话，可以采用这样的方法。下面来介绍下解决方法：首先我们在data里

我们在浏览网页的时候经常看到回到顶部这个功能，这个功能也比较简单，今天我就介绍一下这个功能如何实现。使用scrollTop实现首先，我来简单介绍一下原理 1.根据网页的滚动高度，判断是否显示回到顶部功能按钮 2.点击按钮时，触发回到顶部事件，如果要追求视觉效果的话，可以加入定时器。下面简单介绍下代码实现...

小编是在项目的vue.config.js中配置的，代码如下图所示：module.exports={ devServer:{}, configureWebpack: { name: name, resolve: { alias: { '@': resolve('src') } } },}

前言今天尝试了将自己写的移动端项目打包为app，遇到了一些问题，想给大家排下坑。首先我们将自己的项目打包，小编用的vuecli3的脚手架生成的项目，在项目文件中的vue.config.js中修改一点配置//修改publicPath这一项为'./module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', devServer: { open: true,

1.匿名插槽匿名插槽不需要设置那么属性，一个组件里面只能有一个，相应的具名插槽一个组件里面就可以有多个，只要设置name属性即可。//父组件<template> <div> <p>这里是父组件</p> <child> <p>我是插槽显示内容</p> </child> </div></template><script>