- 博客(18)
- 收藏
- 关注
RSS订阅原创 --legacy-peer-deps 有什么用
legacy-peer-deps标志是在v7中引入的，目的是绕过peerDependency自动安装；它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。近期遇到了一个npm冲突的问题，在npm v7中，现在默认安装peerDependencies。所以很多情况下，这会导致版本冲突，从而中断安装过程，比如:所有项目交由运维平台自动打包。
2022-11-04 15:32:42
845
原创 前端实现Excel导出
导出1、点击事件async function exportData() { console.log('点击了导出', getForm().getFieldsValue());//根据接口要求调整是否需要传参 const params: any = { ...getForm().getFieldsValue(), }; console.log(params); const res = await carModelInfoExpor
2022-03-08 16:19:32
407
原创 vue实现导入Excel数据
导入1、api链接 introductionCarModelInfoApi='/carModel/info/introductionCarModelInfo',2、接口操作export function importExcel(data: any) { return new Promise(async () => { const { createMessage ,createConfirm} = useMessage(); const formData = new For
2022-03-08 16:05:09
3963
2
原创 vue项目打包配置
实现打包后如图所示效果1、在项目根目录创建vue.config.js文件：// 打包配置module.exports = { publicPath: "/", //公共路径(必须有的) outputDir: "dist", //输出文件目录 assetsDir: "pc", // //静态资源文件名称 // assetsDir: "tg", // //静态资源文件名称 productionSourceMap: false, //去除打包后js的map文件 lintOnSave: fals
2021-04-26 19:06:52
422
原创 Vue生命周期和beforeRouteEnter()/beforeRouteLeave()函数
找到Vue.js 的官网，简直都是自己陌生的各种语法函数，（下面总结了一下常用的）先参考vue官网从简单的看起！先了解下vue的生命周期。2、也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下：beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。beforeMount():已经完成了模板的编译，还没有挂载到页面中。mou
2021-04-23 18:15:23
1249
原创 前端各种数据格式转换
1、// 图片转数组格式let cover_image = []cover_image.push(this.$route.query.cover_img) //2、// string 转数组 push（）；var array = ref.data.button_text.join_name;var name = new Array();//生明一个空数组name.push(array);//空数组添加值this.name2 = name;3、split（）；字符串转数组let arr
2021-04-23 17:27:07
1155
原创 ...mapMutations的使用
1、在es6中更新了…拓展运算的写法：首先我们要先知道三个点是什么意思…；简单点理解可以讲三个点看成就是省略号，省略号表示有些东西被隐藏了，用省略号就是表示这个对象是可以展开的，所以三个点ES6中也定义为扩展运算符或者展开运算符。2、下面以示例介绍：首先在vuex定义：export default new Vuex.Store({ state: { // 展示数据 detail: {}, },mutations: { //方法名字自定义（） changeDetail(state
2021-04-23 10:46:33
9345
1
原创 上传视频并获取加载进度
vue 实现上传图片到阿里（效果如下图所示）![在这里插入图片描述](https://img-blog.csdnimg.cn/20210419145040569.pn1、html<!-- 视频上传 --><template> <div class="voide_upload"> <div> <!-- 显示内容 --> <div v-if="voideComputed"> <div class="v
2021-04-23 10:27:28
464
原创 PC端滚到底部加载下一页数据
在PC端开发的过程中我们经常会遇到，滚动页面底部来获取下一页的数据：1、在html定义ref（从这里开始计算）<div class="content" ref="scrollTopList">.....内容........</div>2、在data里生明page=1，isempty: false（自定义用来获取数据时判断是否需要获取下一页）,// 监听页面滚动 mounted() { this.$refs.scrollTopList.addEventListe
2021-04-23 10:22:50
790
原创 Vue—ImgCutter实现图片剪裁
上传图片时经常会用到图片剪裁：那么接下来分享的是Vue里的ImgCutter剪裁方法。（实现功能如下图 ）1、首先下载npm install vue-img-cutter --save-dev2、页面引入import ImgCutter from 'vue-img-cutter'export default { components:{ ImgCutter },...}3、html部分<div class="imag
2021-04-12 17:56:59
685
原创 js实现循环input v-moudel值改变
在获取后台数据时候有可能会实现这样的功能 ：1、根据表单信息循环数据，使用户填写2、从后台获取的数据打印显示如下：3、那么名称可以实现 input输入框的值应该怎么实现循环改变呢<div class="xinxi" v-for="(item,index) in frumdata2"> <p>{{item.name}}</p> <el-input v-model="item.value" placeholder="请输入">&
2021-04-08 16:24:56
466
原创 子组件向父组件传值（$emit）
1、定义子组件<template> <div> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </div></template><script> export default {
2021-04-02 17:41:56
383
原创 Vue父组件向子组件传值
父组件向子组件传值（props）vue中父组件向子组件传值1、定义父组件<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> </div></templat
2021-03-31 11:59:54
449
原创 Vue封装单文件组件
在Vue中我们会经常遇到一个页面，数据过多，为了简便一般会把内容封装在引入页面，详情如下：1、一般在：components下新建一些目录：目录下新建vue文件：写入我们要实现的功能，内容和平时页面一样，可以先将页面引入到主页面就可看效果2、在需要引入的页面，以这种方式引入。3、commponents下生明4、在文件需要的地方写入ref内容相当于V-if类似功能，可根据需要自定义，按以上步骤就可成功实现单文件组件啦！...
2021-02-06 13:56:47
213
原创 Vue判断pc和web设备打开不同的页面
识别电脑和移动打开不同的页面前几天呢老板提了需求Vue项目中首页两种模式，一种浏览器，另一种用移动设备打开自动切换至移动端官网页面。1、首页，在methods判断，当前设备是移动还是pc2、调取方法判断，跳转到对应页面3、router...
2021-02-06 11:41:20
1418
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人