![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
一个巨蟹座的前端
抽出时间去学习,凡事从小做起,不怕单调和重复,长期的积累坚持,想不成功,也难。
展开
-
el-select失去焦点触发表单的必填校验
【代码】el-select失去焦点触发表单的必填校验。原创 2023-05-25 13:57:48 · 550 阅读 · 0 评论 -
隐藏el-input type=number时右侧操作箭头
去除el-input type=number右侧操作按钮原创 2023-02-24 15:15:54 · 641 阅读 · 0 评论 -
vue-i8n开发时问题记录
记录vue-i8n使用时遇到的问题原创 2023-01-31 10:57:48 · 392 阅读 · 0 评论 -
js数组内对象某个key值相同合并后放到一个新数组里面
js数组内对象某个key值相同合并后放到一个新数组里面原创 2022-12-02 15:54:08 · 850 阅读 · 0 评论 -
vue根据图片链接把图片写入粘贴板
复制图片到剪切板原创 2022-10-18 13:47:39 · 372 阅读 · 0 评论 -
vue实现根据图片链接下载图片
实现根据图片链接下载图片原创 2022-10-18 13:45:25 · 819 阅读 · 0 评论 -
element-ui的el-input组件实现只允许输入正整数(禁止以0开头,和输入e、+、-、.)
【代码】element-ui的el-input组件实现只允许输入正整数(禁止以0开头,和输入e、+、-、.)原创 2022-09-23 11:23:34 · 3065 阅读 · 2 评论 -
vue实现关闭浏览器退出登录功能(区别关闭和刷新)
在实现单点登录时,发现关闭浏览器后,并不会自动退出登录然后,再关闭浏览器后,就会自动调用我们的退出登录函数了。原创 2022-06-08 14:55:30 · 5827 阅读 · 7 评论 -
js数组中任意两元素交换位置并重新渲染到页面上
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原创 2022-04-06 13:24:15 · 1468 阅读 · 0 评论 -
vue 上传打包后的文件到oss上
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原创 2022-02-28 15:47:00 · 1282 阅读 · 0 评论 -
vue批量注册全局自定义指令
首先,我们在src目录下新建utils文件夹,然后建一个文件用来写我们的自定义指令const copy = { bind(el, { value }) { el.$value = value el.handler = () => { if (!el.$value) { // 值为空的时候,给出提示。可根据项目UI仔细设计 console.log('无复制内容')原创 2022-02-23 14:18:26 · 1817 阅读 · 0 评论 -
vue注册全局自定义指令,实现按钮的防抖
我们可以在src目录下新建utils文件夹,里面新建文件夹(随便起个名字,本文为了演示防抖,就命名为了debounce.js)上代码const debounce = { install(Vue) { Vue.directive('debounce', { inserted: function (el, binding) { let timer el.addEventListener('c原创 2022-02-23 13:09:39 · 750 阅读 · 0 评论 -
vue自定义指令实现输入框出现后自动聚焦
小编最近做项目时,遇到了一个问题,需求是点击编辑icon后,输入框出现,输入框失焦时隐藏。项目采用的vue-antdv的技术,做的时候发现,给输入框加上autofocus属性后,只有第一次输入框出现的时候,才会自动聚焦,查阅资料后,发现可以用自定义指令实现,下面上代码: <a-input v-focus v-model="item.name" @blur="() => (item.isEdit = false)" autofocus /> directives: { /原创 2022-02-15 13:09:17 · 1786 阅读 · 0 评论 -
防抖节流的理解和防抖节流工具类的封装
首先,我们要清楚防抖和节流的区别防抖 在事件被频繁触发时,只有上一次与下一次空出足够的空闲时间,事件才会执行节流 在事件频繁触发时,规定时间内,事件只会执行一次然后我们来看封装的工具类函数//防抖:在事件被频繁触发时,只有上一次与下一次空出足够的空闲时间,事件才会执行 function debounce(fnEvent, time) { var _time = null return function () { ..原创 2022-01-11 18:13:21 · 268 阅读 · 0 评论 -
一招解决github访问过慢的问题
首先,我们查询下github的ip,查询网址如下:https://www.ipaddress.com/然后,我们在找到hosts这个文件然后通过vscode打开,修改里面的ip为刚才搜索到的ip,然后保存。如果保存失败,以管理员身份运行vscode再次保存即可。...原创 2021-12-16 15:35:43 · 324 阅读 · 0 评论 -
开箱即用的vue图片放大镜
今天发现了一个图片放大镜插件,故来记录一下。先来给大家看下效果:4.1.安装插件yarn add vue-piczoom2.在项目中引入(要在components里面注册的)<script>import PicZoom from 'vue-piczoom'export default { name: "index", components: { PicZoom },};3.在模板中使用<template> <d.原创 2021-12-06 16:33:07 · 960 阅读 · 0 评论 -
父元素flex:1,子元素宽度100%失效的问题
今天做项目时遇见一个问题,父元素在设置flex:1来固定宽度撑满时,子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写:.parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; }}但同时遇到了另一个问题,我发现这样设置后,即使width超过之后,横向滚动条依然不出现,经过尝试加上一句代码即可:.parent{原创 2021-12-02 10:56:19 · 3752 阅读 · 1 评论 -
开箱即用的vue返回顶部组件
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 {原创 2021-11-24 09:56:38 · 370 阅读 · 0 评论 -
vue-i18n的简单使用兼容element-ui
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 ...原创 2021-11-23 14:20:16 · 1172 阅读 · 0 评论 -
element-ui的返回顶部组件无效
今天在做项目中的时候,要加一个返回顶部的功能。因为项目中用到了饿了么的组件,所以就直接引用了Backtop这个组件。我们在app.vue中写如下代码即可:<template> <div id="app"> <router-view /> <el-backtop target="#app" :bottom="100" :visibility-height="300"> <i class="el-icon-car原创 2021-11-18 18:00:56 · 681 阅读 · 0 评论 -
vue-cli项目的webpack打包优化
webpack目录相关知识路由组件和其他组件异步加载Ant Design of Vue组件库等的优化gzip压缩优化loadsh图片压缩CDN配置代码压缩公共代码抽离相关知识简单的配置方式调整webpack最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象:// vue.config.jsmodule.exports = { configureWebpack: { plugins: [ ..原创 2021-11-10 15:35:33 · 1300 阅读 · 0 评论 -
vue项目运行后自动打开浏览器
很早就发现,有些项目在运行后会自动打开默认浏览器,但一直没想过这是什么原因。今天闲来无事看了一下,原来这么简单就可以实现。打开我们项目的package.json"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build" },在serve命令后面加上 --open就可以实现了,是不是很简单呢。...原创 2021-08-11 09:32:36 · 919 阅读 · 0 评论 -
vue移动端遮罩层滚动穿透问题
今天小编在做项目的时候发现了一个问题,各种查资料才得以解决。下面来简单介绍一下问题:在页面中,我们需要点击按钮展示一个遮罩层,且遮罩层里面内容可滚动,但是遮罩层盖住的区域不可滚动,这样一个问题。搜索之后发现,在遮罩层标签上添加这样一个代码@touchmove.prevent.stop @mousewheel.prevent可以实现禁止页面滚动,但是遮罩层内容也不可以滚动,所以这个方案pass,如果你们遇到不需要遮罩层内容滚动的话,可以采用这样的方法。下面来介绍下解决方法:首先我们在data里原创 2021-08-06 09:51:52 · 1505 阅读 · 0 评论 -
vue项目中实现返回顶部功能
我们在浏览网页的时候经常看到回到顶部这个功能,这个功能也比较简单,今天我就介绍一下这个功能如何实现。使用scrollTop实现首先,我来简单介绍一下原理 1.根据网页的滚动高度,判断是否显示回到顶部功能按钮 2.点击按钮时,触发回到顶部事件,如果要追求视觉效果的话,可以加入定时器。下面简单介绍下代码实现...原创 2021-07-29 13:39:21 · 2743 阅读 · 0 评论 -
在vue项目中配置@指向src
小编是在项目的vue.config.js中配置的,代码如下图所示:module.exports={ devServer:{}, configureWebpack: { name: name, resolve: { alias: { '@': resolve('src') } } },}原创 2020-12-07 10:24:58 · 2920 阅读 · 0 评论 -
使用HBuilderX将web项目打包为app
前言今天尝试了将自己写的移动端项目打包为app,遇到了一些问题,想给大家排下坑。首先我们将自己的项目打包,小编用的vuecli3的脚手架生成的项目,在项目文件中的vue.config.js中修改一点配置//修改publicPath这一项为'./module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', devServer: { open: true,原创 2020-12-05 11:01:00 · 1869 阅读 · 0 评论 -
vue中插槽的使用实例
1.匿名插槽匿名插槽不需要设置那么属性,一个组件里面只能有一个,相应的具名插槽一个组件里面就可以有多个,只要设置name属性即可。//父组件<template> <div> <p>这里是父组件</p> <child> <p>我是插槽显示内容</p> </child> </div></template><script>原创 2020-12-03 10:19:31 · 821 阅读 · 0 评论