微4e

vant-ui使用搜索框出现两个清除按钮

yang — Fri, 20 Mar 2026 15:45:00 +0800

 //  隐藏浏览器原生 input[type=search] 的清除按钮，只保留 Vant 的
        :deep(.van-field__control[type="search"]::-webkit-search-cancel-button) {
          -webkit-appearance: none !important;
        }

VScode翻译软件

yang — Thu, 11 Sep 2025 11:13:00 +0800

网址参考:https://blog.csdn.net/qq_57404736/article/details/147049359

1.申请百度开发者平台账号

2.往下翻，选择通用文本翻译

3.选择立即使用

4.申请完以后，右上角进入选择开发者信息

5.翻到下面，将自己要调用api(本地电脑)的外网IP粘贴进来

VScode设置
1.组件默认的翻译是google，我们可以修改其他翻译源，以下是可以选择的百度翻译源

2.注意，也要在.vscode->settings.json中添加如下配置，如果少了哪个，注意添加下

"i18n-ally.translate.engines": ["baidu"], // 翻译器，第一个不行会尝试后面的
// 插件将以何种语言作为基准来进行翻译相关的操作，如果你正在开发一个多语言应用，并且原始文案是用英语编写的，你可以将`sourceLanguage`设置为`en`（代表英语）。这样，插件就知道在提取文案进行翻译或者在代码中关联不同语言的文案时，以英语文案为原始参考。
"i18n-ally.translate.baidu.appid": "你在百度申请的appid", // 翻译器api-appid
"i18n-ally.translate.baidu.apiSecret": "你在百度申请的appSecret", // 翻译器api-Secret
"i18n-ally.sourceLanguage": "zh-CN",
"i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested：嵌套式  flat:扁平式)

插件配置
点击左侧i18n Ally菜单栏->翻译进度，可以看到中文(100%)，英文(0%)

图片转码(vue3)

yang — Thu, 07 Aug 2025 15:11:00 +0800

项目要实现一个上传图片的功能，后端需要base64的格式。使用图片转base64格式，再发给后端，后端只需将转码结果存入数据库即可，前端调用接口获取到base64数据转码后的数据。再写入img src 标签即可。

HTML部分

逻辑部分

/**上传----------------------------start */
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus';
const fileList = ref([]);
const fileType = ref(['png', 'jpg', 'jpeg']);
const upload = ref();
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

//图片验证
const handleOnChange = async (file: any) => {
  //选择图片验证
  if (!beforeAvatarUpload(file.raw)) {
    proxy?.$modal.msgError(`文件格式不正确, 请上传${fileType.value.join('/')}图片格式文件!`);
    upload.value!.clearFiles();
    return false;
  }
  form.value.iconUrl = await beforeUpload(file.raw);
};

// 上传之前的验证
const beforeAvatarUpload = (file: any) => {
  let isImg = false;
  if (fileType.value.length) {
    let fileExtension = '';
    if (file.name.lastIndexOf('.') > -1) {
      fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
    }
    isImg = fileType.value.some((type: any) => {
      if (file.type.indexOf(type) > -1) return true;
      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      return false;
    });
  } else {
    isImg = file.type.indexOf('image') > -1;
  }
  return isImg;
  // if (!isImg) {
  //   proxy?.$modal.msgError(`文件格式不正确, 请上传${fileType.value.join('/')}图片格式文件!`);
  //   return false;
  // }
};

// 上传图片删除回调
const handelOnRemove = (file: any) => {
  fileList.value = [];
  form.value.iconUrl = '';
};

// 将文件流转为base64数据
const beforeUpload = (file: File) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      const base64Data = (reader.result as string).split(',')[1]; // 去掉前缀
      resolve(base64Data); // 返回不带前缀的 Base64 字符串
    };
    reader.onerror = (error) => {
      reject(error);
    };
  });
};

// 将 Base64 数据转换为 Blob 对象
function base64ToBlob(base64: string): Blob {
  const byteStr = atob(base64);
  const u8Arr = new Uint8Array(byteStr.length);
  for (let i = 0; i < byteStr.length; i++) {
    u8Arr[i] = byteStr.charCodeAt(i);
  }
  return new Blob([u8Arr]);
}

// 将 Blob 对象转换为 URL
const Base64ToUrl = (baseStr: any) => {
  const blob = base64ToBlob(baseStr);
  const url = URL.createObjectURL(blob);
  return url;
};
/**上传----------------------------end */

