清哥的小屋

前端工程师养成计划：从入门到面试，一站式学习资源全导航

Thu, 18 Sep 2025 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2025-09-18。

前端工程师养成计划：从入门到面试，一站式学习资源全导航

写在前面：作为一名前端开发者，我深知基础知识（HTML、CSS、JavaScript）的重要性。框架可以速成，但底层基础决定了你的天花板。这份手册是我结合多年经验整理的学习路径和资源库，希望能为你的前端之旅保驾护航。星光不问赶路人，时光不负有心人，加油！

一、学前准备：环境搭建

Node.js 与版本管理 (nvm/n)
- Windows 系统 nvm & nrm 安装配置详解 - 详解如何在 Windows 上管理多个 Node.js 版本。
- Mac 系统 Node.js 管理工具 n 使用指南 - Mac 用户优雅管理 Node.js 版本的工具。
- Node.js 安装包镜像地址 - 从国内镜像站快速下载 Node.js。

二、基础入门：核心三件套

综合学习平台
- W3School - 经典的入门教程，适合快速查阅和练习。
- MDN Web Docs - 最权威的 Web 技术文档，前端开发者的圣经。
- 《前端开发规范》 - 了解良好的代码规范和团队协作习惯。
HTML
- HTML 元素语义化指南（阮一峰） - 写出更专业、更利于SEO的HTML。
- 精通 HTML 表格（阮一峰） - 深度讲解表格的各种用法。
CSS
- 布局
  - Flex 布局教程：语法篇（阮一峰） - 理解 Flex 布局的核心概念。
  - Flex 布局教程：实例篇（阮一峰） - 通过经典案例掌握 Flex 布局。
  - 一行代码实现五种经典 CSS 布局 - 体验现代 CSS 的强大。
  - Grid 布局教程 - 迈向二维布局自由。
  - 全面 CSS 布局学习指南 - 汇总所有布局技术。
  - 常用布局实战练习 - 通过模仿巩固布局技能。
    - 《登录页》实战
    - 《首页-小米商城》实战
- 特性与技巧
  - CSS 选择器及优先级详解 - 必须掌握的底层规则。
  - 不常见但实用的 CSS 属性 - 挖掘 CSS 的潜力。
  - 你不知道的 CSS 技巧 - 提升开发效率的奇技淫巧。
  - CSS Inspiration - 在这里找到写 CSS 的灵感！
  - 张鑫旭的个人博客 - 国内 CSS 大佬，有很多深度文章。
- 动画与效果库
  - Animate.css - 强大的即用型 CSS 动画库。
  - Hover.css - 专为悬停效果设计的动画库。
  - Animista - 在线预览、定制并生成 CSS 动画代码。
  - Animated Backgrounds - 炫酷的 CSS 背景动画集合。
  - SpinKit - 轻量级 CSS 加载动画（Loading Spinners）。
  - CSS Loaders - 又一个可爱的加载动画库。
  - guowc-基础动画库 - 个人开发的动画集合。
JavaScript
- JavaScript 标准参考教程（阮一峰） - 经典的 JS 教程。
- 现代 JavaScript 教程 - 非常系统且现代的教程，强烈推荐。
- ES6 入门教程（阮一峰） - 重点学习，现代 JS 开发的基石。
- JS 底层原理：76张脑图 - 可视化地理解 JS 核心知识。
- HTML DOM 事件 - 深入理解事件机制。
- DOM 事件大全 - 便捷的查询手册。
- 廖雪峰的 JS 教程 - 另一份优秀的中文教程。
- N个实用的 JS 代码片段 - 收集来用的“工具包”。
正则表达式
- Any-rule - 最常用的正则表达式大全，支持可视化生成。
- 常用正则大全 - 博客园的一份详细整理。
TypeScript
- TypeScript 入门教程 - 从 JavaScript 程序员的角度理解 TS。

三、框架与工程化

Vue.js
- 官方文档
  - Vue 2
  - Vue 3
- 源码学习
  - Vue.js 技术揭秘 - 非常好的 Vue 2/3 源码解析。
  - Vue.js 源码解析 - 逐行分析 Vue 2 源码。
  - learnVue (GitHub) - 源码分析文章集合。
- 生态与资源
  - Vue3 One Piece - Vue 3 生态资源集合站。
- 优秀开源项目（学习与参考）
  - vue-element-admin - 基于 Vue 2 + Element UI 的后台管理系统典范。
  - RuoYi-Vue - 基于 Vue 2/3 的权限管理系统，Java后端。
  - mall - 全套电商系统，学习项目架构。
  - Vben Admin - 现代 Vue 3 + Vite + Ant-Design-Vue 技术栈。
  - vue-pure-admin - 简洁高效的 Vue 3 + Vite + Element-Plus 解决方案。
Git 版本控制
- 《前端 Git Commit 规范》 - 养成提交好习惯。
- 《Git 分支管理规范》 - 了解团队协作流程。
- Git 使用总结 - 个人整理的常用命令。
- Learn Git Branching - 强烈推荐，图形化交互式学习 Git，趣味十足！
- Git Flow 工作流详解 - 一种经典的分支管理模型。
- Git Flow 工作流学习 - 另一份不错的教程。

四、学习平台与社区

日常学习与交流
- 掘金 - 国内高质量技术社区，干货多。
- SegmentFault 思否 - 技术问答社区。
- CSDN - 老牌IT社区，文章量巨大。
- 简书 - 轻度阅读。
- V2EX - 创意工作者社区，有大量程序员话题。
算法刷题
- 力扣 LeetCode - 准备面试，提升编程思维必刷。
资源导航
- 编程导航 - 帮你发现优质编程资源。

五、综合资源与进阶学习

资源聚合网站
- 前端导航 - 一站式前端资源导航站。
- Awesome Open Source - 按语言分类的开源项目大全。
- 前端开发者手册 - 前端知识体系梳理。
- 博客站点集合 - 关注一些优秀作者的博客。
优秀 GitHub 仓库
- awesome-fe-study-source - 出色的前端学习资料集合。
- front-end-Doc - 前端文档汇总。
- GitHubDaily - 分享 GitHub 上高质量项目。
- xy-sea/blog - 前端知识体系博客。
- mqyqingfeng/Blog - 深入系列、专题系列、ES6 系列文章。
开发书籍
- 免费编程书籍搜索 - 寻找免费的编程中文书籍。
进阶指南
- 初中级前端进阶指南
- 2025 前端+大前端+全栈知识体系（上）
- 2025 前端+大前端+全栈知识体系（下）
- 只写后台管理怎么提升自我 - 解决很多人的职业困惑。
- 线上崩了？如何快速定位问题 - 学习排查线上问题的方法。

六、开发工具

编辑器与IDE
- Visual Studio Code - 主流前端编辑器。
  - 22款必备 VSCode 插件推荐
  - 2023 最新最全 VSCode 插件推荐
文档编写
- Typora - 极简优雅的 Markdown 编辑器。
  - Typora 语法指南
  - Typora 入门教程
终端
- Cmder (Windows) - Windows 下高颜值终端。
- iTerm2 (macOS) - macOS 终端神器。
在线工具
- Can I use - 查询 CSS/JS 特性浏览器兼容性。
- TinyPNG - 智能图片压缩工具。
- 菜鸟工具 - 各种在线小工具集合。
- 前端助手 - 时间戳、正则调试等工具。
- CODELF - 变量命名神器，支持中文。
- Bitbug - 在线制作 favicon 图标。
- Scrollbar - 自定义浏览器滚动条样式。
- GTmetrix - 网站性能分析工具。
- 好用的开发工具集合 - 更多工具推荐。

七、 AI 提效

如何使用 AI
- OpenAI：GPT 最佳实践（解读版） - 学习如何向 AI 高效提问。
AI 工具站
- AICHATOS - 免费 ChatGPT 镜像站。
- YesChat - 每天限量使用 GPT-4、Claude 3。
- Phind - 面向开发者的智能搜索引擎。
- AI 工具集导航 - 全网 AI 工具汇总。
- AI 汇总网站 - 另一个 AI 导航站。
VSCode AI 插件
- 通义灵码 (阿里) - 功能全面的国产插件。
- CodeGeeX - 清华团队的AI编程助手。
- Codeium - 免费且强大的替代品。
- Tabnine - 老牌 AI 补全工具。
- Baidu Comate - 百度推出的编程助手。
- ChatGPT 中文版 - VSCode 内直接调用 ChatGPT。
AI 编辑器
- Cursor - 基于 AI 的代码编辑器，革命性体验。
- CodeBuddy (腾讯)
- Qoder (阿里)
AI 教程
- DeepSeek 保姆级教程
- DeepSeek 使用手册

八、面试准备

面试自我介绍 5 句话公式 - 掌握开场技巧。
前端面试宝典 - 按知识点分类的面试题。
前端面试派 - 双越老师带队创作，系统全面。
高频面试题汇总

学习路径建议

对于基础较弱的同学：
HTML/CSS -> 仿写静态页面 -> JavaScript -> 实现页面交互 -> Vue2 -> Vue2 + Element-UI + Axios 实战 -> 独立开发一个功能全面的后台管理页面。
对于基础不错的同学：
直接从 仿写页面 开始，遇到问题再针对性补足知识点。JavaScript 是重中之重，需要持续深入学习。框架是延伸，底层是根本。
通用建议：
1. 面向搜索引擎和 AI 编程：90% 的问题都能找到答案。
2. 虚心请教：工作中遇到难题，及时与同事讨论。
3. 总结记录：将解决的问题和理解的知识记录下来，内化成自己的东西。
4. 拓展全栈技能：学一门后端语言（如 Node.js/Java/Go）是巨大的加分项。

Vue 开发中常用的工具函数强烈建议收藏！

Thu, 20 Mar 2025 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2025-03-20。

所有的工具函数使用背景都是 vue 框架（vue2 vue3）＋ ts 项目中使用部分需要自行调整

1. 防抖函数

使用场景：按钮点击（请求接口）输入框输入（模糊搜索）计算鼠标的位置
之前有写过一篇关于 vue 中使用节流防抖

/**
 * 防抖函数
 * @param fn 回调函数
 * @param timeout 延迟时间
 * @param immediate 是否立即执行
 */
export const debounce = <T extends FunctionArgs>(
  fn: T,
  timeout: MaybeRef<number> = 200,
  immediate = false
) => {
  let timmer: TimeoutHandle;
  const wait = unref(timeout);
  return () => {
    timmer && clearTimeout(timmer);
    if (immediate) {
      if (!timmer) {
        fn();
      }
      timmer = setTimeout(() => (timmer = null), wait);
    } else {
      timmer = setTimeout(fn, wait);
    }
  };
};

2. 节流函数

/**
 *
 * @param fn 回调函数
 * @param timeout 延迟时间
 */
export const throttle = (fn, timeout = 200) => {
  let lastExecutedTime = 0;
  return function (...args) {
    const currentTime = Date.now();
    if (currentTime - lastExecutedTime > timeout) {
      fn.apply(this, args);
      lastExecutedTime = currentTime;
    }
  };
};

3. 检查当前设备类型

/**
 * 检测当前设备是否为移动设备
 * 
 * 通过检查用户代理(User Agent)字符串判断当前设备类型
 * 
 * @returns {boolean} 如果是移动设备返回true，桌面设备返回false
 * 
 * @example
 * if (deviceDetection()) {
 *   // 移动设备逻辑
 * } else {
 *   // 桌面设备逻辑
 * }
 */
export const deviceDetection = (): boolean => {
  const userAgent: string = navigator.userAgent.toLowerCase();

  // 定义移动设备的特征标识
  const mobileIdentifiers = [
    /iphone os/i,     // iOS设备
    /midp/i,          // 早期Java手机平台
    /rv:1.2.3.4/i,    // 特定UC浏览器版本
    /ucweb/i,         // UC浏览器
    /android/i,       // 安卓设备
    /windows ce/i,    // Windows CE设备
    /windows mobile/i // Windows Mobile设备
  ];

  // 检查是否匹配任一移动设备标识
  return mobileIdentifiers.some(pattern => pattern.test(userAgent));
};

