随笔分类 - vue
摘要：某些场景下，我们的表单需要做成可配置表单，根据管理员配置好的表单信息来动态生成表单，比如业务员就只能填写业务类型的表单信息，运营人员可以配置活动类型的表单信息，类似于表单的权限控制。 >预览动态表单效果在文章最后 ### 动态表单校验 ```html 立即创建 重置 回显 ``` ### 1、处理接
阅读全文
摘要：@[TOC] 项目中关于组件的使用经常会碰到这种情况：父子组件传和方法调用、兄弟组件的传值和方法调用、多个独立组件的数据共享和方法调用，例如：`a、b`组件的的数据共享，该数据是由`c`传出的，通过`a、b`组件修改共享参数，调用`c`方法实现`a、b`组件的数据更新。本文总结了上述的几种情况并分别
阅读全文
摘要：vue3使用的国际化库为：i18n 安装方式： npm install vue-i18n@next 安装完成后在src文件夹下新建lang文件夹 在lang文件夹下新建需要语言转换的文件夹，这里以中文zh和英文en举例，在这两个文件夹下新建需要转换的语言 在zh的index.ts中写好我们需要转换的
阅读全文
摘要：环境变量就是会根据当前的代码环境变化的变量叫做环境变量。 我们在项目中的代码环境大致分为下面几种： 1、开发环境 2、测试环境 3、预发布环境 4、灰度环境 5、生产环境 我们在项目中通常需要区分线上环境和开发环境的后端地址，例如： 开发环境：http://dev.api/ 生产环境：https:/
阅读全文
摘要：vite是一个开箱即用的构建工具，不需要做任何额外的配置就可以使用vite来帮你处理构建工作，在默认情况下我们的esmodule去导入成依赖的时候，要么是绝对路径，要么是相对路径，例如下面这个例子 import { count } from './counter.js' 但是在vite中，支持根据依
阅读全文
摘要：现实问题：在浏览器支持ES模块之前，JavaScript并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对“打包”这个概念熟悉的原型：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器运行的文件，例如：webpack、Rollop等工具，他们极大的改善了前端开发者的开发体验。 包含
阅读全文
摘要：前提：浏览器只认识html、css、js 在实际项目中，一般都会具备如下功能： 1、TypeScript 2、Vue/React 3、less/scss 4、语法降级：babel 5、体积优化：UglifyJS ..... 这些文件浏览器是无法直接识别的，需要通过编译或转换成浏览器认识的样子 1、t
阅读全文
摘要：使用框架：element Plus + vue3 场景描述： 场景一： 表单的添加和修改功能，公用同一个弹框，点击修改后，点击添加表单显示的是上次修改的数据。 场景二： 点击修改，数据回显到表单，然后点击取消关闭弹框，在关闭的时候使用resetFields()清空数据，第二次点击修改的时候，回显的数
阅读全文
摘要：在写表单的时候，容易碰到这种嵌套表单的数据校验，并且这种表单是动态添加的，网上大部分的做法是表单套表单，实际上只需要一个表单就可以了。 为了方便观看，这里只列举了两条数据 多级表单嵌套校验 <el-form ref="ruleFormRef" :model="ruleForm.FormTable"
阅读全文
摘要：在开发中有些功能是通用的，而且逻辑大致相同，像这种东西可以封成一个组件，比较常用的就是函数封装，组件封装，组件封装是需要引入到页面使用的，所以通常它会有一些自己的方法，父子组件可以通过一些值来进行关联，这种方式也就是我们所说的组件传值，vue3+ts的组件传值其实就是组件传值加上了数据类型约束，并没
阅读全文
摘要：实现效果 导出后的效果： 步骤 第一步：安装依赖 npm install --save xlsx file-saver 第二步：给表格添加id，导出的时候需要用到 <!-- 导出按钮 --> <el-button type="primary" @click="exportExcel">导出</el-
阅读全文
摘要：使用 mitt // 全局引入 npm install mitt 或者 cnpm install mitt 在main文件中挂载 import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' /
阅读全文
摘要：NProgress.js 官网：https://ricostacruz.com/nprogress/ 安装方式： npm install nprogress 使用方法 在router 的index.js文件下引入 // 引入NProgress进度条 import NProgress from 'np
阅读全文
