1.4k 字 1 分钟

在 Vue 中使用 ECharts 进行打印时，可以通过 ECharts 提供的 getDataURL 方法获取图表的 Base64 图片 URL，然后使用浏览器的打印 API 进行打印。以下是一个简单的示例：

  1. 首先，确保你已经在 Vue 项目中安装并配置了 ECharts

  2. 在你的 Vue 组件中，创建一个方法来处理打印逻辑.

1.5k 字 1 分钟

在使用 ECharts 进行图表绘制时，可以利用 CSS Grid 布局来组织页面元素，确保图表能够在容器中正确显示。以下是一个简单的例子，展示了如何使用 CSS Grid 布局来搭建一个包含 ECharts 图表的页面。

1.1k 字 1 分钟

vue 中元素上加上 ref 属性取值，相当于取整个元素的，和 $("#id") 类似。但是要用此属性需要了解加载的时间，从官网上可以看到

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！ $refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

一般用法就是在 mounted 方法中加入 this.$nextTick

1.9k 字 2 分钟

el-config-provider 是 Element Plus 库中的一个组件，用于提供全局的配置。它是 Element Plus 在 2.0 版本中引入的新组件。 el-config-provider 组件的作用是允许你在应用程序中统一配置 Element Plus 的一些全局属性和样式，这些配置将被应用于所有 Element Plus 组件。通过使用 el-config-provider 组件，你可以在应用程序的根级别设置全局的 Element Plus 配置，而不需要在每个组件中单独配置。 以下是一个示例，演示如何使用 el-config-provider 来设置全局的...
2.2k 字 2 分钟

问题导入：在使用 el-form 过程中，尤其是表单验证这一块，官方提供的 reserFields 方法以及验证方面存在一些坑，在此记录一下，给大家提供可能的解决办法。

# resetFields 失败可能原因

1: el-form 中使用 v-model="ruleForm" 代替了 :model="ruleForm" ，正确的应为后者。

2: el-form-item 中的 prop 属性设置错误，官网给出了解释。即 prop=a , v-model=Form.a ，Js 中表单数据字段 Form:{ a:'', b: [] } ，需要一一对应，不能出现差错。

3: <el-button @click="resetForm('ruleForm')">重置</el-button> resetForm(formName) 的参数一定要和 el-form 中 ref ="formName" 一致。

4.1k 字 4 分钟

# 一、特点 完整的 ts 支持 三大核心：state（存储的值），getters（计算属性），actions 也可支持同步（改变值的方法，支持同步和异步） 与 vuex 相比，去除了 mutations（actions 也可支持同步）和 modules（只有 store 之间的互相引用） # 二、安装 yarn add pinia# 三、使用 # 1. 创建 pinia 实例 新建 store/index.ts（src 目录下新建 store 文件夹，并创建 index.ts 文件） import &#123; createPinia &#125; from...
7.2k 字 7 分钟

# 前言 vue-router4x 相对于 vue-router3x 除了新增了组合式 API 以外，还删除或变动了不少地方。单独列出来变动点太杂乱。这里系统性的把项目中经常能用到的知识点进行整理 # 一、安装 yarn add vue-router# 二、基本使用 # 1. 定义路由 新建 router/routes.ts const routes = [ &#123; path: "/login", component: () => import("@/pages/login.vue"), // 路由懒加载 &#125;,...
846 字 1 分钟

axios 设置 instance.defaults.responseType = 'blob’请求下载导出一个文件，请求成功时返回的是一个流形式的文件，正常导出文件。但是请求失败的时候后端返回的是 json ，不会处理错误信息，而是直接导出包含错误信息的文件。这样拿到 data 中的数据就只有 size type 类型

这种情况，通常在封装的 axios 中我们都是以后端返回的 code 值进行判断，因此就没有办法获取到后端返回的错误信息进行提示；

因此我们有俩个思路

  1. 要不给后端传 instance.defaults.responseType = 'json’格式 然后请求成功之后将 json 格式转化成 blob 在进行导出

  2. 要不就是给后端传 instance.defaults.responseType = 'blob’请求失败之后讲 blob 转化成 json 格式，

1.3k 字 1 分钟

持续更新中

# 1.input 从右往左输入

只需要对 input 框添加 text-align: right; 这个 CSS 属性

# 2. 数字校验 rules

export const REG = {
 NUMBER: /^[0-9]*$/,
 POSITIVE_NUMBER: /^[1-9]\d*$/,
 PHONE: /^1[3|4|5|7|8][0-9]{9}$/
}
diningAmount: [
  { pattern: REG.NUMBER, message: '请输入数字', trigger: ['blur','change']}
],
# 3. 手机号校验
contactWay: [
  { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
  { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号码" }
],
   4.9k 字  4 分钟
# 一、遍历树结构
# 1. 树结构介绍
JS 中树结构一般是类似于这样的结构：
let tree = [
  {
    id: '1',
    title: '节点1',
    children: [
      {
        id: '1-1',
        title: '节点1-1'
      },
      {
        id: '1-2',
        title: '节点1-2'
      }
    ]
  },
  {
    id: '2',
    title: '节点2',
    children: [
      {
        id: '2-1',
        title: '节点2-1'
      }
    ]
  }
]
为了更通用，可以用存储了树根节点的列表表示一个树形结构，每个节点的 children 属性（如果有）是一颗子树，如果没有 children 属性或者 children 长度为 0，则表示该节点为叶子节点。