## 3. 获取当前浏览器信息
```js

/**
 * 获取当前浏览器信息，包括浏览器类型和版本号
 * 
 * @returns {BrowserInter} 包含浏览器类型和版本的对象
 * @property {string} browser - 浏览器类型 (msie|firefox|chrome|opera|safari)
 * @property {string} version - 浏览器版本号
 * 
 * @example
 * const { browser, version } = getBrowserInfo();
 * console.log(`当前浏览器: ${browser} ${version}`);
 */
export const getBrowserInfo = (): BrowserInter => {
  const userAgent = navigator.userAgent.toLowerCase();
  const regExp = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
  const match = userAgent.match(regExp);

  if (!match || match.length < 3) {
    return {
      browser: 'unknown',
      version: '0.0'
    };
  }

  // 特殊处理Safari浏览器（Safari使用'version'而不是'safari'标识）
  const browser = match[1] === 'version' ? 'safari' : match[1];

  return {
    browser,
    version: match[2]
  };
};

4. js 操作 Class 类名相关

/**
 * 检查DOM元素是否包含指定的类名
 * 
 * @param {RefType<any>} ele - 要检查的DOM元素
 * @param {string} cls - 要检查的类名
 * @returns {boolean} 如果元素包含指定类名则返回true，否则返回false
 * 
 * @example
 * if (hasClass(element, 'active')) {
 *   // 元素包含'active'类的处理逻辑
 * }
 */
export const hasClass = (ele: RefType<any>, cls: string): boolean => {
  if (!ele || !ele.className || typeof ele.className !== 'string') return false;
  return new RegExp("(\\s|^)" + cls + "(\\s|$)").test(ele.className);
};

/**
 * 为DOM元素添加一个或两个类名
 * 
 * @param {RefType<any>} ele - 要添加类名的DOM元素
 * @param {string} cls - 要添加的主要类名
 * @param {string} [extracls] - 可选的额外类名
 * @returns {void}
 * 
 * @example
 * addClass(element, 'active');
 * addClass(element, 'primary', 'large');
 */
export const addClass = (
  ele: RefType<any>,
  cls: string,
  extracls?: string
): void => {
  if (!ele || !cls) return;

  if (!hasClass(ele, cls)) {
    ele.className = ele.className ? `${ele.className} ${cls}` : cls;
  }

  if (extracls && !hasClass(ele, extracls)) {
    ele.className = `${ele.className} ${extracls}`;
  }
};

/**
 * 从DOM元素移除一个或两个类名
 * 
 * @param {RefType<any>} ele - 要移除类名的DOM元素
 * @param {string} cls - 要移除的主要类名
 * @param {string} [extracls] - 可选的额外要移除的类名
 * @returns {void}
 * 
 * @example
 * removeClass(element, 'active');
 * removeClass(element, 'primary', 'large');
 */
export const removeClass = (
  ele: RefType<any>,
  cls: string,
  extracls?: string
): void => {
  if (!ele || !ele.className || !cls) return;

  if (hasClass(ele, cls)) {
    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
    ele.className = ele.className.replace(reg, " ").trim();
  }

  if (extracls && hasClass(ele, extracls)) {
    const regs = new RegExp("(\\s|^)" + extracls + "(\\s|$)");
    ele.className = ele.className.replace(regs, " ").trim();
  }
};

/**
 * 根据条件切换DOM元素的类名
 * 
 * @param {boolean} flag - 决定是否添加类名的标志，true添加，false移除
 * @param {string} clsName - 要切换的类名
 * @param {RefType<any>} [target] - 目标DOM元素，默认为document.body
 * @returns {void}
 * 
 * @example
 * // 根据darkMode变量切换body上的dark-theme类
 * toggleClass(darkMode, 'dark-theme');
 * // 切换特定元素的visible类
 * toggleClass(isVisible, 'visible', menuElement);
 */
export const toggleClass = (
  flag: boolean,
  clsName: string,
  target?: RefType<any>
): void => {
  if (!clsName) return;

  const targetEl = target || document.body;
  if (!targetEl) return;

  // 首先移除类名
  let { className } = targetEl;
  const reg = new RegExp("(\\s|^)" + clsName + "(\\s|$)");
  className = className.replace(reg, " ").trim();

  // 根据flag决定是否重新添加
  targetEl.className = flag ? `${className} ${clsName}` : className;
};

5. requestAnimationFrame 实现的节流函数

/**
 * 创建一个使用requestAnimationFrame实现的节流函数
 * 
 * 该函数确保回调在每个动画帧内最多执行一次，适用于滚动、调整大小等高频事件处理
 * 
 * @template T - 任意函数类型
 * @param {T} fn - 需要节流的原始函数
 * @returns {T} 节流处理后的函数
 * 
 * @example
 * // 创建一个节流的滚动处理函数
 * const throttledScroll = useRafThrottle(() => {
 *   console.log(window.scrollY);
 * });
 * 
 * // 添加滚动事件监听
 * window.addEventListener('scroll', throttledScroll);
 */
import type { FunctionArgs } from "@vueuse/core";

export function useRafThrottle<T extends FunctionArgs>(fn: T): T {
  let locked = false;

  // @ts-ignore
  return function (...args) {
    if (locked) return;

    locked = true;
    window.requestAnimationFrame(() => {
      fn.apply(this, args);
      locked = false;
    });
  };
}

6. 监听元素变化（大小）

/**
 * ResizeObserver的回调处理函数
 * 处理元素大小变化事件，并触发所有注册的监听函数
 * 
 * @param {ResizeObserverEntry[]} entries - ResizeObserver提供的条目数组
 * @private
 */
const resizeHandler = function (entries: ResizeObserverEntry[]): void {
  for (const entry of entries) {
    const listeners = entry.target.__resizeListeners__ || [];
    if (listeners.length) {
      listeners.forEach(fn => {
        fn();
      });
    }
  }
};

7. 为 DOM 元素添加/移除大小变化监听器

/**
 * 为DOM元素添加大小变化监听器
 * 
 * 使用ResizeObserver监听元素大小变化，当元素大小变化时触发回调函数
 * 
 * @param {HTMLElement} element - 要监听大小变化的DOM元素
 * @param {Function} fn - 元素大小变化时调用的回调函数
 * @returns {void}
 * 
 * @example
 * // 监听容器大小变化并更新图表
 * addResizeListener(chartContainer, () => {
 *   chart.resize();
 * });
 */
export const addResizeListener = function (element: any, fn: () => void): void {
  if (isServer || !element) return;

  // 初始化元素上的监听器数组
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];

    // 创建ResizeObserver实例并开始观察元素
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);
  }

  // 避免重复添加相同的监听器
  if (element.__resizeListeners__.indexOf(fn) === -1) {
    element.__resizeListeners__.push(fn);
  }
};

/**
 * 移除DOM元素上的大小变化监听器
 * 
 * 如果移除后元素上没有其他监听器，则停止对该元素的观察
 * 
 * @param {HTMLElement} element - 要移除监听器的DOM元素
 * @param {Function} fn - 要移除的特定监听器函数
 * @returns {void}
 * 
 * @example
 * // 移除之前添加的监听器
 * removeResizeListener(chartContainer, updateChart);
 */
export const removeResizeListener = function (element: any, fn: () => void): void {
  if (isServer || !element || !element.__resizeListeners__) return;

  // 查找并移除特定监听器
  const index = element.__resizeListeners__.indexOf(fn);
  if (index !== -1) {
    element.__resizeListeners__.splice(index, 1);
  }

  // 如果没有剩余监听器，停止观察并清理
  if (!element.__resizeListeners__.length && element.__ro__) {
    element.__ro__.disconnect();
    element.__ro__ = null;
  }
};

8. 本地存储 sessionStorage localStorage 使用封装

/**
 * Web存储代理接口
 * 定义了存储操作的标准方法集
 */
interface ProxyStorage {
  /**
   * 获取存储项
   * @param {string} key - 存储项的键
   * @returns {any} 存储的值
   */
  getItem(key: string): any;

  /**
   * 设置存储项
   * @param {string} key - 存储项的键
   * @param {string} value - 要存储的值
   */
  setItem(key: string, value: string): void;

  /**
   * 移除存储项
   * @param {string} key - 要移除的存储项的键
   */
  removeItem(key: string): void;

  /**
   * 清除所有存储项
   */
  clear(): void;
}

/**
 * sessionStorage操作代理类
 * 提供对sessionStorage的操作封装，支持存取JSON对象
 */
class SessionStorageProxy implements ProxyStorage {
  /**
   * 被代理的存储对象
   * @protected
   */
  protected storage: ProxyStorage;

  /**
   * 构造函数
   * @param {ProxyStorage} storageModel - 被代理的存储对象
   */
  constructor(storageModel: ProxyStorage) {
    this.storage = storageModel;
  }

  /**
   * 存储数据，自动将对象转换为JSON字符串
   * @param {string} key - 存储项的键
   * @param {any} value - 要存储的值，可以是任意类型
   */
  public setItem(key: string, value: any): void {
    if (key === undefined || key === null || key === '') {
      throw new Error('Storage key cannot be empty');
    }

    try {
      const valueStr = typeof value === 'object'
        ? JSON.stringify(value)
        : String(value);
      this.storage.setItem(key, valueStr);
    } catch (error) {
      console.error('Failed to store item:', error);
    }
  }

  /**
   * 获取数据，自动将JSON字符串转换回对象
   * @param {string} key - 存储项的键
   * @returns {any} 解析后的存储值，如果项不存在或解析失败则返回null
   */
  public getItem(key: string): any {
    if (key === undefined || key === null || key === '') {
      return null;
    }

    try {
      const value = this.storage.getItem(key);
      if (value === null || value === undefined) {
        return null;
      }
      return JSON.parse(value);
    } catch (error) {
      console.warn(`Error parsing stored item ${key}:`, error);
      return this.storage.getItem(key);
    }
  }

  /**
   * 移除指定的存储项
   * @param {string} key - 要移除的存储项的键
   */
  public removeItem(key: string): void {
    if (key) {
      this.storage.removeItem(key);
    }
  }

  /**
   * 清除所有存储项
   */
  public clear(): void {
    this.storage.clear();
  }
}

/**
 * localStorage操作代理类
 * 提供对localStorage的操作封装，继承自SessionStorageProxy
 */
class LocalStorageProxy extends SessionStorageProxy implements ProxyStorage {
  /**
   * 构造函数
   * @param {ProxyStorage} localStorage - 被代理的localStorage对象
   */
  constructor(localStorage: ProxyStorage) {
    super(localStorage);
  }
}

/**
 * sessionStorage实例
 * 用于操作浏览器的会话存储
 * 页面会话结束时数据会被清除
 * 
 * @example
 * // 存储数据
 * storageSession.setItem('user', { name: 'John', age: 30 });
 * 
 * // 获取数据
 * const user = storageSession.getItem('user');
 * 
 * // 删除数据
 * storageSession.removeItem('user');
 */
export const storageSession = new SessionStorageProxy(sessionStorage);

/**
 * localStorage实例
 * 用于操作浏览器的本地存储
 * 数据永久保存，除非被显式清除
 * 
 * @example
 * // 存储数据
 * storageLocal.setItem('theme', 'dark');
 * 
 * // 获取数据
 * const theme = storageLocal.getItem('theme');
 * 
 * // 删除数据
 * storageLocal.removeItem('theme');
 */
export const storageLocal = new LocalStorageProxy(localStorage);

9. js-cookie 使用封装

import Cookies from "js-cookie";

import useUserStoreHook from "/@/store/modules/user";

/**
 * 认证令牌的Cookie键名
 * 用于存储和获取认证令牌
 */
const TokenKey = "Admin-Token";

/**
 * 获取当前用户的认证令牌
 * 
 * 从Cookie中读取存储的令牌
 * 
 * @returns {string | undefined} 用户认证令牌，如果未登录则返回undefined
 * 
 * @example
 * const token = getToken();
 * if (token) {
 *   // 用户已登录
 * } else {
 *   // 用户未登录，重定向到登录页
 * }
 */
export function getToken(): string | undefined {
  return Cookies.get(TokenKey);
}

/**
 * 设置用户认证令牌
 * 
 * 将认证令牌存储到Cookie中，同时更新Vuex存储的状态
 * 
 * @param {object} data - 包含令牌信息的对象
 * @param {string} data.token - 用户认证令牌
 * @returns {void}
 * 
 * @example
 * // 登录成功后设置令牌
 * setToken({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' });
 */
export function setToken(data: { token: string }): void {
  if (!data || typeof data !== 'object') {
    console.error('Invalid token data provided');
    return;
  }

  const { token: accessToken } = data;

  if (!accessToken) {
    console.error('No access token provided');
    return;
  }

  // store 里面保存 token 的方法 更新Vuex存储的令牌状态
  useUserStoreHook().SET_TOKEN(accessToken);

  // 存储令牌到Cookie
  // 注意：这里没有设置过期时间，使用默认的会话Cookie
  Cookies.set(TokenKey, accessToken);
}

/**
 * 移除用户认证令牌
 * 
 * 从Cookie中删除存储的令牌，通常在用户登出时调用
 * 
 * @returns {void}
 * 
 * @example
 * // 用户登出
 * removeToken();
 * router.push('/login');
 */
export function removeToken(): void {
  Cookies.remove(TokenKey);
}

10. 获取当前环境变量

/**
 * 环境变量工具模块
 * 用于访问和加载Vite应用的环境变量
 */

/**
 * 加载应用的环境变量
 * 
 * 从Vite的import.meta.env中获取当前应用的所有环境变量。
 * 环境变量通常在.env文件中定义，并在构建时由Vite处理。
 * 
 * @returns {ViteEnv} 包含所有环境变量的对象
 * 
 * @example
 * // 获取所有环境变量
 * const env = loadEnv();
 * console.log('当前模式:', env.MODE);
 * console.log('API基础URL:', env.VITE_API_BASE_URL);
 * 
 * // 也可以直接解构需要的环境变量
 * const { VITE_APP_TITLE, VITE_API_BASE_URL } = loadEnv();
 */
export const loadEnv = (): ViteEnv => {
  try {
    // 确保我们在浏览器环境中
    if (typeof import.meta.env === 'undefined') {
      console.warn('环境变量不可用，可能不在Vite环境中运行');
      return {} as ViteEnv;
    }

    return import.meta.env;
  } catch (error) {
    console.error('加载环境变量时发生错误:', error);
    return {} as ViteEnv;
  }
};

第一篇先更新 10 个后续继续更新第二篇第三篇…敬请期待~ 如果感觉有所帮助欢迎点赞收藏推荐如有不恰当的地方或者更好的建议也欢迎留言交流~~ 感谢阅读再见~

【前端面试】面试官：纯前端如何实现录屏并保存视频到本地？

Wed, 08 Nov 2023 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2023-11-08。

作为一个资深的切图仔，我们难免会需要用到把自己写的页面的一些功能通过视频的方式分享给别人。还有一个场景，就是当我们面试的时候，我们需要把我们的屏幕分享给面试官看，那么这些都是怎么实现的呢？
那么接下来我们就通过这篇文章来学习一下如何实现一个浏览器录屏的功能。

navigator.mediaDevices

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

const media = navigator.mediaDevices;

通过原型链可以查找到一些方法，如下图所示：

其中 getDisplayMedia 方法来获取用户的屏幕分享或屏幕捕获流，通常用于制作屏幕录像或视频会议等应用。

navigator.mediaDevices.getDisplayMedia({ video: true, });

在这段代码中，请求获取包含视频流的媒体许可，并将其存储在名为 stream 的变量中，以便后续使用。这个流可以用于在网页上显示屏幕共享或进行其他媒体处理操作。

又因为该方法是异步的，我们要编写如下代码：

  <body>
    <button>共享屏幕</button>
    <script>
      const button = document.querySelector('button')
      button.addEventListener('click', async () => {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true
        })
      })
    </script>
  </body>

通过点击 button 按钮后会如下图所示效果：

这个时候 stream 流我们是拿到了。

MediaRecorder

MediaRecorder 是一个 Web API，用于在浏览器中进行媒体录制，主要用于录制音频和视频。它允许你从不同的来源，例如麦克风、摄像头、屏幕共享或其他媒体元素，捕获音频和视频数据，并将其保存为文件或进行实时流媒体传输。

通过调用 MediaRecorder.isTypeSupported() 方法会判断其 MIME 格式能否被客户端录制。它支持的类型主要有以下几种方式：

const types = [
  "video/webm",
  "audio/webm",
  "video/webm;codecs=vp8",
  "video/webm;codecs=daala",
  "video/webm;codecs=h264",
  "audio/webm;codecs=opus",
  "video/mpeg"
];

通过这种方式来查看当前浏览器是否支持该类型,如下代码所示:

const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264")
  ? "video/webm;codecs=h264"
  : "video/webm";

结果如下图所示:

const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

在这段代码里面,执行 new 关键字实例化 MediaRecorder 对象。该对象的结构如下图所示：

我们可以通过监听它的事件来进行不同的操作,如下代码所示：

const chunks = [];
 mediaRecorder.addEventListener("dataavailable", function (e) {   chunks.push(e.data); });
  mediaRecorder.addEventListener("stop", () => {   const blob = new Blob(chunks, { type: chunks[0].type });   
 const url = URL.createObjectURL(blob);   
 const a = document.createElement("a");   
 a.href = url;   
 a.download = "video.webm";   
 a.click(); });

接下来我们来看看段代码的详细步骤:

dataavailable 事件的监听器。当 MediaRecorder 有可用的音频/视频数据块时，它会触发此事件。在这里，每当数据可用时，将数据块（e.data）添加到 chunks 数组中。这是为了在录制完成后将这些数据块合并成一个完整的媒体文件。
stop 事件的监听器。当录制停止时，MediaRecorder 会触发此事件。
const blob = new Blob(chunks, { type: chunks[0].type });：使用 Blob 构造函数将 chunks 数组中的数据块合并成一个二进制对象（Blob 对象）。chunks[0].type 用于指定 Blob 的媒体类型，通常是 WebM。
const url = URL.createObjectURL(blob);：使用 URL.createObjectURL 方法将 Blob 对象转换为一个临时 URL。这个 URL 可以用于创建下载链接。通过这个 url 传递给新创建的 a 元素用于下载功能。
a.click() 通过模拟点击超链接来触发下载操作。用户将看到一个下载对话框，允许他们保存录制的媒体文件

这样就实现了一个屏幕录制功能了，并且通过该方法实现了一个音视频下载的功能。

完整代码

该功能的完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>共享屏幕</button>
    <script>
      const button = document.querySelector('button');
      button.addEventListener('click', async () => {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
        });
        const mime = MediaRecorder.isTypeSupported('video/webm;codecs=h264')
          ? 'video/webm;codecs=h264'
          : 'video/webm';
        const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });
        const chunks = [];
        mediaRecorder.addEventListener('dataavailable', function (e) {
          chunks.push(e.data);
        });
        mediaRecorder.addEventListener('stop', () => {
          const blob = new Blob(chunks, { type: chunks[0].type });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'video.webm';
          a.click();
        });
        mediaRecorder.start();
      });
    </script>
  </body>
</html>

完整效果如下图所示:

你也可以直接在其他任何一个页面，将 js 代码修改一下,然后直接复制粘贴到控制台上，并点击页面，如下所示：

diff

-const button = document.querySelector("button");
 -button.addEventListener("click", async () => {
  +const body = document.body; 
  +body.addEventListener("click", async () => {

紧接着将代码复制粘贴到浏览器控制台上面，并点击页面的空白处：

通过这种方式就实现了一种屏幕录制或者屏幕分享的功能了。

本文转自 https://juejin.cn/post/7280057907055869992

vue2之 vue-i18n 插件报错-Uncaught TypeError: Cannot read properties of undefined (reading ‘0‘)

Mon, 18 Sep 2023 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2023-09-18。

1. 前言

在对 showdoc 开源项目进行二次开发的时候遇到了这个报错，在本地没有问题，发布到开发环境之后就报这个错误，一开始一头雾水无从下手，经过一番筛查（百度）之后发现是和项目里面的插件 vue-i8n 有关系，然后又经过很长时间的排查才发现是 vue-i18n 的版本问题… 排查的过程中简直太艰难了…

2. 问题

3. 解决过程

在报错指向的第一个报错文件中找到了 _watchers[0].constructor undefined 造成的问题说明这个插件在初始化的时候没有_watcher 这个方法，导致报错之后导致页面阻塞加载白屏的状态。
无意中看到了一篇文章产生了启发，感觉会不会是版本的问题

升级插件版本（原来是 5.0.3 node v14.19.0）
- npm i vue-i18n@8.28.2 -S 也可以试试其他高一点的版本

4. 代码

// lang.js
import Vue from 'vue' // 引入Vue

google 浏览器出现 ERR_PROXY_CONNECTION_FAILED 无法访问网络

Mon, 26 Dec 2022 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2022-12-26。

1. 问题

早上来公司突然发现谷歌浏览器访问所有的东西都出现 ERR_PROXY_CONNECTION_FAILED 网络不可用的提示这一串的单词的意思是代理连接失败真的是一脸懵逼经过一番百度后发现是网络代理作的妖…

2. 解决方法

其实很简单将 wifi 和网络里面所有的代理全部取消即可

全部取消勾选还不明白为什么代理被自动勾选了… 有明白的大佬可以解释下（wifi 和网络设置同理）

可以正常访问了

如有问题请留言交流，有更好的方法希望不吝赐教，如有错误还请指出多多包涵，如果对你有所帮助希望可以点个赞 Thanks♪(･ω･)ﾉ

获取当天，本周，本月，本季度，本半年，本年时间

Wed, 16 Nov 2022 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2022-11-16。

1. 使用场景

elemet-plus 组件库，日期选择器快捷使用选择本月，本季度时间…

2. 方法

const useDate = () => {
  const now = new Date() // 当前日期
  const nowYear = now.getFullYear() //当前年
  const nowMonth = now.getMonth() //当前月
  const nowDay = now.getDate() // 当前日
  const nowDayOfWeek = now.getDay() // 周几
  const jd = Math.ceil((nowMonth + 1) / 3) // 当前季度

  // 当天
  function getCurDay() {
    return [now, now]
  }

  // 本周
  function getCurWeek() {
    const startDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
    const endDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek))
    return [startDate, endDate]
  }
  // 本月
  function getCurMonth() {
    const startDate = new Date(nowYear, nowMonth, 1)
    const endDate = new Date(nowYear, nowMonth + 1, 0)
    return [startDate, endDate]
  }
  
  // 本季度
  function getCurQuarter() {
    const startDate = new Date(nowYear, (jd - 1) * 3, 1)
    const endDate = new Date(nowYear, jd * 3, 0)
    return [startDate, endDate]
  }
  
  // 本半年
  function getCurHalfYear() {
    const startD = new Date(nowYear, nowMonth - 4, 1)
    const startDate = new Date(nowYear, 0, 1)
    const endD = new Date(nowYear, nowMonth + 1, 0)
    const year = startD.getFullYear()
    if (year === nowYear) {
      return [startD, endD]
    } else {
      return [startDate, endD]
    }
  }
  
  // 本年
  function getCurYear() {
    const startDate = new Date(nowYear, 0, 1)
    const endDate = new Date(nowYear, 11, 0)
    return [startDate, endDate]
  }

  return {
    getCurDay,
    getCurWeek,
    getCurMonth,
    getCurQuarter,
    getCurHalfYear,
    getCurYear,
  }
}

const {
  getCurDay,
  getCurWeek,
  getCurMonth,
  getCurQuarter,
  getCurHalfYear,
  getCurYear,
} = useDate()

export const shortcuts = [
  {
    text: '当天',
    value: getCurDay(),
  },
  {
    text: '本周',
    value: getCurWeek(),
  },
  {
    text: '本月',
    value: getCurMonth(),
  },
  {
    text: '本季度',
    value: getCurQuarter(),
  },
  {
    text: '半年',
    value: getCurHalfYear(),
  },
  {
    text: '当年',
    value: getCurYear(),
  },
]

如有疑问欢迎留言交流，有更好的方法希望不吝赐教~

el-form之表单校验自动定位到报错位置

Sat, 09 Jul 2022 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2022-07-09。

1. 背景

表单校验大多数的表单都会用到，一般情况下只是提示当前哪些项校验不通过，但是如果表单比较需要用户自己去找是哪项校验不通过，这样的用户体验不太好，如果能自动定位到当前校验不通过的表单项体验会更好一些（这里是以elementui 的 el-from 组件为例子）

2. 实现思路

目前有两个实现方法：

方法一：
- 表单校验不通过的时候，会在未校验成功的表单 el-form-item 标签上加一个类名 is-error，可以从这个类名下手，获取当前校验不通过的所有的类名，然后通过 scrollIntoView 方法进行自动滑动到当前报错的表单项位置

方法二：
- 利用el-form提供的 validate 方法的第二个参数，获取当前校验不通过的rule 对象，获取到报错的 prop 后，在每个需要加表单校验的项上加上 ref，ref 的绑定值和 prop 保持一致这样方便直接定位到哪个prop，然后和第一个方法一样利用 scrollIntoView 方法结合$ref 获取到 $el 实现自动定位到校验不通过的表单项

3. 实现代码

方法一实现代码：

 	// 表单校验
    verifyForm() {
      this.$refs.basicInfoRule.validate(valid => {
        if (valid) {
          // 校验通过执行的逻辑
        } else {
          // 校验不通过自动定位到不通过的表单项
          this.moveToErr()
        }
      })
    },

    // 自动定位到表单报错项
    moveToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        if (isError.length) {
          isError[0].scrollIntoView({
            block: 'center',
            behavior: 'smooth'
          })
	// 这个当滑动到报错项之后自动获取输入框的焦点，方便用户直接进行输入，延迟 800ms 是因为需要都能到定位成功后在进行获取焦点体验更好一些
          setTimeout(() => {
            if (isError[0].previousElementSibling.querySelector('input')) {
              isError[0].previousElementSibling.querySelector('input').focus()
            }
          }, 800)
        }
      })
    }

方法二实现代码：
模板示例代码

   <el-form-item label="姓名：" prop="name" ref="name">
        <el-input
          v-model.number="form."
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>

 verifyForm() {
      this.$refs.ruleForm.validate((valid, object) => {
        if (valid) {
          //校验通过执行逻辑
        } else {
          let errorArr = [];
          for (let key in object) {
            object[key].forEach((item) => {
              errorArr.push(item.message);
            });
            let dom = this.$refs[Object.keys(object)[0]];
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
              dom = dom[0];
              break; //结束语句并跳出语句，进行下个语句执行
            }
            // 定位到报错项
            dom.$el.scrollIntoView({
              block: 'center',
              behavior: 'smooth',
            });
          }
          // 页面提示未通过校验字段项，
          this.$message.error(errorArr[0]);
        }
      });
    },

5. 拓展（踩坑…）

由于页面比较复杂分了好几个子组件，而且子组件中都有需要校验的表单项，在父组件保存表单前，需要调用各个子组件的表单校验方法，发现el-form 的 validate 方法不能返会校验失败还是校验成功

错误代码示范:

// 子组件代码
   verifyForm() {
      this.$refs.basicInfoRule.validate(valid => {
        if (valid) {
          // 校验通过
          return true
        } else {
          // 校验不通过
          return false
        }
      })
    },
    
    // 父组件代码
    // 校验子组件表单（通过子组件绑定的ref来调用子组件的校验方法）
    async handleVerify() {
      if (
        !(await this.$refs.basicInfo?.verifyForm()) ||
        !(await this.$refs.priceSetting?.verifyForm())
      ) {
        this.$message.warning('请完善表单必填项')
        return false
      }
      return true
    },
    // 保存
      async saveMainDetail() {
      try {
        if (!(await this.handleVerify())) return
        } catch (e) {}

上述代码在父组件里面不能获取到组件的校验状态，子组件换一个写法就行了

正确代码示范：
使用 Promise 来返回表单的是否校验成功状态能在父组件成功拿到了

// 子组件代码
 verifyForm() {
      return new Promise((resolve, reject) => {
        this.$refs.basicInfoRule.validate(valid => {
          if (valid) {
            console.log(valid, '校验通过')
            resolve(true)
          } else {
            console.log(valid, '校验不通过')
            reject(new Error())
          }
        })
      })
    }

6. 结语

实现功能的思路有很多，这里我列举出来的两种，看实际的功能和需求找到适合自己的方法，有错误的地方还望指出，有疑问欢迎留言交流，如果你有更好的方法也希望不吝赐教，如果能帮到你我很荣幸~

js 合并两个二维数组成为数组对象

Sun, 23 Jan 2022 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2022-01-23。

使用场景

在使用element-ui的级联选择器展示省市区（多选），后端需要传递数组对象格式里面包含每个选中的省市区的name和code数据.但是只能直接取到选中的code，可以使用ref来拿到级联选择器的getCheckedNodes方法来获取当前选中的省市区name；
最终将两个二维数组合成一个数组对象的格式传给后端，数据结构以及代码如下：

模板代码

 <el-cascader
   ref="serveArea"
    v-model="form.installServiceArea"
    :options="regionData"
    :props="areaProps"
    clearable
    placeholder="请选择服务区域"
  >

js 代码

handleParams() {
	...
	const { installServiceArea } = this.mainDetail;
	 // 服务区域
      if (installServiceArea.length) {
      // 服务区域的 name
      	let serveAreaName = this.$refs.baseInfo.$refs.serveArea.getCheckedNodes();
        console.log(serveAreaName);
        // 将服务区域处理成数组对象的数据格式
        let serveAreaName = serveAreaName.map((i) => {
          return {
            provinceName: i.pathLabels[0],
            cityName: i.pathLabels[1],
            regionName: i.pathLabels[2],
          };
        });

        console.log(serveAreaName, 'serveAreaName');
		// 将服务区域的name和code合并成一个数组对象
        let serveAreaParams = serveAreaName.map((i, ind) => {
          return {
            ...i,
            provinceCode: installServiceArea[ind][0],
            cityCode: installServiceArea[ind][1],
            regionCode: installServiceArea[ind][2],
          };
        });

        console.log(serveAreaParams, 'serveAreaParams');
      }
}

打印结果如下图：

不积跬步，无以至千里;不积小流，无以成江海。
有问题可以留言一起交流讨论~

css 完美解决图片变形问题

Thu, 22 Apr 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-04-22。

开发 h5 的时候测试给提了一个 bug 图片变形，开发的时候还真没注意，确实变形了开起来怪怪的，然后就顺利找到了解决办法，废话不多说先呈上解决方法：

<div class="imgWrap">
    <img src="@/assets/images/copter.jpg" alt="">
</div>

 .imgWrap {
    width: 300px;
    height: 300px;
    border: 2px solid skyblue;
  }

  img {
    widows: 100%;
    height: 100%;
    object-fit: cover;
  }

搞定就这么简单！

效果图：

注意一点：图片一定要设置宽高，否则设置object-fit无效！
解释：object-position相当于background-position，它的默认值是50% 50%，也就是居中，所以一般不写，加了object-fit，默认就居中了。而object-fit，相当于background-size，即图片填充方式（这里不是图片大小）

想了解 object-fit 自行去菜鸟上看吧 object-fit

有问题可以留言交流，希望能够帮到你！

vue 中使用节流和防抖

Thu, 22 Apr 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-04-22。

今天事情比较少，就特意研究了下在vue中如何使用节流和防抖，还有节流防抖我真的是傻傻的分不清楚，不知道什么时候使用节流，什么时候使用防抖…

1. 节流-方法1

在 utils.js 文件里面加入下面的方法

// 节流
export function _throttle(fn, wait = 200) {
  let last, timer,now;
  return function() {
    now = Date.now();
    if (last && now - last < wait) {
      clearTimeout(timer);
      timer = setTimeout(function() {
        last = now;
        fn.call(this, ...arguments);
      }, wait);
    } else {
      last = now;
      fn.call(this, ...arguments);
    }
  };
}

2. 防抖

// 防抖
export function _debounce(fn, wait = 200) {
  let timer;
    return function () {
      let context = this;
      let args = arguments;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, wait)
    }
}

3. 组件中使用

import { _debounce, _throttle } from '@/assets/scripts/utils';

initQuery: _throttle(function() {
     // 要做的事情
}, 2000)

initQuery: _debounce(function() {
     // 要做的事情
}, 2000)

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
应用：因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。
输入框的模糊搜索
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
应用：因为节流是监听到第一次触发事件后就执行，所以可以用来防止按钮多次点击执行多次，且按照第一次点击的事件为准

elementui el-pagination 分页组件封装

Tue, 20 Apr 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-04-20。

分页组件是比较常用的，有表格的地方基本上都存在分页，使用 elementui 里面的分页进行封装方便使用。

一. 后端分页

<template>
  <div class="pagination">
    <el-pagination @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-sizes="propPageSizes"
      :page-size="pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      v-if="total > 0">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    callback: { // 获取列表数据方法
      type: Function,
      default() {
        return function() {};
      }
    },
    propCurrentPage: { // 当前页
      type: [Number],
      default: 1
    },
    propPageSizes: { // 配置每页显示多少条
      type: Array,
      default: function() {
        return [10, 20, 30];
      }
    },
    propPageSize: { // 默认每页显示条数
      type: [Number],
      default: 10
    },
    total: { // 数据总条数
      type: [Number],
      default: 0
    }
  },
  data() {
    return {
      currentPage: this.propCurrentPage, // 页面的当前页
      pageSize: this.propPageSize // 页面分页器大小
    };
  },
  methods: {
    // 改变当前页
    currentChange(val) {
      this.currentPage = val;
      this['callback']();
    },
    // 改变每页显示多少条
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this['callback']();
    }
  }
};
</script>

<style lang="less" scoped>
// 样式根据自己的实际情况修改，也可以用下边的
.pagination {
  margin-top: 20px;
  text-align: right;

  /deep/ .el-pagination.is-background .el-pager li,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .btn-next {
    color: #666;
    background-color: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 4px;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: #11889c;
    background-color: #fff;
    border: 1px solid #11889c;
  }

  /deep/ .el-pagination.is-background .btn-prev:disabled,
  /deep/ .el-pagination.is-background .btn-next:disabled {
    color: #c0c4cc;
  }
}
</style>

<Pagination 
  ref="pagination"
  :callback="getMsgList"
  :total="total">
</Pagination>

效果图

二. 前端实现分页

待更新。。。

这个分页其实也没什么难度，是后端实现的分页，后面再总结下前端实现分页的方法。有问题，欢迎大家随时留言交流！

ElementUI upload 组件封装

Thu, 15 Apr 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-04-15。

开发中遇到了个上传合同的需求，使用的是 elementui 的上传组件，项目中使用比较多，进行了封装，开发完成后总结一下，供大家和自己使用时查看。
上代码！

1. 模板代码

<template>
    <div class="uploadFile" style="margin-top:15px;">
      <!-- 上传组件 -->
        <el-upload
          v-loading="loading"
          multiple
          ref="upload"
          :action="actionUrl"
          :limit="limit"
          :accept="accepted"
          :auto-upload="true"
          :file-list="fileListData"
          :list-type="listType"
          :before-upload="handleBeforeUpload"
          :on-preview="handlePictureCardPreview"
          :on-exceed="handleExceed"
          :on-progress="handleUploadProgress"
          :on-success="handleSuccess"
          :on-error="handleError"
          :http-request="handleRequest"
          :element-loading-text="loadingText"
          :class="isPreview?'hide_box':''"
        >
            <i class="el-icon-plus" slot="default"></i>
            <div slot="file" slot-scope="{file}">
              <!-- 图片显示正常的缩略图 -->
              <img
                v-if="allPicType.includes(file.name.split('.')[1])&&imgConfigEmpty"
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="图片预览失败"
              >
              <!-- 非图片显示默认缩略图 -->
              <img
                v-if="!allPicType.includes(file.name.split('.')[1])&&imgConfigEmpty"
                class="el-upload-list__item-thumbnail"
                src="../../assets/images/common/defaultFilePic.png" alt="图片预览失败"
              >
              <!-- 预览，上传，删除文件 -->
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete">
                  <a :href="file.url" download style="color: #fff;">
                    <i class="el-icon-download"></i>
                  </a>
                </span>
                <span
                  v-if="isDisabledDel"
                  class="el-upload-list__item-delete"
                  @click="removeFile(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <!-- 上传提示语 -->
            <div slot="tip" class="el-upload__tip" v-if="!fileListData.length">
                {{ uploadTips }}
            </div>
        </el-upload>
        <!-- 预览时的文件名称样式 -->
        <template v-if="fileListData.length">
          <span v-for="(name,ind) in fileListData" :key="name + ind" class="fileName" :style="{left: `${ind * 155 + 'px' }`}">{{ name.name }}</span>
        </template>
        <!-- 上传是的文件名称样式 -->
        <template v-else>
          <span v-for="(name,ind) in fileNames" :key="name + ind" class="fileName" :style="{left: `${ind * 155 + 'px' }`}">{{ name }}</span>
        </template>
        <!-- 预览图片 -->
        <el-dialog :visible.sync="dialogVisible" title="查看" append-to-body >
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

参数解释：
- multiple：是否支持多选文件
- actionUrl：上传服务url
- http-request：自定义上传（我这里是上传到金山云）
- :class="isPreview?'hide_box':''" 预览隐藏上传操作
- element-loading-text 上传加载提示语
- auto-upload 是否在选取文件后立即进行上传

2. js代码

import Vue from 'vue';
// import UUID from 'uuid'; 上传是所需要的一个随机生成的id

export default {
  props: {
    fileListData: { // 合同文件列表
      type: Array,
      default: () => {
        return [];
      }
    },
    isPreview: { // 是否需要隐藏上传操作
      type: Boolean,
      default: false
    },
    limit: { // 限制文件上传个数
      type: Number,
      default: 1
    },
    noLimitSize: { // 是否限制文件上传大小
      type: Boolean,
      default: true
    },
    fileType: { // 文件类型
      type: Array,
      default: function() {
        return ['png', 'jpg', 'jpeg'];
      }
    },
    url: { // 文件上传的地址
      type: String,
      default: ''
    },
    loadingText: { // 加载文案
      type: String,
      default: '加载中...'
    },
    // * 文件的大小个单位   [3,'kb']或[3.'m']
    fileSize: {
      type: Array,
      default: () => {
        return [];
      }
    },
    listType: { // 文件列表的类型 ('text' 'picture' 'picture-car')
      type: String,
      default: () => {
        return 'picture-car';
      }
    },
    headers: { // 设置上传的请求头部
      type: Object,
      default: () => {
        return {};
      }
    },
    isDisabledDel: { // 是否展示删除功能
      type: Boolean,
      default: false
    },
    isShowFileName: { // 是否展示文件名称
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false, // 图片预览框
      dialogImageUrl: '', // 图片预览路径
      uploadTips: '', // 提示文案
      accepted: '', // 支持上传的文件类型
      allPicType: ['jpg', 'png', 'jpeg'], // * 图片使用弹窗预览
      loading: false, // 加载
      form: {}, // 上传金山云参数
      imgConfig: {}, // 上传金山云参数
      actionUrl: '', // 上传服务路径
      fileLists: [], // 当前上传的文件
      fileNames: [] // 当前上传的文件名称
    };
  },
  computed: {
    imgConfigEmpty() {
      return JSON.stringify(this.imgConfig) !== '{}';
    }
  },
  mounted() {
    this.getImgConfig();
    this.init();
  },
  methods: {
    init() {
      // 提示内容
      if (!this.fileType.length) {
        if (!this.fileSize.length) {
          this.uploadTips = `最多支持上传${this.limit}个` + '可以上传jpg/png/jpeg/doc/docx/pdf文件';
        } else {
          this.uploadTips = `最多支持上传${this.limit}个` + '可以上传jpg/png/jpeg/doc/docx/pdf文件,且文件不能大于' + this.fileSize[0] + this.fileSize[1];
        }
      } else {
        this.uploadTips = `最多支持上传${this.limit}个` + '可以上传';
        if (this.fileSize.length === 0) {
          for (let i = 0; i < this.fileType.length; i++) {
            if (i === this.fileType.length - 1) {
              this.uploadTips += this.fileType[i] + '文件';
            } else {
              this.uploadTips += this.fileType[i] + '/';
            }
          }
        } else {
          for (let i = 0; i < this.fileType.length; i++) {
            if (i === this.fileType.length - 1) {
              this.uploadTips += this.fileType[i] + '文件,且文件不能大于' + this.fileSize[0] + this.fileSize[1];
            } else {
              this.uploadTips += this.fileType[i] + '/';
            }
          }
        }
      }
      // 允许上传的文件类型
      if (this.fileType.length) this.accepted = this.fileType.join(',');
    },
    handlePictureCardPreview(file) { // 预览文件
      if (!file.url) {
        this.$message.error('下载失败');
        return;
      }
      const type = file.name.split('.')[1];
      if (['jpg', 'png', 'jpeg'].includes(type)) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        return;
      }
      // 判断文件类型
      if (type === 'doc' || type === 'docx') {
        // 在当前浏览器直接下载
        document.location.href = file.url;
      } else {
        // 图片在浏览器打开 新的页面展示
        window.open(file.url, '预览');
      }
    },
    handlerUploadErr() { // 上传失败提示
      if (!((Object.keys(this.imgConfig)).length)) {
        this.$message.error('上传文件失败，请稍后再试');
        return false;
      }
    },
    getImgConfig() { //* 获取金山云权限
      Vue.http
        .get('url')
        .then(config => {
          if (config.code === 0) {
            this.imgConfig = config.data;
            this.actionUrl = `https://${config.data.host}`;
          } else {
            this.$message.error('网络错误，文件将无法上传');
            this.loading = false;
            return false;
          }
        }).catch(err => {
          this.$handleError(err, '网络错误，文件将无法上传');
          this.loading = false;
        });
    },
    handleRequest(fileObj) { // * 将文件上传至金山云
      this.getImgConfig(); // ! 防止金山云凭证过期
      this.handlerUploadErr(); // 获取金山云权限失败禁止继续上传
      let imgConfig = this.imgConfig;
      let form = this.form;
      let formData = new FormData();
      // 处理参数
      formData.append('key', form.keyPrefix + '/' + form.key);
      formData.append('KSSAccessKeyId', form.KSSAccessKeyId);
      formData.append('policy', form.policy);
      formData.append('signature', form.signature);
      formData.append('file', form.file);
      this.loading = true;
      let hostAddress = imgConfig.host.indexOf('http') > -1 ? imgConfig.host : `https://${imgConfig.host}`;
      return Vue.axios({
        timeout: 0,
        headers: {
          'Content-Type': 'multipart/form-data;'
        },
        onUploadProgress: progressEvent => {
          const complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
          fileObj.onProgress({ percent: complete });
        }
      })
        .post(hostAddress, formData)
        .then(() => {
          let url = '/' + imgConfig.bucket + '/' + form.keyPrefix + '/' + form.key;
          return this.getImgUrl(url).then(result => {
            return {
              uid: form.file.uid,
              name: form.name,
              size: form.file.size,
              url: result.urls[0] || ''
            };
          });
        }).catch(err => {
          this.$handleError(err, '上传文件失败');
          this.loading = false;
        });
    },
    getImgUrl(url) { // * 获取文件金山云路径
      return Vue.http
        .post('url', {
          keys: [url]
        })
        .then(resp => Vue.checkResp(resp))
        .catch(err => {
          this.$handleError(err, '上传文件失败');
          this.loading = false;
        });
    },
    handleBeforeUpload(file) { // 上传之前校验
      let imgConfig = this.imgConfig;
      let lastIdx = file.name.lastIndexOf('.');
      let keyName = '';
      if (lastIdx > 0) {
        let fileSuffix = file.name.substring(lastIdx);
        let reg = /[\u4e00-\u9fa5]/g;
        if (!reg.test(fileSuffix)) {
          keyName = fileSuffix;
        }
      }
      this.form = {
        name: file.name,
        key: feConfig.IMG_SERVICE + UUID.v4() + keyName,
        KSSAccessKeyId: imgConfig.ak,
        policy: imgConfig.policy,
        signature: imgConfig.signature,
        keyPrefix: imgConfig.keyPrefix,
        file
      };
      if (!this.noLimitSize) {
        this.$message.warning('上传文件大小不能超过 ' + this.fileSize[0] + this.fileSize[1]);
        return false;
      }
      let splitName = file.name.split('.');
      let nameLength = splitName.length;
      if (this.fileType.indexOf(splitName[nameLength - 1]) < 0) {
        this.$message.error('上传文件格式错误!');
        return false;
      }
    },
    removeFile(file) { // 处理移出文件
      this.fileLists.splice(this.fileLists.findIndex(i => i.uid === file.uid), 1);
      this.fileNames.splice(this.fileNames.findIndex(i => i === file.name), 1);
      this.$emit('removeFileName', file);
    },

    handleExceed(files, fileList) { // 判断文件上传数量
      this.$message.warning(
        `当前限制最多上传 ${this.limit} 个文件，
        本次选择了 ${files.length} 个文件，
        共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    handleSuccess(response, file, fileList) { // 上传文件成功之后的回调
      this.fileNames = [];
      this.$nextTick(() => {
        fileList.forEach(i => this.fileNames.push(i.name));
      });
      clearInterval(this.interval);
      this.fileLists = fileList;
      this.$emit('uploadSuccess', response, file, fileList);
      this.loading = false;
      this.uploadPercent = file.percentage;
      const timeOut = setTimeout(() => {
        this.flag = false;
        this.uploadPercent = 0;
        clearTimeout(timeOut);
      }, 1000);
    },
    handleError() { // 处理上传失败的回调
      this.loading = false;
      this.flag = false;
      this.uploadPercent = 0;
      this.$message.error('文件' + this.form.name + '上传失败');
    },
    handleUploadProgress(event, file, fileList) { // 上传进度
    }
  }
};
</script>

js 代码代码中的上传金山云如果用不到可以去掉这三个函数 getImgConfig(), handleRequest(), getImgUrl() 直接把你的后端的 url 加到 actionUrl 中即可，下载使用的浏览器自带的功能。

3. css 代码

<style scoped>
.uploadFile {
  position: relative;
}

/* vue深度选择器 <<< 等同于 /deep/ */
.hide_box >>> .el-upload--picture-card {
  display: none;
}

.fileName {
  position: absolute;
  top: 150px;
  left: 0;
  width: 150px;
  overflow: hidden;
  color: #12a1b7;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

4. 组件中使用

// 根据自己的实际开发情况添加参数；
<fileUpload
          :is-preview="isPreview"
          :file-list-data="item.contract||[]"
          :is-disabled-del="false"
          :list-type="listType"
          :loading-text="loadingText"
          :no-limit-size="true"
          @removeFileName="removeFileName"
          @uploadSuccess="uploadSuccess"
        />

5. 效果图

PS：开发中还是遇到挺多问题的，文件名称的显示写的不太好使用calc 动态调节的样式这个后面可以优化，在网上查找都是重写上传组件，时间紧迫就没有搞了，上传组件的上传进度之前使用的 el-progress 但是有问题，后续再研究添加上上传进度显示，有些过的可以留言交流下。

希望能够帮助到你，有问题可以随时留言交流！

vue pdf 预览下载功能 vue-pdf

Mon, 05 Apr 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-04-05。

开发新项目的时候遇到了合同的预览下载功能，之前没有做过，实现之后记录一下，方便以后查阅。

1. 下载 vue-pdf 插件

npm install --save vue-pdf
或者
cnpm install --save vue-pdf

2. 所需页面引入 vue-pdf

我的 pdf 预览是在弹窗中展示，根据自己的项目实际情况来展示

<!-- 模板代码 --！>
<div class="pdfPreview">
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :before-close="handleClose"
      title="合同预览">
      <div class="agreement_picture">
        <div class="tools">
          <el-button @click="prePage" class="mr10"> 上一页</el-button>
          <el-button @click="nextPage" class="mr10"> 下一页</el-button>
          <span class="page">{{pageNum}}/{{pageTotalNum}} </span>
          <el-button @click="handleClose" class="mr10 fl-r btn-cancel"> 取消</el-button>
          <el-button @click="downPDF" class="mr10 dowmBtn"> 下载</el-button>
        </div>
        <pdf ref="pdf" 
          :src="src" 
          :page="pageNum"
          @page-loaded="pageLoaded($event)" 
          @num-pages="pageTotalNum=$event" 
          @error="pdfError($event)" 
          @link-clicked="page = $event">
        </pdf>
      </div>
    </el-dialog>
</div>

3. js 代码

import pdf from 'vue-pdf';

export default {
  name: 'PdfPreview',
  components: {
    pdf
  },

  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", // pdf 地址（网上的pdf例子地址，此地址就是后端返回的真正需要预览的pdf地址）
      src: '', // 预览地址
      pageNum: 1, // 当前页码
      pageTotalNum: 1, // 总页数
    };
  },

  mounted () {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    var url = this.url
    this.src = pdf.createLoadingTask(url);
  },

  methods: {
    // 上一页函数，
    prePage() {
      var page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 抛出错误的回调函数。
    pdfError(error) {
      console.error(error)
    },
    downPDF() { // 下载 pdf
				var url = this.url
				var tempLink = document.createElement("a");
				tempLink.style.display = "none";
				tempLink.href = url;
				tempLink.setAttribute("download", 'XXX.pdf');
				if (typeof tempLink.download === "undefined") {
					tempLink.setAttribute("target", "_blank");
				}
				document.body.appendChild(tempLink);
				tempLink.click();
				document.body.removeChild(tempLink);
        this.handleClose();
			},
    handleClose() {
      this.$emit('update:dialogVisible', false);
    }
  }
};

效果预览

如果对你有所帮助，欢迎大家留言交流！

Elementui el-input 输入框校验以及表单校验

Thu, 25 Mar 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-03-25。

一. 常用的 element-ui el-input 输入框

1. 过滤字母e，在js中属于数字，但是正则匹配 \d 是拦不住字母e 的

<el-input type="number" placeholder="请输入" min="1" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>

2. 只能输入正整数

<el-input type="number" placeholder="请输入" min="1" oninput ="value=value.replace(/[^\d]/g,'')"  v-model.number="count"></el-input>

3. 只允许输入数字和小数 / 数字和空格

oninput ="value=value.replace(/[^0-9.]/g,'')"
oninput ="value=value.replace(/^[\d\s]+$/g,'')"

4. 只允许输入正整数且不能以0开头

方法-：
<el-input
  v-model="scope.row.weight"
  oninput="value = Number(value) || 0"
>
方法二：
<el-input
  v-model="scope.row.weight"
  oninput="value=value.replace(/\D|^0/g, '')"
>
方法三：
<el-input
  v-model="scope.row.weight"
  oninput="value=value.replace(/[^\d]|^[0]/g, '')"
>

4. 允许输入小数点后几位

// 保留一位小数
oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" 
 
// 若需要保留N位小数，则把 2 改为 1 + n即可

5. 设置范围，最大值，最小值

<el-input min="0" max="100" type="number" @input="numberChange($event, 100)" @change="numberChange($event, 100)" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input> 

numberChange (val, max) {
   this.$nextTick(() => {
      this.count = Math.min(parseInt(val), max)
    })
}

6. form 表单中校验输入框只能输入数字和两位小数

rules: {
        giveHour: [
          { required: true, message: '请输入客户退费金额', trigger: 'blur' },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' }
        ]
      }

7. 禁止 / 只允许输入中文

onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"

8. 只允许输入数字和英文

<el-input
	 v-model.trim="form.userNumber"
	 placeholder="请输入用户编号"
	 clearable
	 onkeyup="this.value=this.value.replace(/[^\w]/g,'')"
></el-input>

9. 禁止输入特殊字符

<el-input oninput="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')"></el-input>

10. 只允许输入英文

<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z]/g,'')"></el-input>

11. 常见表单校验

校验方法可以封装到 util.js 里面

// utils.js

// 全局函数
export function validateMobile(str) {
  // 检查手机号码格式
  return /^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/.test(
    str,
  );
}

export function validateEmail(str) {
  // 检查邮箱格式
  return /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/.test(str);
}

export function validateBankCard(str) {
  // 检查银行卡
  return /^[1-9]\d{9,29}$/.test(str);
}

export function validatePhone(str) {
  // 检查电话格式
  return /^(0\d{2,4}-)?\d{8}$/.test(str);
}

export function validateQQ(str) {
  // 检查QQ格式
  return /^[1-9][0-9]{4,}$/.test(str);
}

// 检查验证码格式
export function validateSmsCode(str) {
  return /^\d4$/.test(str);
}
// 校验 URL
export function validURL(url) {
  const reg =
    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

// 校验特殊字符
export function specialCharacter(str) {
  const reg = new RegExp(
    // eslint-disable-next-line quotes
    "[`~!@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
  )
  return reg.test(str)
}