实现

编辑时的操作

  fileList.value = [
      {
        name: '',
        url: Base64ToUrl(form.value.iconUrl) // 如果 iconUrl 为空，则使用默认路径
      }
    ];

vue3 前端引入 markmap 思维导图，通过markdown解析成思维导图实现思路及方法

yang — Fri, 07 Feb 2025 14:08:00 +0800

1.下载插件

npm i --save-dev @types/file-saver

npm install file-saver

npm install html-to-image

npm install markmap-lib

npm install markmap-view

npm install markmap-common

2.创建页面

3.引用组件

el-form表单校验规则,使用于element、element-plus、ant-design-vue组件

yang — Fri, 29 Nov 2024 17:04:00 +0800

一、多个变量控制某一项校验。

简单代码：重点在于prop="zdxx"自定义绑定和自定义校验事件

let formData = ref({
  virtualMachineName: undefined,
  // zdxx: [],
  supportSiteAFlag: false,
  siteAIp: undefined,
  supportSiteBFlag: false,
  siteBIp: undefined,
})

const isSite = (rule, value, callback) => {
  if (!formData.value.supportSiteAFlag && !formData.value.supportSiteBFlag) {
    callback(new Error('请选择站点信息'))
  } else {
    callback()
  }
}

const rules = reactive({
  virtualMachineName: [{ required: true, message: '请输入云主机名称', trigger: 'blur' },],

  zdxx: [{ required: true, validator: isSite, trigger: 'change' },],
  // supportSiteAFlag: [{ required: true, validator: isSite, trigger: 'change' },],
  siteAIp: [{ validator: isIp1, trigger: 'blur' },],
  // supportSiteBFlag: [{ required: true, message: '请选择备调', trigger: 'change' },],
  siteBIp: [{ validator: isIp2, trigger: 'blur' },],
})

二、新增和删除表单项，动态校验。

以下代码可直接复制：重点在于:prop :rules :key。
公式：动态校验项的v-model的绑定值 = el-form的属性 :model的值 + '.' + :prop属性的值

根据公式倒推 :prop
例如：v-model=“domain.premium” 就是 dynamicValidateForm.premiumList[index].premium ，而且:model=“dynamicValidateForm”
所以得到 :prop = ‘premiumList.’ + index + ‘.premium’

同时注意：直接在el-form-item上写动态的校验规则:rules=

三、el-form表单校验v-if不生效、el-form表单校验v-show不生效：

例如有个表单项，通过控制显示两个不同的表单项内容，分别需要校验对应的表单项即可。

如果是直接用v-if，会发现切换时候，校验不生效；

如果直接使用v-show，又发现即使不切换，隐藏了另外的表单项，也会触发校验规则。

正确做法是：使用v-if控制表单项的显示隐藏，同时需要给el-form-item加上自己的 prop=" " 和 key=" " ，这样才能区分。当然:rules 也要有自己对应的提示。

浏览器有哪几种缓存，各种缓存的优先级是什么样的？

yang — Wed, 27 Nov 2024 16:45:00 +0800

一、在浏览器中，常见的有四种缓存

1、强制缓存

通过设置 Cache-Control 和 Expires 等响应头实现，可以让浏览器直接从本地缓存中读取资源而不发起请求。

2、协商缓存

通过设置 Last-Modified 和 ETag 等响应头实现，可以让浏览器发送条件请求，询问服务器是否有更新的资源。如果服务器返回 304 Not Modified 响应，则表示客户端本地缓存仍然有效，可直接使用缓存的资源。

3、Service Worker 缓存

Service Worker 是一种特殊的 JS 脚本，可以拦截网络请求并返回缓存的响应，以实现离线访问和更快的加载速度等功能。

4、Web Storage 缓存

包括 localStorage 和 sessionStorage。localStorage 用于存储用户在网站上的永久性数据，而 sessionStorage 则用于存储用户会话过程中的临时数据。

二、常见缓存的优先级如下：（从高到低）

① Service Worker 缓存

由于其可以完全控制网络请求，因此具有最高的优先级，即使是强制缓存也可以被它所覆盖。

② 强制缓存

如果存在强制缓存，并且缓存没有过期，则直接使用缓存，不需要向服务器发送请求。

③ 协商缓存

