1.1k 字 1 分钟

以下是一个简单的 ECharts 全屏 ping 图的示例： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script...
1.1k 字 1 分钟

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

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

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

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，则表示该节点为叶子节点。
   1.2k 字  1 分钟
# 在 base.css 中加入该样式
# 一、样式一【推荐】
box-shadow 方式
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  border: 1px solid rgb(0 0 0 / 0%);
  border-radius: 10px;
  box-shadow: 6px 0 0 #e3e3e3 inset;
}
::-webkit-scrollbar-thumb:hover {
  box-shadow: 6px 0 0 #e3e3e3 inset;
}
# 二、样式二
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: none;
  /* background: rgb(239, 239, 239); */
}
::-webkit-scrollbar-thumb {
  background: #999999; /* #bfbfbf */
  border-radius: 10px;
}
# 三、样式三
/* 全局滚动条样式 */
::-webkit-scrollbar {
    width: 5px;
    height: 14px;
}
 
 ::-webkit-scrollbar-thumb {
/* background-color: #01c8dc;
border-radius: 3px; */
    background-color: #b6b6b6;
}
/* 全局滚动条样式结束 */
   804 字  1 分钟
很多人都知道，使用 css 的::-webkit-scrollbar 可以定义浏览器滚动条的样式，但是这种方法在火狐浏览器下是无效的。
实际上火狐浏览器提供了两个独有的属性来定义滚动条样式，只有两个，总比没有强吧！