12. 输入非数字组合(登录账号6-16位)

// 非纯数字非纯字母 /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/
    let userNameReg = /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/;
      if (!userNameReg.test(form.userName)) {
        this.$message.warning('请输入6-16位的非纯数字登录账号~');
        return false;
      }

13. 设置密码校验(限制输入 8-20位数字字母特殊符号任意两种类型组合)

  let passwordReg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,20}$/;
  if (!passwordReg.test(form.password)) {
      this.$message.warning('请输入正确的密码格式~');
      return false;
    }

13. 只允许输入中文，英文，数字 / 空格 / 小数点

<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"></el-input>
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"></el-input>
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')"></el-input>

14. 空格校验

// 去除所有的空格：
<el-input oninput = "value=value.replace(/\s*/g,"")"></el-input>

// 去除两头的空格：
方法一：<el-input oninput = "value=value.replace(/^\s*|\s*$/g,"")"></el-input>
方法二：<el-input v-model.trim=""></el-input>

// 去除左侧的空格：
<el-input oninput = "value=value.replace(/^\s*/g,"")"></el-input>
　　
// 去除右侧的空格：
<el-input oninput = "value=value.replace(/(\s*$)/g,"")"></el-input>

Tips: 最近测试给提了个bug，window 系统电脑，使用 oninput 方法进行输入框正则校验，如果疯狂进行输入的话会出现当前输入框的双向绑定失效，导致输入框无法正常输入值。这时候推荐使用 @input 方法可以避免这个方法，还有一个办法是失焦的时候重新进行一次赋值操作也可以解决。mac系统没有出现这个问题…