如果强制缓存未命中，但协商缓存可用，则会向服务器发送条件请求，询问资源是否更新。如果服务器返回 304 Not Modified 响应，则直接使用缓存。

④ Web Storage 缓存

Web Storage 缓存的优先级最低，只有在网络不可用或者其他缓存都未命中时才会生效。

工具代码(持续更新)

yang — Wed, 20 Nov 2024 15:36:00 +0800

1.去除后端返回的html标签

 // 去除后端返回的html标签
    stripHtml(html) {
      const tempDiv = document.createElement("div");
      tempDiv.innerHTML = html;
      return tempDiv.innerText || tempDiv.textContent || "";
    }

使用:

2.存储数据及取用数据

最好写在utils下边,命名local.js

export default {
  // 获取本地存储的数据
  get(key) {
    return JSON.parse(localStorage.getItem(key));
  },

  // 设置本地存储中的数据
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },

  // 清除本地存储
  clear() {
    localStorage.clear();
  }
};

存储:

    godownClick(row) {
      if (row.headerIds.includes(String(this.nickID))) {
        local.set("GodownInfo", row); //存储
        this.$router.push({
          path: "/material/materials/goods-shelves" //跳转到货架管理
        });
      } else {
        this.$message.warning("你不是此仓库的负责人,无法查看该仓库 !");
        return;
      }
    },

使用：

  mounted() {
    this.infoRow = local.get("GodownInfo"); //取用
  },

3.防抖

/**
 * 防抖
 * @param {*} fn //一个需要进行防抖处理的原函数fn
 * @param {*} delay //延迟执行的时间delay（单位为毫秒）
 * @returns 
 * import { debounce, throttle } from "@/utils/yuUtils.js";
 *  debounce_sureDialogTransferClick: debounce(function (val) {
      this.sureDialogTransferClick(val);
    }, 800),
 */
