vue
再希
这个作者很懒,什么都没留下…
展开
-
vue3父组件对多个子组件校验、校验定位方法
【代码】vue3父组件对多个子组件校验、校验定位方法。原创 2023-08-26 18:23:04 · 1697 阅读 · 0 评论 -
vue3 + element-plus清除表单校验
使用:ref名称.value.resetField()原创 2023-08-22 17:11:24 · 1560 阅读 · 0 评论 -
Vue3+Vite+Pinia
Vite是一种新型前端构建工具,能够显著提升前端开发体验Vite 意在提供开箱即用的配置,同时它的和带来了高度的可扩展性,并有完整的类型支持。搭建Vite项目相关命令:Vite解决@问题修改项目中的vite.config.js文件。原创 2023-07-22 15:10:25 · 241 阅读 · 0 评论 -
修改node版本,项目起不来
在自己电脑上找到之前的node版本安装包,重新安装,把项目里的node_modules文件夹先删掉,重新在控制台运行。实在不行的话可以试试项目重新从git上获取。卸载当前版本node sass。如果你已经下载了node-那么可能是node的版本和。重新启动项目应该就可以了。的版本不匹配导致的。原创 2023-03-09 17:32:55 · 823 阅读 · 0 评论 -
vue 不是内部或外部命令
创建vue项目,vue指令报错处理原创 2023-02-07 11:04:42 · 211 阅读 · 0 评论 -
自定义平台主题配置
自定义主题配置原创 2023-02-03 15:43:46 · 176 阅读 · 0 评论 -
数组对象的深拷贝
2、当复杂一点数组,比如数组里面是对象的时候就不能使用结构语法了,可以使用JSON.parse(JSON.stringify(a))来实现。深拷贝不但对指针进行拷贝,并对指针指向的内容进行拷贝,经过深拷贝后的指针是指向两个不同地址的指针。浅拷贝主要是对指针的拷贝,拷贝后两个指针指向同一个内存空间,1、一维数组使用解构语法可以实现深拷贝。当a改变时,b不会变。原创 2022-10-08 11:22:12 · 3144 阅读 · 0 评论 -
Vue项目中设置elementUI的el-dialog上下左右居中
vue转载 2022-06-01 16:53:52 · 6530 阅读 · 0 评论 -
postMessage - 跨域消息传递
window.postMessage()方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。...转载 2022-03-30 10:15:33 · 369 阅读 · 0 评论 -
vue数组对象根据某个属性值排序
methods: { getsort() { const arr = [{name: '苹果',num: 10},{name: '柚子',num: 6}] arr.sort(this.sortBy("num")) // [{name: '柚子',num: 6},{name: '苹果',num: 10}] }sortBy(i) { return function(a,b) { return a[i] - b[i] // a[i] - b[i]为正序,倒叙为 b.转载 2022-03-29 15:49:42 · 1662 阅读 · 0 评论 -
字符串截取最后一个“/“前面或后面的全部字符串
const http = 'https://www.baidu.com/?tn=40020637_5_oem_dg' const str = http.substring(http.lastIndexOf("/")+1) console.log(str); //?tn=40020637_5_oem_dg const str2 = http.substring(0,http.lastIndexOf("/")) console.log(str2); //https://...原创 2021-05-20 11:04:42 · 2131 阅读 · 0 评论 -
enter键页面刷新问题
在form表单中添加一个input,发现输入框输入内容后回车就会刷新页面解决方法是在form里添加@submit.native.prevent <el-form @submit.native.prevent> <el-form-item label="考试名称:"> <el-input style="width:400px;" v-model="basicForm.name"></el-input> </el-.原创 2021-05-18 14:25:15 · 316 阅读 · 0 评论 -
Ant design vue中实现动态更换主题色
一、创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能,根据需求选择配置功能这里最好选择2.0版本,可以保存预设,下次直接使用等待项目加载出来,找到文件,然后打开二、安装相关依赖,这里可以直接在package.json文件里加入,在项目里加上框住的内容,然后npm i,add ant-design-vue是UI库ant-design-vue是依赖于less进行.原创 2021-05-17 18:00:15 · 3593 阅读 · 2 评论 -
控制台报net::err_connection_timed_out 问题
node请求接口的时候意外遇到控制台出现这个问题,在网上找了很多方法,总结以下:是因为自己的网络环境更换了,但是电脑没有关闭,项目也一直在旧的坏境运行,所以在新的网络下修改代码然后就报错了,就是网络错误导致的解决方法:通过检查发现,前端只是把http://localhost:8080改成了http://192.168.XX.XX:8080没有修改访问后台的接口地址在,把访问后台的地址,localhost改成对应的本机ip就行了,也可以试试先重启电脑和项目试一下...原创 2021-04-25 09:53:44 · 4893 阅读 · 0 评论 -
vue中a标签实现带header的下载
简单介绍一下,这个是想用a标签请求接口下载文件,请求接口动态添加header请求头1、在按钮上添加点击事件<el-button type="backinfo" size="mini" @click="handleDownLoad">资源导出</el-button>2、在methods中写以下两个方法handleDownLoad() { fetch('xxxx', { method: 'GET', headers.原创 2021-04-23 16:52:09 · 7537 阅读 · 0 评论 -
rgba与十六进制的相互转换,以及rgba的校验
1、将rgba颜色值转换为十六进制(rgb转十六进制同理)RGBToHex(rgba){ let str = rgba.slice(5,rgba.length - 1), arry = str.split(','), opa = Number(arry[3].trim())*100, strHex = "#", r = Number(arry[0].trim()), g = Number(arry[1].trim()), b = Number(arry[2].trim());转载 2021-03-10 10:27:47 · 7281 阅读 · 0 评论 -
vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法
//这个我是用在router文件下的index.js文件里的router.afterEach((to,from,next) => { window.scrollTo(0,0); // 或 // window.scroll(0, 0);});原创 2021-02-25 11:29:10 · 369 阅读 · 0 评论 -
css表格内容可以撑开固定高度
table { table-layout: fixed; word-wrap:break-word;}td { word-wrap:break-word;}表格<div class="list"> <table> <tr class="trth"> <th style="width:15%">文章名</th> <th style="width:85..原创 2021-01-07 16:05:37 · 1276 阅读 · 0 评论 -
vue时间戳和时间的相互转换
一、时间戳转化成时间使用<div>{{logTime|formatDate}}</div>data:{ logTime:1609899674000000000 //这个是纳秒的时间戳}filters: { formatDate: function (value) { let date = new Date(value / 1000000);//这个是纳秒的,想要毫秒的可以不用除以1000000 let y =原创 2021-01-07 15:46:01 · 12910 阅读 · 1 评论 -
数组的并集交集和差集
可以用来比较两个数组中的内容,并集是两个数组中所有出现的值,交集是两个数组中都存在的值,差集是除去都存在的剩下的,也可以理解为:差集 = 并集 - 交集<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2020-12-29 17:13:08 · 2112 阅读 · 0 评论 -
vue不用插件实现一键复制
html<div id='loginAddress'>{{copyContent}}</div><button type="info" @click="copy(copyContent)">一键复制</button>jsdata : { copyContent:'我要复制的内容',},methods: { copy(data) { const copyContent = data; // 创建inpu.转载 2020-12-02 10:10:01 · 271 阅读 · 0 评论 -
npm和yarn的区别
Yarn是什么?“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了:npm install的时候巨慢。特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此。同一个项目,安装的时候无法保持一致性。由于package.json文件中版本号的特点,下面三个版本号在安装的时候代表不同的含义。转载 2020-09-15 15:20:46 · 115 阅读 · 0 评论 -
vue实现简单动画
今天来记录一下vue动画的几种用法一、使用过度类名Vue 提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡在进入/离开的过渡中,会有 6 个 class 切换。 v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线..原创 2020-08-03 15:48:05 · 1800 阅读 · 0 评论 -
vue实现input file上传图片 显示预览图
<template> <div> <input v-show="false" type="file" accept="image/*" @change="tirggerFile($event)" ref="input" /> <div style="width:200px;height:200px;border:1px solid;text-align:center;" @click="openImg"> <spa...转载 2020-08-01 10:05:38 · 3090 阅读 · 2 评论 -
vue简单的星级评分
htmljscss部分可以自己添加我这里没有给出实现出来的效果如图:原创 2020-07-29 17:57:15 · 122 阅读 · 0 评论 -
vue实现tab栏切换效果
htmljscss加一个act样式例如:这样就可以实现切换的效果了,我里面还加了一点就是点击切换的同时下边的内容也会跟随改变主要用到的是v-show来实现原创 2020-07-29 16:40:47 · 716 阅读 · 1 评论 -
vue中实现省市区三级联动(V-Distpicker插件)
使用 npm 安装:npm install v-distpicker --save注册全局组件import VDistpicker from 'v-distpicker';Vue.component('v-distpicker', VDistpicker);注册组件import VDistpicker from 'v-distpicker'export default { components: { VDistpicker }}基础<v-distpick转载 2020-07-25 16:25:13 · 2348 阅读 · 0 评论