持续更新中，欢迎大家留言交流！

elementui el-dialog 作为子组件使用关闭时报错

Tue, 23 Mar 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-03-23。

1. 弹窗作为子组件

父组件通过点击事件来打开弹窗，然而，在弹窗中点击窗外之外的空白区域或者右上角叉时候一直报错:

翻译：避免直接改变一个道具，因为当父组件重新渲染时，这个值会被覆盖。相反，使用基于道具值的数据或计算属性。正在发生突变的道具:“editVisible”

2. 原因分析

从翻译来看，子组件中不能直接更改父组件传递过来的数据，然后就按照提示将传递过来的数据在 data 和 computed 都重新复制一遍，仍然报同样的错。

3. 解决方法

最后通过一行代码顺利解决，在弹窗上加上 :before-close 方法顺利解决！
再次分析原因：
通过该方法关闭弹窗的时候，直接通过父组件来改变关闭，该方法是在关闭弹窗前的回调函数，不在子组件改变弹窗的状态就不会报错了！

// 父组件
<editDialog :edit-visible.sync="editVisible">
</editDialog>

// 子组件
<el-dialog
      title="我的线索"
      :visible.sync="editVisible"
      :before-close="handleClose"
      top="5vh"
      width="80%">
</el-dialog>

props: {
    editVisible: {
      type: Boolean,
      default: false
    },
};

 handleClose() {
    this.$emit("update:editVisible",!this.editVisible);
 },