export function debounce(fn, delay) {
  let timer = null;

  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

使用：

 // 防抖(判断调用)
    debounce_onConfirm: debounce(function (type) {
      if (type === "save") {
        this.changeInfo();
      } else {
        this.onConfirm();
      }
      //this.onConfirm();
    }, 500),

      debounce_getComfirm: debounce(function () {
      this.getComfirm();
    }, 500),

4.节流

/**
 * 节流
 * @param {*} fn //一个需要进行防抖处理的原函数fn
 * @param {*} delay //延迟执行的时间delay（单位为毫秒）
 * @returns
 */
export function throttle(fn, delay) {
  let canRun = true;

  return function (...args) {
    if (!canRun) return;

    canRun = false;
    setTimeout(() => {
      fn.apply(this, args);
      canRun = true;
    }, delay);
  };
}

5.el-input需要数值时不能为负数

防止手输入负数

 rules: {     
        amount: [
          { required: true, message: "请选择数量", trigger: "change" },
          { pattern: /^[0-9|^\\.]/, message: "数量不能为负数" }
        ],       
        unitPrice: [{ pattern: /^[0-9|^\\.]/, message: "单价不能为负数" }]
},

6.根据后端返回标签内的字段高亮并且在渲染是去除html标签

// 处理 HTML 内容，先保留  标签内容背景色，再去除其他标签
const stripHtml = (html) => {
  // 创建一个临时容器
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;

  // 找到所有  标签并设置其样式
  const emTags = tempDiv.getElementsByTagName('em');
  Array.from(emTags).forEach((em) => {
    // 用 span 替代  标签并设置背景色
    const span = document.createElement('span');
    span.style.backgroundColor = '#eff4ff';
    span.style.padding = '2px';
    span.style.borderRadius = '4px';
    span.style.color = '#6698ff';
    // span.style.fontWeight = 'bold';
    span.innerHTML = em.innerHTML; // 将  标签中的内容放入  中
    em.replaceWith(span); // 替换  标签为 
  });

  // 返回处理过的 HTML 内容（将其他标签移除，只保留纯文本和带样式的 ）
  return tempDiv.innerHTML;
};

7.table滚动加载(vue3)

const tableHeight = ref(0); onMounted(() => { apiFilesTreeQuery(); tableHeight.value = window.innerHeight - 98; window.onresize = () => { //浏览器窗口变动的时候 tableHeight.value = window.innerHeight - 98; }; }); const scrollTableDom: any = ref(''); onMounted(() => { // 查找表格滚动区域的 DOM 元素，并将其赋值给 scrollTableDom scrollTableDom.value = document.querySelector('.scrollTable .el-table__body-wrapper .el-scrollbar__wrap'); // 为该元素添加 'scroll' 事件监听器，滚动时调用 handleTableScroll 函数 scrollTableDom.value.addEventListener('scroll', handleTableScroll); }); onUnmounted(() => { // 在组件销毁时清除存储的 'expandedKeys' 数据 sessionStorage.removeItem('expandedKeys'); // 移除滚动事件监听器，避免内存泄漏 scrollTableDom.value.removeEventListener('scroll', handleTableScroll); }); //计算到最低端的滚动条位置(debounce 防抖方法) const handleTableScroll = debounce((event) => { // 获取触发事件的目标 DOM 元素，即滚动容器 const table = event.target; // 计算滚动条距离底部的距离 const scrollPosition = table.scrollHeight - table.scrollTop - table.clientHeight; // console.log('🚀 ~ handleTableScroll ~ scrollPosition:', scrollPosition); // 如果滚动条距离底部小于等于 5 像素，表示用户已接近底部 if (scrollPosition <= 5) { apiTreeFileSelectTreePage(''); // console.log(1234); } }, 300);

7.el-autocomplete下拉加载更多(vue3)

取消

.page_vue1 { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 6px; border-bottom: 1px solid #eee; } .searchInput { height: 300px; border: none; width: 100%; } .content_box { width: 170px !important; border-bottom: 1px solid #efefef; } .searchInput_name { width: 100%; display: flex; align-items: center; div { // width: 10px; overflow: hidden; /*内容超出后隐藏*/ text-overflow: ellipsis; /*超出内容显示为省略号*/ white-space: nowrap; /*文本不进行换行*/ } } .search_docContent { font-size: 12px; color: #939292; line-height: 22px; } .superiorsPath { font-size: 12px; color: #d6d6d6; line-height: 22px; text-align: right; overflow: hidden; /*内容超出后隐藏*/ text-overflow: ellipsis; /*超出内容显示为省略号*/ white-space: nowrap; /*文本不进行换行*/ }

/**搜索----start */ const autocompleteRefs = ref(); const searchInput = ref(''); const searchStr = ref({ page: 0, pageCount: null, list: [] }); const suggestions = ref([]); // 用来存储 suggestions 数据 const searchLoading = ref(false); //用于搜索的滚动加载 const selectedItem = ref(null); const isSearchMore = ref(true); /**搜索----end */ //搜索 const querySearch = (queryString, cb) => { if (searchInput.value == '' && searchInput.value != undefined) { cb([]); return; } searchStr.value.page = 0; let oParam = { type: props.pageType, size: 20, realName: searchInput.value, page: searchStr.value.page }; ApiPerselectPersonalTreePage(oParam).then((res: any) => { searchStr.value.page += 1; searchStr.value.pageCount = res.data.pageCount; searchStr.value.list = res.data.children; if (res.data.totalCount == 0) { ElMessage.warning('未匹配到数据,请重新输入!'); } // 调用 callback 返回建议列表的数据 cb(res.data.children); }); }; // 滚动加载 const querySearchLoad = debounce(() => { if (searchStr.value.page > searchStr.value.pageCount) { // this.divider = true; return; } if (!searchLoading.value) { searchLoading.value = true; let oParam = { type: props.pageType, size: 20, realName: searchInput.value, page: searchStr.value.page }; ApiPerselectPersonalTreePage(oParam).then((res: any) => { searchLoading.value = false; searchStr.value.page += 1; searchStr.value.pageCount = res.data.pageCount; autocompleteRefs.value.suggestions = autocompleteRefs.value.suggestions.concat(res.data.children); //加载出来的数据放到suggestions中 }); } }, 300);

el-input的失焦事件及el-table的移入移出事件

yang — Tue, 19 Nov 2024 11:18:00 +0800

设置了:row-class-name="tableRowClassName" ，添加index和 @row-click="cellClick" 行点击事件
表格部分添加 row-key="boxId",需要唯一值

这里主要采用v-show来控制显示与隐藏

获取到数据时遍历，添加showDeleteIcon来控制视图的显示

// 展开事件----动态获取内嵌表数据 expandChange(row, expandedRows) { let oParam = { materialId: row.materialId }; if (expandedRows.length > 0) { ApiRecordQuantity(oParam).then((res) => { if (res.code === "200") { // 处理子表数据，增加 isShow 和 inputVal 字段 this.sonData = res.rows.map((item) => ({ ...item, isShow: false, // 默认隐藏输入框 inputVal: 0, // 默认数量为 0，用户可以编辑 materialId: oParam.materialId, // 将 materialId 传递到 sonData 中 showDeleteIcon: false // 默认不显示删除图标 })); // console.log("🚀 ~ this.sonData=res.rows.map ~ sonData:", this.sonData); // this.calculateTotalVal(row); } }); } },

悬浮在某行时，显示内容

主要增加了两个事件@cell-mouse-enter="hoverRow"移入事件和@cell-mouse-leave="leaveRow"移出事件

中间同样采用showDeleteIcon来控制其显示和隐藏

移入移出的话就相对简单了，只需要将移入的视图更新即可
别的不需要进行更新

tableRowClassName({ row, rowIndex }) { //把每一行的索引放进row row.index = rowIndex; }, // 移入效果 hoverRow(row) { if (row.isShow == true || row.appliedQuantity > 0) { row.showDeleteIcon = false; } else { row.showDeleteIcon = true; //显示 this.$set(this.sonData, row.index, row); //更新数据 } }, // 移出效果 leaveRow(row) { row.showDeleteIcon = false; this.$set(this.sonData, row.index, row); },

input失焦事件:

//点击表格单前行 cellClick(row) { //聚焦input this.$nextTick(() => { this.$refs.sortNumRef.$refs.input.focus(); }); row.showDeleteIcon = false; this.$set(this.sonData, row.index, row); row.isShow = true; // 隐藏输入框 }, // 输入时处理 handleInputChange(row) { const minValue = 0; // 最小值 const maxValue = row.quantity; // 最大值（根据 `scope.row.quantity`） // 如果输入值小于最小值，设置为最小值 if (row.inputVal < minValue) { row.inputVal = minValue; } // 如果输入值大于最大值，设置为最大值 if (row.inputVal > maxValue) { row.inputVal = maxValue; } }, //input失焦处理 handleBlur(row) { row.showDeleteIcon = false; this.$set(this.sonData, row.index, row); row.isShow = false; if (row.inputVal > 0) { row.appliedQuantity = row.inputVal; // 设置已申请数量 row.outboundStatus = "2"; // 更新状态为已领取 //row.isShow = false; // 隐藏输入框 } }

form表单页面修改及保存

yang — Mon, 11 Nov 2024 09:33:00 +0800

进入页面是全部为禁用,点击修改时解除禁用表单,最后保存信息

基本设置 {{ Editdisabled ? '修改信息' :'保存信息' }}

data() { return { Editdisabled: true, contenteditable: false, gutter: 14, Editform: { // headers: "", // headerName: [], roomArea: "", name: "", number: "", roomRemarks: "" }, saveButtonType: "primary", //保存（修改）type颜色 }; }, methods: { // 修改信息或保存信息 toggleEdit(formName) { if (this.Editdisabled) { this.Editdisabled = false; this.contenteditable = true; this.saveButtonType = "success"; } else { this.$refs[formName].validate((valid) => { if (valid) { this.contenteditable = false; this.Editdisabled = true; this.saveButtonType = "primary"; this.addFileBox(); //保存方法 //调用页面数据刷新 // this.$EventBus.$emit("yzp_getRoomAll_Refresh"); } else { return false; } }); } }, //保存信息 addFileBox() { let oParam = { id: this.infoRow.id, name: this.Editform.name, number: this.Editform.number, // headerIds: this.Editform.headers, roomArea: this.Editform.roomArea, roomArea: this.Editform.roomArea, roomRemarks: this.$refs.RemarksRefs.getContent() //获取富文本内容 }; ApiroomUpdate(oParam).then((res) => { if (res.code == "200") { this.$message.success("编辑成功 !"); } }); },

后端返回数据是带着html标签,渲染时不需要

yang — Wed, 30 Oct 2024 17:24:00 +0800

返回数据如下:

解决如下:

methods: { // 去除html标签 stripHtml(html) { const tempDiv = document.createElement("div"); tempDiv.innerHTML = html; return tempDiv.innerText || tempDiv.textContent || ""; }, },

使用:

微4e