这么一个简单的问题，解决之路曲曲折折，希望对你有所帮助，有问题可以留言交流！

elementui dialog组件固定高度

Tue, 16 Mar 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-03-16。

弹窗高度过大，想设置个自适应的高度，固定头尾

/deep/.el-dialog {
  margin: 5vh auto !important;
}

/deep/ .el-dialog__body {
  height: 70vh;
  overflow: auto;
}

margin，height 可根据实际情况设置大小。
效果图：

欢迎大家留言交流！

最全数组方法（ES5,ES6）总结

Mon, 01 Feb 2021 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2021-02-01。

总结一些经常用到的数组的方法，便于自己和大家开发使用中的查阅。

arr.push() 从后面添加元素，返回值为添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.push(5))   // 6
console.log(arr) // [1,2,3,4,5,5]

arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素

let arr = [1,2,3,4,5]
console.log(arr.pop())     // 5
console.log(arr)  //[1,2,3,4]

arr.shift() 从前面删除元素，只能删除一个返回值是删除的元素

let arr = [1,2,3,4,5]
console.log(arr.unshift(2))    // 6
console.log(arr)  //[2,1,2,3,4,5]

arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素 (参数： i 索引值 n 个数)

let arr = [1,2,3,4,5]
console.log(arr.splice(2,2))     //[3,4]
console.log(arr)    // [1,2,5]

arr.concat() 连接两个数组返回值为连接后的新数组

let arr = [1,2,3,4,5]
console.log(arr.concat([1,2]))  // [1,2,3,4,5,1,2]
console.log(arr)   // [1,2,3,4,5]

str.split(sep,many) 将字符串转化为数组、截取字符串(sep:必需。字符串或正则表达式 many: 可选,该参数可指定返回的数组的最大长度)

let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

"hello".split("", 3)	//可返回 ["h", "e", "l"]

arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的，见例子。

// 1.数字数组
let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) => a - b)  
console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) => b-a)  
console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]

// 2. 字符串数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//默认升序　　Apple,Banana,Mango,Orange
fruits.sort().reverse();//降序　　Orange,Mango,Banana,Apple

//3. 数组对象排序 根据 distance 字段进行排序
var shoplist = [{
  "name": "上海",
  "distance": 14307
}, {
  "name": "深圳",
  "distance": 16606
}, {
  "name": "广州",
  "distance": 18062
}, {
  "name": "郑州",
  "distance": 18468
}]
// 实现 从近到远
shoplist.sort((a,b)=>{return a.distance-b.distance})
// 从远到近
shoplist.sort((a,b)=>{return a.distance-b.distance})
shoplist.reverse()
// 结果如下图

8. arr.reverse() 将数组反转,返回值是反转后的数组

let arr = [1,2,3,4,5]
console.log(arr.reverse())    // [5,4,3,2,1]
console.log(arr)    // [5,4,3,2,1]

arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

let arr = [1,2,3,4,5]
console.log(arr.slice(1,3))   // [2,3]
console.log(arr)    //  [1,2,3,4,5]

arr.forEach(callback) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组
callback的参数： value --当前索引的值 index --索引 array --原数组

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
console.log(arr)

打印结果如下图：

11. arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。
callback的参数： value --当前索引的值 index --索引 array --原数组

let arr = [1,2,3,4,5]
arr.map((value,index,array) => {
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)

var arr1 = [1,2,3,4]; 
var res1 = arr1.map((item,index,arr)=>{ 
 item = item * 3; 
 return item; 
})
console.log(arr1); // [1,2,3,4]
console.log(res1); // [3,6,9,12]

ps: arr.forEach()和arr.map()的区别

arr.forEach()是和for循环一样，arr.map()是修改数组中的项的数据，并返回新的数据。
arr.forEach() 没有return arr.map() 有return。
arr.filter(callback) 过滤数组，返回一个满足要求的数组
callback的参数： value --当前索引的值 index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.filter((value, index) => value<3)
console.log(arr1)    // [1, 2]

arr.every(callback) 依据判断条件，数组的元素是否全满足，若满足则返回ture
callback的参数： value --当前索引的值 index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.every( (value, index) =>value<3)
console.log(arr1) // false
let arr2 = arr.every( (value, index) =>value<6)
console.log(arr2)  // true

arr.every(callback) 依据判断条件，数组的元素是否全满足，若满足则返回ture
callback的参数： value --当前索引的值 index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.every( (value, index) =>value<3)
console.log(arr1) // false
let arr2 = arr.every( (value, index) =>value<6)
console.log(arr2)  // true

arr.some() 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
callback的参数： value --当前索引的值 index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.some( (value, index) =>value<3)
console.log(arr1) // true
let arr2 = arr.some( (value, index) =>value>6)
console.log(arr2) // false

arr.reduce(callback, initialValue) 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
参数： callback:
　　 pre 必选 --上一次调用回调返回的值，或者是提供的初始值（initialValue）
　　　 cur 必选 --数组中当前被处理的数组项
　　　 index 可选 --当前数组项在数组中的索引值
　　　 array 可选 --原数组
initialValue: 可选 --初始值
实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.

// 求数组之和
let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
   preValue + curValue
)
console.log(arr1)    // 10

// 求数组项最大值
var max = arr.reduce(function (prev, cur) {
   return Math.max(prev,cur);
});

// 数组去重
var newArr = arr.reduce(function (prev, cur) {
   prev.indexOf(cur) === -1 && prev.push(cur);
   return prev;
},[]);

// 求字符串出现的最多的次数
const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {})

// 将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
  return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

arr.reduceRight(callback, initialValue) 与arr.reduce()功能一样，不同的是，reduceRight()从数组的末尾向前将数组中的数组项做累加。
实行方法：reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。

let arr = [0,1,2,3,4]
let arr1 = arr.reduceRight((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)    // 10

推荐链接：reduce和reduceRight讲解

arr.indexOf() 查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1

let arr = [1,2,3,4,5,2]
let arr1 = arr.indexOf(2)
console.log(arr1)  // 1
let arr2 = arr.indexOf(9)
console.log(arr2)  // -1

ES6方法
19. arr.lastIndexOf() 和arr.indexOf()的功能一样，不同的是从后往前查找

let arr = [1,2,3,4,5,2]
let arr1 = arr.lastIndexOf(2)
console.log(arr1)  // 5
let arr2 = arr.lastIndexOf(9)
console.log(arr2)  // -1

20 Array.from() 将伪数组变成数组，就是只要有length的就可以转成数组.

let str = '12345'
console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj))   // ["a", "b"]

Array.of() 将一组值转换成数组，类似于声明数组

let str = '11'
console.log(Array.of(str))   // ['11']
// 类似于
console.log(new Array('11'))  // ['11]

// 区别
console.log(new Array(2))   //[empty × 2]  是个空数组
console.log(Array.of(2))    // [2]

arr.find(callback) 找到第一个符合条件的数组成员

let arr = [1,2,3,4,5,2,4]
let arr1 = arr.find((value, index, array) =>value > 2)
console.log(arr1)   // 3

arr.findIndex(callback) 找到第一个符合条件的数组成员的索引值

let arr = [1,2,3,4,5]
let arr1 = arr.findIndex((value, index, array) => value > 3)
console.log(arr1)  // 3

arr.fill(target, start, end) 使用给定的值，填充一个数组,ps:填充完后会改变原数组
　　参数： target – 待填充的元素
　　　　　 start – 开始填充的位置-索引
　　　　 end – 终止填充的位置-索引（不包括该位置)

let arr = [1,2,3,4,5]
let arr1 = arr.fill(5)
console.log(arr1)  // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]
let arr2 = arr.fill(5,2)
console.log(arr2) // [1,2,5,5,5]
let arr3 = arr.fill(5,1,3)
console.log(arr3) // [1,5,5,5,5]

arr.includes() 判断数中是否包含给定的值

let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)  
console.log(arr1)   // ture
let arr2 = arr.includes(9) 
console.log(arr2)    // false
let arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3)  // true

ps:与indexOf()的区别：
1 indexOf()返回的是数值，而includes()返回的是布尔值
2 indexOf() 不能判断NaN,null,undefined，返回为-1 ，includes()则可以判断.

arr.keys() 遍历数组的键名

let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
    console.log(key);   // 0,1,2,3
}

arr.values() 遍历数组键值

let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
     console.log(val);   // 1,2,3,4
}

arr.entries() 遍历数组的键名和键值

let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
    console.log(e);   // [0,1] [1,2] [2,3] [3,4]
}

数组去重

var arr = [1,1,2,3,4,5,6,6]
ES6
方法一：
var b = Array.from(new Set(arr));
console.log(b) // [1,2,3,4,5,6]
方法二：
var c = [...new Set(arr)];
console.log(c) // [1,2,3,4,5,6]
ES5：
方法三：
function newArr(arr){
    for(var i=0;i<arr.length;i++){
        for(var j=i+1;j<arr.length;j++){
            if(arr[i]==arr[j]){ 
            //如果第一个等于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
            }
        }
    }
    return arr;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(newArr(arr)) // [1,2,5,6,3,8,9]
方法四：
function newArr(array){ 
    //一个新的数组 
    var arrs = []; 
    //遍历当前数组 
    for(var i = 0; i < array.length; i++){ 
        //如果临时数组里没有当前数组的当前值，则把当前值push到新数组里面 
        if (arrs.indexOf(array[i]) == -1){ 
            arrs.push(array[i])
        }; 
    } 
    return arrs; 
}
var arr = [1,1,2,5,5,6,8,9,8];
console.log(newArr(arr)) // [1,2,5,6,8,9]

排序

方法一：冒泡排序
var arr = [1, 9, 4, 50, 49, 6, 3, 2];
function test(){
  for (var i = 0; i < arr.length - 1; i++){
    for (var j = i + 1; j < arr.length; j++){
      var tempi = arr[i]; //获取第一个值，并与后一个值比较
      var tempj = arr[j];
      if (tempi > tempj){
        arr[i] = tempj;
        arr[j] = tempi;//如果前一个值比后一个值大，那么相互交换
      }
    }
  } 
  console.log(arr); //return arr；
}
test(arr);  //[1, 2, 3, 4, 6, 9, 49, 50]

方法二：sort()
var arr = [1, 9, 4, 50, 49, 6, 3, 2];
function test(arr) {
  if( arr.length < 1){
    return      //如果数组长度小于1，直接返回，没有比较的必要
  }
 return  arr.sort(sortNum)
};
function sortNum(a,b) {
    return a - b;   //倒序就是b-a
}
test(arr)  //[1, 2, 3, 4, 6, 9, 49, 50]

// 数组的随机排序
var arr = [1, 9, 4, 50, 49, 6, 3, 2];
function test(arr) {
    if(arr.length < 1) {
        return 
    }
    return arr.sort(randomSrot)
}
function randomSrot(a,b) {
    return Math.random() > 0.5 ? -1 : 1;
}
test(arr);  
//利用Math.random()方法可以返回0~1之间的随机数，然后和0.5比较，来决定返回值是1还是-1

获取数组汇总最大值和最小值

let arr = [1, 2, 5, 8, 10, 100, -1]
方法一：
Math.max(...arr) 
方法二：
Math.max.apply(null, arr) 
方法三：
Math.max.call(null, ...arr) 
方法四：
function getMax(prev, next) {
    return Math.max(prev, next)
}
arr.reduce(getMax)
// 求最小值将max换成min

欢迎留言交流，持续更新中…

vue使用 vue-qr 和 html2canvas 链接生成普通二维码和海报二维码

Fri, 20 Nov 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-11-20。

首先下载插件

npm i vue-qr --save
npm i html2canvas --save

链接生成二维码并下载到本地

// 模板中的代码
      <el-dialog :visible.sync="showDownloadDialog"
                 title="测评下载"
                 width="35%">
        <div class="dialog-content">
          <el-radio-group v-model="radio">
            <el-radio :label="1">海报二维码</el-radio>
            <el-radio :label="2">高清二维码</el-radio>
          </el-radio-group>
          <div class="evaluationUrl">
            测评链接：
            <div class="copyUrl">
              <span class="oneLine">{{ QRUrl }}</span>
              <span class="copy"
                    :data-clipboard-text="QRUrl"
                    @click="copy">复制链接</span>
            </div>
            <div id="qrcode">
              <vue-qr :text="QRUrl" // 链接
                      :size="175" // 二维码的宽高
                      :margin="1"></vue-qr>
            </div>
          </div>
        </div>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="showDownloadDialog = false"
                     class="btn-cancel">取消</el-button>
          <el-button @click="confirmDownload"
                     type="primary">下载</el-button>
        </div>
      </el-dialog>

在使用的组件中引入注册在组件中

import VueQr from 'vue-qr';
import html2canvas from 'html2canvas';
export default {
  name: 'EvaluationList',
  components: {
    VueQr
  },
 }

下载二维码到本地

confirmDownload() {
      // 确认下载二维码或者海报二维码
      if (this.radio === 2) {
        // 下载高清二维码
        var oQrcode = document.querySelector('#qrcode img');
        var url = oQrcode.src;
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        // 下载图名字
        a.download = '高清二维码';
        // url
        a.href = url;
        // 合成函数，执行下载
        a.dispatchEvent(event);
      } else {
        // 下载海报二维码
        this.saveImg();
      }
    },

由于需求是不需要预览直接下载所以将二维码进行了隐藏

#qrcode {
  display: none;
}

效果图如下
下载弹窗

二维码和背景图片合成海报二维码下载到本地
模板中的代码

<div class="bgCode"
           id="mycanvas">
        <vue-qr class="QrcodeBg"
                :text="QRUrl" // 链接
                :margin="1"
                :size="175">
        </vue-qr>
      </div>

下载海报到本地

saveImg() {
      // 先获取你要转换为img的dom节点
      var node = document.getElementById('mycanvas'); // 传入的id名称
      var width = node.offsetWidth; // dom宽
      var height = node.offsetHeight; // dom高
      var scale = 2; // 放大倍数 这个相当于清晰度 调大一点更清晰一点
      html2canvas(node, {
        width: width,
        heigth: height,
        backgroundColor: '#ffffff', // 背景颜色 为null是透明
        dpi: window.devicePixelRatio * 2, // 按屏幕像素比增加像素
        scale: scale,
        X: 0,
        Y: 0,
        scrollX: -3, // 如果左边多个白边 设置该偏移-3 或者更多
        scrollY: 0,
        useCORS: true, // 是否使用CORS从服务器加载图像 !!!
        allowTaint: true // 是否允许跨域图像污染画布  !!!
      }).then((canvas) => {
        var url = canvas.toDataURL(); // 这里上面不设值cors会报错
        var a = document.createElement('a'); // 创建一个a标签 用来下载
        a.download = '海报二维码'; // 设置下载的图片名称
        var event = new MouseEvent('click'); // 增加一个点击事件
        a.href = url; // 此处的url为base64格式的图片资源
        a.dispatchEvent(event); // 触发a的单击事件 即可完成下载
      });
    },

css
需求不需要展示海报二维码所以使用z-index 降低层级不展示在页面上将链接转成二维码后定位到背景图片放置二维码的位置

.bgCode {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: -10;
  width: 375px;
  height: 667px;
  background: url('~@/assets/images/AIEvaluation/bg.png');
  background-size: contain;

  .QrcodeBg {
    position: absolute;
    top: 348px;
    left: 100px;
  }
}

效果图如下

vue-qr 常用属性介绍

text 二维码内容
size 二维码宽高大小，因为是正方形，所以设一个参数即可
margin 默认边距20px，不喜欢的话自己设为0
colorDark 实点的颜色，注意要和colorLight一起设置才有效
colorLight 空白的颜色，注意要和colorDark一起设置才有效
bgSrc 嵌入背景图地址，没什么卵用，不建议设置
logoSrc 二维码中间的图，这个是好东西，设置一下显得专业点
logoScale 中间图的尺寸，不要设太大，太大会导致扫码失败的
dotScale 那些小点点的大小，这个也没什么好纠结的，不建议设置了

官方vue-qr：官方文档

html2canvas 配置项介绍 html2canvas 中文文档

有什么问题留言一起交流下吧。

element tooltip组件在table组件中的使用

Thu, 19 Nov 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-11-19。

需求：在表格中超出两行后显示省略号，鼠标进入在tooltip框中显示文本信息，随后将tooltip封装成立组件使用。

OverFlowText.vue

<!-- 组件功能：文本溢出时，显示tooltip -->
<template>
  <el-tooltip manual
              v-model="isShow"
              :disabled="!isShow"
              :width="tableWidth"
              placement="top">
    <div class="tooltip-content"
         slot="content">{{ content }}</div>
    <div :class="`text-wrap ${rows>1?'text-wrap-column':'text-wrap-row'}`"
         @mouseenter="handleMouseenter($event,)"
         @mouseleave="handleMouseleave"
         :style="rows>1?`-webkit-line-clamp:${rows}`:''">
      <slot />
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    content: {
      // tooltip展示内容
      type: String
    },
    rows: {
      // 超过n行省略
      type: Number,
      default: 1
    },
    tableWidth: {
      // 需要展示tooltip框元素的宽度
      type: Number
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    handleMouseenter({ target: { offsetWidth } }) {
      // 获取当前文本宽度
      let TemporaryTag = document.createElement('span');
      TemporaryTag.innerText = this.content;
      TemporaryTag.className = 'getTextWidth';
      document.querySelector('body').appendChild(TemporaryTag);
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
      document.querySelector('.getTextWidth').remove();
      /* cellWidth为表格容器的宽度 */
      const cellWidth = offsetWidth;
      /* 当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行 */
      currentWidth <= (2 * cellWidth) ? this.isShow = false : this.isShow = true;
    },
    handleMouseleave() {
      this.isShow = false;
    }
  }
};
</script>

<style scoped>
.text-wrap {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
  box-sizing: border-box;
}

.text-wrap-row {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-wrap-column {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.tooltip-content {
  max-width: 500px;
  word-break: break-word;
  white-space: pre-wrap;
}
</style>

页面中的使用

/**
* width 表格宽度 
* content 需要显示在tooltip 框中的内容
* row 需要几行显示省略号 隐藏文本内容
**/
<el-table-column prop="subject"
                           label="学科"
                           align="center"
                           width="180">
            <template slot-scope="scoped">
              <over-flow-text :rows="2"
                            :width="180"
                           	:content="Object.keys(scoped.row.subjects).join('，')"> 
                <div>
                  {{ Object.keys(scoped.row.subjects).join('，') }}
                </div>
              </over-flow-text>
            </template>
          </el-table-column>

效果图如下：

展示需要展示 tooltip 的需求都可以使用，上面的组件。
如果有什么问题，可以留言一起交流。

element table组件用css实现鼠标进入表格当前行显示删除图片

Mon, 16 Nov 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-11-16。

现在有一个需求鼠标进入表格的当前行，显示操作列的删除图标，鼠标移出隐藏，发现一种超级简单的实现方法，只用ss就能实现。
直接上代码
在需要隐藏显示的元素上加上 delImg 就可以了就这么简单粗暴

.delImg {
  cursor: pointer;
  opacity: 0;
}

.el-table__body tr:hover {
  .delImg {
    opacity: 1;
  }
}

ps：说下为什么要用 opacity 属性进行显示隐藏，如果用display 属性进行操作的话，因为它不占据原来的位置，显示隐藏的操作列的宽度会变，体验不好，所以就用了透明属性元素占据原来的位置。

使用css实现滚动到页面对应的位置

Thu, 29 Oct 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-10-29。

废话不多说先上代码

<div class="back-top-item" @click="turnFeeConsultation">
      <div class="feeConsultation"></div>
     <p class="text">收费咨询</p>
</div>

turnFeeConsultation() {
      this.$nextTick(() => 
        document.getElementsByClassName('paidConsultation')[0].scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
      });
    }

scrolIintoView 布尔值参数

scrollintoView(true) 或者scrollIntoView()相当于scrollIntoViewOptions: {block: “start”, inline: “nearest”}
scrollintoView(false) 相当于scrollIntoViewOptions: {block: “end”, inline: “nearest”}

scrolIintoView 布对象参数

behavior（可选）定义动画过渡效果， “auto” 瞬间跳转（没有动画效果）或 “smooth”（由动画效果平滑的到指定位置）之一。默认为 “auto”
block（可选）定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。
inline（可选）定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”

vue.js学习总结（持续更新）

Fri, 04 Sep 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-09-04。

一. vue.js教程总结

1. Object.freeze()

阻止数据改变时，视图会进行重渲染的现象。

2. vue暴露了一些有用的实例属性与方法，加上前缀 $

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

注意：
不要在选项属性或回调上使用箭头函数
比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，
经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

4. v-once

当数据改变时，插值处的内容不会更新

5. v-html

输出真正HTML
注意：
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

6. 动态参数 (2.6.0 新增)

<a v-bind:[attributeName]="url"> ... </a>
// Vue 实例有一个 data 属性 attributeName，其值为 "href" 等价于  v-bind:href
// 不能使用 空格或者引号的表达式

7. v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

8. v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

9. 计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

10. 计算属性和方法的区别

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

11. 计算属性的getter 和 setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
 // 现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

12. watch 侦听器

可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
该方法可以不用绑定事件

<body>
  <div id="app">
      <input type="text" v-model="firstname">+
      <input type="text" v-model="lastname">=
      <input type="text" v-model="fullname">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          firstname: '',
          lastname: '',
          fullname: ''
      },
      methods: {},
      watch: {
          'firstname': function(oldVal,newVal){
              this.fullname = newVal + '-' + this.lastname
          },
          'lastname': function(oldVal,newVal){
              this.fullname = this.firstname + '-' + newVal
          }
          // 监听的是对象或者数组需要加上 deep: true;
      }
    });
  </script>
</body>

13. watch、computed和methods之间的对比

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods 方法表示一个具体的操作，主要书写业务逻辑；
watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

14. Class 与 Style 绑定

14.1 绑定 HTML Class

14.1.1 对象语法

data: {
  isActive: true,
  hasError: false
}

<div v-bind:class="{ active: isActive }"></div>
<div class="active"></div>
// active 这个 class 存在与否将取决于数据属性 isActive 是否为true

// 可以在对象中传入更多属性来动态切换多个 class
// 与普通的 class 属性共存
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
// 渲染结果
<div class="static active"></div>

// 绑定的数据对象不必内联定义在模板里
<div v-bind:class="classObject"></div>
// 也可以绑定一个返回对象的计算属性
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
// 计算属性
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

14.1.2 数组语法

<div v-bind:class="[activeClass, errorClass]"></div>
// 渲染结果
<div class="active text-danger"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

根据条件切换可以选择三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
// 这样写始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添activeClass
// 多个条件是还可以这样写
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

14.1.3 用在组件上

当在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

// 声明一个组件之后
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
// 在使用该组件的时候再加一些class
<my-component class="baz boo"></my-component>

// 将会渲染成这样
<p class="foo bar baz boo">Hi</p>

14.2 绑定内联样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

如果样式多可以绑定在一个对象上而且看起来模板更加清晰

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法可以将多个对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

14.2.1 多重值

可以用于提供多个前缀的值

// 用于适配
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

15. 条件渲染 v-if， v-else， v-else-if

15.1 在元素上使用 v-if 条件渲染分组

如果想切换多个元素的话，可以将v-if绑定在一个元素当做不可见的包裹元素，并使用v-if

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

15.2 用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

// 当这两个元素是完全独立的，不要复用它们时 只需添加一个具有唯一值的 key 属性即可
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

15.3 v-show

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

15.4 v-show 和 v-if 区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 就是简单的css样式的切换
需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 ==v-if ==较好。

15.5 v-if 和 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

16. 列表渲染

16.1 在v-for使用对象

可以提供第二个的参数为 property 名称 (也就是键名)：

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

显示为：

 title: How to do lists in Vue
 author: Jane Doe
 publishedAt: 2016-04-10

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

16.2 维护状态（绑定 :key）

为什么添加key属性？
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

16.3 数组的更新检测

变异方法
会改变原始数组

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法
不会改变原始数组，而总是返回一个新数组

filter()、concat() 和 slice()

16.4 显示过滤/排序后的结果

可以创建一个计算属性，来返回过滤或排序后的数组。

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

计算属性不适用的时候例如嵌套v-for循环中

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-for 与 v-if 一同使用
v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

如果是想有条件的跳过循环，可以将v-if至于外层

16.5 在组件上使用 v-for

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数

<my-component v-for="item in items" :key="item.id"></my-component>
// 据传递到组件里，我们要使用prop
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

注意
is=“todo-item” 这种做法在使用 DOM 模板时是十分必要的，因为在

元素内只有
元素会被看作有效内容。这样做实现的效果与相同，但是可以避开一些潜在的浏览器解析错误

17. 事件处理 v-on

17.1 内联处理器的方法

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

17.2 修饰符

17.2.1 事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
// 这个 .passive 修饰符尤其能够提升移动端的性能
<div v-on:scroll.passive="onScroll">...</div>

多个修饰符的顺序是自前往后

17.2.2 按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown">
<!--处理函数只会在 $event.key 等于 PageDown 时被调用。-->

<!--使用 keyCode attribute 也是允许的：-->
<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

17.2.3 系统修饰符

.ctrl
.alt
.shift
.meta

.ctrl
.alt
.shift
.meta

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

17.2.4 鼠标修饰符

.left
.right
.middle

使用v-on的好处

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

18. 表单输入

18.1 修饰符

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number
转为数字类型

<input v-model.number="age" type="number">

19. 组件基础

19.1 data必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

20. 插槽

20.1 具名插槽（新语法）

一个带有如下模板的子组件
对于这样的情况，元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

一个不带 name 的出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

父子件中
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <!--任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。-->
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <!--希望更明确点仍然可以在一个 <template> 中包裹默认插槽的内容-->
   <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

任何一种写法子组件中都会渲染出：

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

20.2 作用域插槽（新语法）

子组件模板如下

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

在父组件中：
绑定在元素上的 attribute 被称为插槽 prop

<!-- slotProps 可以使任意的名字 -->
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
简化版
<!--当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用-->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

出现多个插槽，请始终为所有的插槽使用完整的基于的语法：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

解构插槽 Prop
v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式，可以使用 ES2015 解构来传入具体的插槽 prop

<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>

将 user 重命名为 person

<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

20.3 具名插槽的缩写

v-slot: 替换为字符== #== 例如 v-slot:header 可以被重写为 #header

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

必须始终以明确插槽名

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

21. 动态组件和异步组件

element 上传组件使用

Fri, 21 Aug 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-08-21。

1. 单张图片上传

第一次使用element的上传组件，总结一下希望能够帮助到大家，也便于自己以后使用。（大家可以根据自己所需来添加更改绑定的属性。）

<el-upload
  class="avatar-uploader"
  accept="image/jpeg"
  :show-file-list="false"
  :headers="{ token: token}"
  :action="actionUrl"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
>
  <img
    v-if="ruleForm.dialogImageUrl"
    :src="ruleForm.dialogImageUrl"
    class="avatar"
  />
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  <div slot="tip" class="el-upload__tip">
    只能上传jpg/png文件，且不超过50kb
  </div>
</el-upload>

// 这里上传的时候需要在请求头重添加 token 我的项目的 token 在登陆之后，把 token 保存在了本地存储中，大家根据自己项目的实际情况添加token,
  mounted () {
    this.token = sessionStorage.getItem("tk");
    this.actionUrl = this.common.data().shoppingMerchant + "/imageUpload/brand"; // 我的项目封装好的后台路径 根据自己项目的实际情况写
  },
  methods:{
	handleAvatarSuccess (res, file) { // 上传成功后展示图片
    this.ruleForm.dialogImageUrl = this.$baseImgUrl + res.data;
    this.$set(this.ruleForm, this.ruleForm.dialogImageUrl, res.data)
  },
  beforeAvatarUpload (file) { // 上传前校验图片（根据自己项目的实际需求添加）
    const imgType = file.type === 'image/jpeg' || file.type === 'image/png';
    const isLt50k = file.size / 1024 / 1024 < 0.048;
    if (!imgType) {
      this.$message.error('上传头像图片只能是 JPG和png 格式!');
      return false
    }
    if (!isLt50k) {
      this.$message.error('上传头像图片大小不能超过 50k!');
      return false
    }
  }
}

2. 上传多张图片

<el-upload
  class="upload"
  :headers="{ token: token}"
  :action="actionUrl"
  list-type="picture-card"
  :on-remove="handleDetailRemove"
  :before-upload="handleDetailBefore"
  :on-success="handleDetailSuccess"
  :limit="5"
  :file-list="detailImgList"
>
  <i class="el-icon-plus"></i>

file-list 属性是个关键他有自己的数据结构这里需要多注意（上传成功后图片有三个属性url，uid，status）

limit 限制上传几张图片

handleDetailRemove (file) { // 删除详情页图片
  var vm = this;
  var url = vm.common.data().shoppingMerchant + "/file/delFile"
  var data = {
    fileId: file.url
  }
  vm.common.shopGetData(vm, url, data, function (res) {
    vm.detailImgList.forEach((item, index) => {
      if (item.uid == file.uid) {
        vm.detailImgList.splice(index, 1)
      }
    })
  });
  console.log(vm.detailImgList)
},
handleDetailBefore (file) { // 详情页图片上传大小类型限制
  const imgType = file.type === 'image/png' || file.type == 'im
  const isLt300k = file.size / 1024 / 1024 < 0.29;
  if (!imgType) {
    this.$message.error('上传图片只支持 jpg,png和jpeg 格式图片!
    return false
  }
  if (!isLt300k) {
    this.$message.error('上传图片大小不能超过 300k!');
    return false
  }
},
handleDetailSuccess (res, file) { // 上传成功后显示图片
  if (res.returnCode == 10001) {
    this.ruleForm.detailImages.push(res.data)
    this.detailImgList.push({
      url: this.$baseImgUrl + res.data,
      uid: file.uid,
      status: file.status
    })
  } else {
    this.$message.error('详情页图片上传失败');
  }
},

element 开关组件显示开关文字总结

Fri, 21 Aug 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-08-21。

1. 显示开关文字

表格中使用开关组件，官方例子的文字描述是显示在开关组件的后面，如何显示在组件上呢？废话不多说直接上教程。

html
<el-table-column label="是否显示">
  <template v-slot="scope">
    <el-switch
      v-model="scope.row.show"
      class="switchStyle"
      :active-value="1"  
      :inactive-value="0"
      active-text="开"
      inactive-text="关"
      active-color="#13ce66"
      inactive-color="#ff4949"
      @change="getBrandList(scope.row.id)"
    >
    </el-switch>
  </template>

只有上面的html是不行的，需要调节下样式

<style lang="less">
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}
</style>

来看效果图

上面的组件的属性如果有不懂的地方可以自行看下官方文档，有什么问题欢迎在下方留言交流。

vue 路由拆分

Wed, 19 Aug 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-08-19。

1. 问题

随着项目越来越大，路由会越来越多，如果路由都写在同一个文件中会显得页面混乱，可读性很差，不易查找维护。

2. 解决方法

拆分路由：

在 router 文件夹中创建新的文件

shoppingMallBusiness.js 文件

里面还按照正常路由写法

index.js 文件

引入

const router =  new Router({
    routes: [
		...shoppingMallBusiness, // 电商商户端
	],
})

H5和Android ios交互

Tue, 30 Jun 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-06-30。

1. 判断手机是安卓或者ios方法

1.1 添加判断机型方法（适用于Android和ios调用方法不一样）

// checkDeciveTyoe.js
function checkDevice() {
  // js判断是否是苹果设备
  function checkIsAppleDevice() {
      var u = navigator.userAgent,
          app = navigator.appVersion;
      var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      var iPad = u.indexOf("iPad") > -1;
      var iPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1;
      if (ios || iPad || iPhone) {
          return true;
      } else {
          return false;
      }
  }
  //js判断是否为Android设备
  function checkIsAndroidDevice() {
      var u = navigator.userAgent;
      if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) {
          return true;
      } else {
          return false;
      }
  }

  if (checkIsAppleDevice()) {
      return "ios";
  } else {
      return "Android";
  }
}
export default checkDevice;

1.2 页面中使用（vue）

// 引入检测机型方法
import checkDevice from "@/utils/checkDeviceType";
export default{
	data: { 
		phone: '',
		userInfo : {},
	};
	created(){
		this.phone = checkDevice();
		window.getAppUser = this.getAppUser // 接收ios返回的数据
	}，
	methods: {
	   handleQuit () {
  	   	 if (this.phone == "Android") {
      		 // 调用安卓的方法
      		 window.android.goToAppHome();
     	 } else {
      		 // 调用ios方法
      	  window.webkit &&
          window.webkit.messageHandlers &&
          window.webkit.messageHandlers.closeWebView &&
          window.webkit.messageHandlers.closeWebView.postMessage &&
          window.webkit.messageHandlers.closeWebView.postMessage(null);
          }
      	},
      	getAppUser (str) { // ios 接受用户基本信息
      		this.userInfo = JSON.parse(str) // 原生返回的是JSON格式 需要转成对象
    	},
	}
}

CSS 水平居中，垂直居中，水平垂直居中总结

Tue, 30 Jun 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-06-30。

1. 水平居中

  <div class="father">
    <div class="son">水平居中</div>
  </div>

1.  /* 行内元素 */
.father {
  text-align: center;
}
.son {
  background: red;
}

/* 块级元素 */
2. /* 已知宽度 */
.son {
  width: 200px;
  background: red;
  margin: 0 auto;
}
3. /* 未知宽度 */
.son {
  display: table;
  margin: 0 auto;
  background: red;
}

4. /* 转成行内元素 */
.father {
  text-align: center;
}
.son {
  display: inline-block;
}

5. /* flex布局 */
.father {
  display: flex;
  justify-content: center;
}

2. 垂直居中

 <div class="father">
    <div class="son">垂直居中</div>
 </div>

1. /* 单行文本 */
.father {
  height: 100px;
  background: red;
}
.son {
  line-height: 100px;
}

2. /* 多行文本 */
.father {
  height: 100px;
  background: red;
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

3. /* 块级元素 垂直居中 */
.father {
  background: yellow;
  height: 200px;
  display: flex;
  align-items: center;
}

4. /* 子绝父相 + 子top + 负margin */
.father {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
.son {
  background: red;
  width: 100px;
  height: 100px;
  line-height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

5. /* 子绝父相 子 margin: auto */
.father {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid #000;
}
.son {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: red;
}

6. /* 子绝父相 子transform */
.father {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid #000;
}
.son {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
  background: red;
}

3. 水平垂直居中

  <div class="father">
    <div class="son">水平垂直居中</div>
  </div>

/* 父元素 flex布局 */
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 子绝父相  子 margin: auto*/
.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/* 子绝父相 子transform  未知宽度*/
.father {
  position: relative;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* 子绝父相 子margin 已知宽度*/
.father {
  width: 200px;
  height: 200px;
  position: relative;
}
.son {
  width: 10px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;;
  margin-left: -50px;
}

/* table-cell */
.father {
  width: 200px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #000;
}

.son {
  background: green;
  display: inline-block;
}

/* display: flex-box 水平垂直终极方法 解决各种难题 */
.father {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: orange;
  text-align: center;
}
 
.son {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: red;
}

图片和span标签水平垂直对齐

Wed, 27 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-27。

HTML

<ul class="topUl">
  <li>
    <img src="@/assets/propertyPayCost.png">
    <span>物业缴费</span>
  </li>
</ul>

CSS

.topUl li {
  height: 60px;
  line-height: 60px;
}
.topUl img {
  width: 24px;
  margin-right: 8px;
  vertical-align: middle;
}
.topUl span {
  vertical-align: middle;
}

效果图

vue使用vant的list组件使用

Tue, 26 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-26。

模板代码

<van-pull-refresh
  v-model="refreshing"
  @refresh="onRefresh"
>
  <van-list
    v-model="loading"
    :finished="finished"
    :finished-text="finishedText"
    @load="pullupLoadMore"
    :immediate-check="false"
    :error.sync="error"
    error-text="请求失败，点击重新加载"
  >
    <ul
      v-for="(item,id) in allHouseDetail"
      :key="id"
    >
      <li @click="chooseRoom(item.roomAddress,item)">{{ item.roomAddress }}</li>
    </ul>
  </van-list>
</van-pull-refresh>

js代码

 data () {
    return {
      allHouseDetail: [], // 所有房屋数据
      loading: false, // 是否处在加载状态
      finished: false, // 是否完成加载
      finishedText: '', // 加载完毕文本提示
      page: 1, // 当前页码
      page_size: 100, // 每页多少条
      total: 0, // 总条数
      error: false, // 错误提示
	  refreshing: false, // 下拉刷新
    };
  },
methods: {
  getHouseDetail () {
  this.communityId = JSON.parse(localStorage.getItem('areaDetail')).areaId
  this.areaName = JSON.parse(localStorage.getItem('areaDetail')).areaName
  this.$http({
    method: 'post',
    url: '你的请求路径',
    data: {
      communityId: this.communityId,
      page: this.page,
      limit: this.page_size
    }
  }).then(res => {
try {
  if (res.returnCode == 10001) {
    if (this.refreshing) { // 下拉刷新
      this.allHouseDetail = [];
      this.refreshing = false;
    }
    if (this.page == 1) {
      this.loading = false
      this.allHouseDetail = res.data
      this.total = res.total;
    } else {
      this.loading = false
      this.allHouseDetail = this.allHouseDetail.concat(res.data)
      this.total = res.total;
    }
    if (res.data.length == 0) {
      this.finished = true;
      this.finishedText = '暂无数据';
    } else if (res.data.length < this.page_size) {
      this.finished = true;
      this.finishedText = '没有更多啦';
    }
  } else {
    Toast.fail(res.returnMsg);
  }
} catch {
  this.error = true;
  }
  })
},
pullupLoadMore () { // 上拉加载更多
  this.page++; 
  this.getHouseDetail();
},
onRefresh () { // 下拉刷新
  this.finished = false;
  this.loading = true;
  this.refreshing = true
  this.page = 1
  this.getHouseDetail();
},
}

遇到的问题

进入页面load事件就触发了

根据vant官方哪个提示，在模板中添加 :immediate-check=“false” 即可关闭初始化时改事件的触发

ps
今天才发现vant 的list组件对常见的使用问题下面有提示、

好了总结完毕！有什么问题可以留言一起交流下。

vue移动端长按事件触发删除按钮

Mon, 25 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-25。

利用移动端的touchstart touchend touchmove 事件结合实现长按事件的触发

<div
  class="item"
  @touchstart="gtouchstart(item, item.id, $event)"
  @touchmove="gtouchmove($event, item, item.id)"
  @touchend="gtouchend(item, item.id)"
>
<p
  class="cancel"
  v-show="item.show == 'true' && radio == item.id"
  @click="deleteHouse(item.isDefault)"
>删除</p>

gtouchstart (item, id, e) {
  this.phone = checkDevice();
  if (this.phone == "Android") {
    // 长按3秒 开始触摸
    this.timeOutEvent = 0
    this.timeOutEvent = setTimeout(() => {
      this.radio = id
      this.$set(item, 'show', 'true')
    }, 500)
  } else {
    this.moveDistance = 0 // 阻力滑动距离归0
    this.move = 0 // 移动距离归0
    this.startX = e.targetTouches[0].clientX // x轴归0
  }
},
gtouchmove (e, item, id) {
  this.phone = checkDevice();
  if (this.phone == "Android") {
    clearTimeout(this.timeOutEvent)
    this.timeOutEvent = 0
  } else {
    // 获取左滑的距离
    this.move = this.startX - e.targetTouches[0].clientX
    console.log(this.move)
    // move大于0，说明手指移动了
    if (this.move > 0) {
      // 阻止默认事件，因为有些app会有默认事件
      e.preventDefault()
      // 增加滑动阻力，尤为重要，如果不要这一步，上下滑动就会不经意触发左右滑动事件
      this.moveDistance = Math.pow(this.move, 0.8)
      // 设置滑动的最大距离，如果阻力滑动的距离大于按钮的宽度，就赋值为按钮的宽度
      if (this.moveDistance > this.distance) {
        // 如果滑动距离大于15 出现隐藏按钮
        this.radio = id
        this.$set(item, 'show', 'true')
      } else {
        // 滑动距离并没有超过按钮的一半，给我归位
        this.radio = ''
        this.$set(item, 'show', 'false')
      }
    }
  }
},
gtouchend (item, id) {
  this.phone = checkDevice();
  if (this.phone == "Android") {
    clearTimeout(this.timeOutEvent)
    this.timeOutEvent = 0
  } else {
    if (this.move == 0 && item.show == 'true') {
      // 触发点击事件
      this.$emit('deleteHouse')
    } else if (this.move > 0 && item.show == 'false') {
      // 如果滑动结束  滑动距离大于右侧按钮的一半  则出现按钮，否则隐藏按钮
      if (this.moveDistance > this.distance / 2) {
        this.radio = id
        this.$set(item, 'show', 'true')
      } else {
        // 滑动距离并没有超过按钮的一半，给我归位
        this.radio = ''
        this.$set(item, 'show', 'false')
      }
    } else {
      this.radio = ''
      this.$set(item, 'show', 'false')
    }
  }
},

实现的效果是长按一秒显示删除按钮

vue输入框使用模糊搜索

Mon, 25 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-25。

实现原理:
利用js的 indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置。

模板中的代码

<div class="search">
<!--输入框使用的是vant的输入框组件-->
	<van-search
       @input="autoSearch"
       v-model="value"
       placeholder="请输入搜索关键词"
       style="width:90%; display:inline-block;"
    />
       <span>搜索</span>
    </div>
<!--展示数据-->
<ul
	v-for="(item) in allArea"
    :key="item.communityId"
 >
    <li v-if="allNewArea.length != 0">{{ item.communityName }}</li>
     <li v-else>{{ item.communityName }}</li>
</ul>

js代码

	getAreaDetail () { // 获取数据
      this.$http({
        method: 'post',
        url: '/appProperty/getCommunity',
      }).then(res => {
        this.allArea = res.data
        this.allNewArea = res.data
      })
    },
    autoSearch () { // 模糊搜索加节流（500ms触发一次）
      var allowPass = true
      if (!allowPass) {
        return
      }
      setTimeout(() => {
        allowPass = false
        this.allArea = [];
        this.allNewArea.filter(item => {
          if (item.communityName.indexOf(this.value) !== -1) { // 此处也可使用js的 search 方法实现indexOf 一样效果
            this.allArea.push(item);
          }
        })
      }, 500);
    },

拓展

节流函数 节省流量节省内存性能的一种函数，可以理解为是一种性能优化方案

 //首先定义一个全局变量 当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
    var canRun = true;
    window.onresize = function () {
      if (!canRun) {
        return
      }
      canRun = false//设置一个定时器进行轮询操作
      setTimeout(function () {//这是要做的事情
        console.log("函数节流")//最后记得重新赋值true继续让他取反
        canRun = true//每隔1000毫秒也就是1秒钟就执行一次
      }, 1000)
    }

防抖函数 当事件触发完成之后再延迟触发，并且只触发一次；如果在触发完成之前再次触发，则会再次刷新延迟

//定义方法即要做的事情
 function fun(){
   console.log('onresize')
 }
//定义事件触发要执行的方法，两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce (fn, delay) {　　//定义一个变量作为等会清除对象
  var handle;　　//这里用到了闭包，一个函数里面return另一个函数，变量相互牵引导致垃圾回收机制不会销毁handle变量
  return function () {　　　　　　//在这里一定要清除前面的定时器，然后创建一个新的定时器
    clearTimeout(handle) 　　　　　　//最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发（这里的变量赋值是跟定时器建立连接，进行地址赋值，一定要重新赋值给handle  
    handle = setTimeout(function () {
      fn()
    }, delay)
  }
}
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 500));

两者区别

防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案；
防抖函数在一个时间被触发多次，只有最后一次生效
节流函数n秒后触发一次，n秒内触发后，定时器重新计时

js数组求和方法

Wed, 20 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-20。

方法一：for循环遍历每一项相加

 function sumArr (arr) {
      var sum = 0;
      for(var i = 0;i<=arr.length;i++){
    	sum += arr[i];
    	// 若果不是数字类型  
    	// sum += +arr[i];
   	 }
  return sum;
}

方法二：es6的forEach方法

function sumArr (arr) {
	var sum = 0;
    arr.forEach(function(val){
    	sum += val;
    })
    return sum;
}

方法三：eval（）

//直接把他变成各个数的加法运算字符串
function sumArr(arr){
	return eval(arr.join("+")) 
}

方法四：函数式编程写法

array.reduce(function(prev, current, currentIndex, arr), initialValue)

prev：函数传进来的初始值或上一次回调的返回值
current：数组中当前处理的元素值
currentIndex：当前元素索引
arr：当前元素所属的数组本身
initialValue：传给函数的初始值

function sumArr(arr){
	return arr.reduce(function(prev,cur){
        return prev + cur;
    },0);
}

CSS文字自动换行

Tue, 19 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-19。

word-break属性:

normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

white-space属性:

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

<div>
   <span>户号</span>
   <span class="tar">碧桂园龙城13号楼1单元201室扣篮大赛放假快乐大数据反馈了大数据发</span>
</div>

.tar {
  // 必须设置宽度
  width: 270px;
  word-break: break-word;
  white-space: pre-line;
}

效果：

vue页面刷新文本框自动获取焦点

Fri, 15 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-15。

使用Vue.nextTick实现进入页面文本框自动获取焦点

场景:页面加载时需要让文本框获取焦点
用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

<input type="text" ref="inputs">

mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
  this.$nextTick(() => {
    this.$refs.inputs.focus() //通过 $refs 获取dom 并绑定 focus 方法
  })
}

vue.config.js 常用配置总结

Wed, 13 May 2020 00:00:00 GMT

本文同步自 CSDN · 清阿哥，原文发布于 2020-05-13。

第一次写博客，哈哈哈。。。

1. publicPath

部署应用包时的基本 URL

publicPath:' ' 或者 publicPath:'./'

2. outputDir

打包生成文件出口

outputDir: 'dist'

3. asstsDir

放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

3. indexPath

指定输出路径相当于outputDir，绝对路径

idnexPath: 'index.htnl'

4. filenameHashing

无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希

5. pages

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

6. lintOnSave

开发环境下通过 eslint-loader 在每次保存时 lint 代码

lintOnSave: 'warning' / 'true' 
将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败
module.exports = {
  devServer: {
    overlay: { // 同时显示警告和错误
      warnings: true,
      errors: true
    }
    // 生产环境禁用
    module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
	}
	// 或者
	lintOnSave: 'false'
  }
}

7. productionSourceMap

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建

// 默认
productionSourceMap: true

8. css.extract

Default: 生产环境下是 true，开发环境下是 false

9. devServer.proxy

解决前端跨域

// vue.config.js 文件
module.exports = {
  devServer: {
proxy: {
      '/api': {
        target: 'http://192.168.30.31:30010', //接口请求的地址
        changeOrigin: true, // 表示是否跨域
        // ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          '^/api': '', // 将'/api' 重写为'',这里用'/api'代替target里面的地址,再接口其前面加上 /api
        }, // 例如 请求的路径是 'http://xxxx:30010/chargingpile-app/charging_pile_user/login' 组件中可以写成 '/api/charging_pile_user/login'
      		 },
    	},
	}
};

10. 出现的问题

// 如果加上这段代码启动项目后的Local和Network地址都会变成Local的地址，删除这行代码即可恢复正常
devServer: {
   host: "localhost",
}

清哥的小屋

前端工程师养成计划：从入门到面试，一站式学习资源全导航

前端工程师养成计划：从入门到面试，一站式学习资源全导航

一、 学前准备：环境搭建

二、 基础入门：核心三件套

三、 框架与工程化

四、 学习平台与社区

五、 综合资源与进阶学习

六、 开发工具

七、 AI 提效

八、 面试准备

学习路径建议

Vue 开发中常用的工具函数 强烈建议收藏！

1. 防抖函数

2. 节流函数

3. 检查当前设备类型

4. js 操作 Class 类名相关

5. requestAnimationFrame 实现的节流函数

6. 监听元素变化（大小）

7. 为 DOM 元素添加/移除大小变化监听器

8. 本地存储 sessionStorage localStorage 使用封装

9. js-cookie 使用封装

10. 获取当前环境变量

【前端面试】面试官：纯前端如何实现录屏并保存视频到本地？

navigator.mediaDevices

MediaRecorder

完整代码

diff

vue2之 vue-i18n 插件报错-Uncaught TypeError: Cannot read properties of undefined (reading ‘0‘)

1. 前言

2. 问题

3. 解决过程

4. 代码

google 浏览器出现 ERR_PROXY_CONNECTION_FAILED 无法访问网络

1. 问题

2. 解决方法

获取当天，本周，本月，本季度，本半年，本年时间

1. 使用场景

2. 方法

el-form之表单校验自动定位到报错位置

1. 背景

2. 实现思路

3. 实现代码

5. 拓展（踩坑…）

6. 结语

js 合并两个二维数组成为数组对象

使用场景

模板代码

js 代码

css 完美解决图片变形问题

vue 中使用节流和防抖

1. 节流-方法1

2. 防抖

3. 组件中使用

elementui el-pagination 分页组件封装

一. 后端分页

二. 前端实现分页

ElementUI upload 组件封装

1. 模板代码

2. js代码

3. css 代码

4. 组件中使用

5. 效果图

vue pdf 预览下载功能 vue-pdf

1. 下载 vue-pdf 插件

2. 所需页面引入 vue-pdf

3. js 代码

Elementui el-input 输入框校验以及表单校验

一. 常用的 element-ui el-input 输入框

1. 过滤字母e，在js中属于数字，但是正则匹配 \d 是拦不住字母e 的

2. 只能输入正整数

3. 只允许输入数字和小数 / 数字和空格

4. 只允许输入正整数且不能以0开头

4. 允许输入小数点后几位

5. 设置范围，最大值，最小值

6. form 表单中校验输入框只能输入数字和两位小数

7. 禁止 / 只允许 输入中文

8. 只允许输入数字和英文

9. 禁止输入特殊字符

10. 只允许输入英文

一、学前准备：环境搭建

二、基础入门：核心三件套

三、框架与工程化

四、学习平台与社区

五、综合资源与进阶学习

六、开发工具

八、面试准备

Vue 开发中常用的工具函数强烈建议收藏！

7. 禁止 / 只允许输入中文

13. 设置密码校验(限制输入 8-20位数字字母特殊符号任意两种类型组合)

15.1 在元素上使用 v-if 条件渲染分组