HiDocs
Search K

Appearance

1.动态图标路径 ​

这样设计的原因：因为每个侧边栏选项的对象都有一个 iconUrl 属性，本身是直接渲染为 ant-icon标签的，但是这里我们用的 element，所以选择使用 img 来代替，并且把图标本地存储，所以需要设置动态的路径！

html
<el-submenu v-if="itemObj.childList.length" :index="indexObj.toString()">
	<template slot="title">
		<img
			v-if="itemObj.iconUrl"
			:src="getIcon(itemObj.iconUrl)"
			style="margin-right:5px"
		/>
		<span>{{ itemObj.title }}</span>
	</template>
	<el-menu-item
		v-for="(item, index) in itemObj.childList"
		:key="index"
		:index="indexObj + '-' + index"
		@click="() => handle(item)"
	>
		{{ item.title }}
	</el-menu-item>
</el-submenu>
js
getIcon(url) {
  return new URL(`../../assets/images/navIcon/${url}.jpg`, import.meta.url)
	.href;
}

URL 对象：为啥这里构造链接返回的是一个 URL 对象的 href 属性呢？——> 其实本质上直接字符串拼接也是可以的！

在 JavaScript 中，使用 URL 对象的写法通常是为了更方便地处理和操作 URL 路径。使用 URL 对象相比直接使用字符串有一些优势：

  1. 统一的 API：URL 对象提供了一组用于处理 URL 的标准 API，例如 searchParams 属性可以方便地获取和修改 URL 中的查询参数，pathname 属性可以获取 URL 的路径部分等等。这些 API 可以帮助开发者更轻松地对 URL 进行解析和处理。

  2. 安全性：使用 URL 对象可以帮助避免手动拼接 URL 时引入的错误和安全漏洞。URL 对象会自动处理 URL 的编码和格式化，确保生成的 URL 是符合规范的。

  3. 相对路径处理：URL 对象对于相对路径的处理更加灵活。在处理相对路径时，它会根据当前页面的 URL 来解析相对路径，确保得到正确的绝对路径。

  4. 扩展性：URL 对象支持很多附加的方法，例如 URLSearchParams 对象用于处理 URL 中的查询参数，URL.createObjectURL 用于生成 Blob URL 等。这些功能在特定场景下非常有用。

虽然在某些情况下，直接使用字符串来表示 URL 也是可以的，但使用 URL 对象更为推荐，特别是在处理复杂的 URL 操作时，这样可以更清晰地表达代码的意图，减少错误，并且提供更多便利的功能。

js
const url = new URL("https://example.com/search?query=keyword&page=1");

// 获取查询参数部分的URLSearchParams对象
const searchParams = url.searchParams;

// 获取单个查询参数的值
const keyword = searchParams.get("query");
const page = searchParams.get("page");

2.el-popover 弹出框和 el-tooltip 文字提示的使用策略 ​

el-popover 弹出框

里面必须用插槽 slot="reference"，最好是写 el-button，普通标签一般不可以！否则里面无法渲染内容

html
<el-button slot="reference"> </el-button>

el-tooltip 文字提示

el-tooltip 文字提示 里面必须有标签，不能直接写内容，否则里面无法渲染内容 3.支付轮询

4.input 框的输入值对 tree 过滤时进行防抖处理 ​

js
//放在最外层即可（可以不写在export default里面）
const debounce = (function() {
  let timer = 0;
  return function(func, delay) {
    clearTimeout(timer); //再次触发就重启定时器
    timer = setTimeout(func, delay);
  };
})();

// 点击搜索
searchTreeData() {
  let val = this.filterAgentTextClass;
  if (this.showAgentDropDown) {
	this.isShowTree = false;
	//防抖处理函数
	debounce(() => {
	  this.isShowTree = true;
	  this.$nextTick(()=>{ //更新isShowTree这个变量之后再进行操作
		this.$refs.agentClassTree.filter(val);
	  })
	}, 300);
	if (val != "") {
	  this.$set(this.agentTreeData[0], "disabled", true); //如果没有输入值，那么就让整个树都无法被选择
	} else {
	  this.isExpand = false;
	  this.$set(this.agentTreeData[0], "disabled", false); //如果有输入值，那么就让整个树可以被选择
	}
  }
},

注意：这里的 tree 数据结构，是我们自己新增了一个全选的根节点

js
let tree = [
	{
		title: "全选",
		children: CampusTree,
		key: "whole10000",
	},
];
this.agentTreeData = tree;

5.$nextTick 的使用场景 ​

明确：vue 中的 data 赋值是异步的

在Vue.js中，data赋值是异步的。当您在Vue组件中修改data中的值时，Vue会将这些修改操作放入一个队列中，在下一个事件循环中执行。这样做是为了优化性能，避免不必要的DOM更新，以及在同一事件循环中频繁更新DOM导致的性能问题。

Vue中的数据响应式更新是通过使用Object.defineProperty来实现的，它会将data中的每个属性转换为getter和setter，这样当属性被读取或修改时，Vue可以捕获这些操作并触发相应的更新。

因为数据更新是异步的，所以在同一事件循环中多次修改同一个属性，Vue会合并这些修改，只触发一次更新。这样可以减少不必要的DOM操作，提高性能。

如果您需要在data赋值后立即获取最新的数据，可以使用this.$nextTick()方法，该方法会在DOM更新之后执行回调函数，确保在数据更新后获取到最新的值。

以下是一个示例说明异步的情况：

html
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Updated Message";
      console.log(this.message); // 打印的可能是 "Hello" 或 "Updated Message"
      this.$nextTick(() => {
        console.log(this.message); // 打印的是 "Updated Message"
      });
    },
  },
};
</script>

在上述代码中，当点击按钮Change Message时，this.message的值会被异步修改。在this.message = "Updated Message";这行代码后立即打印this.message的值，可能是"Hello"或"Updated Message"，因为数据更新是异步的。而在this.$nextTick()的回调函数中，this.message的值会确保是"Updated Message"，因为在这个时候DOM已经更新完毕。

6.让 nowarp 的文本向左溢出的策略direction: rtl; ​

css
width: 20%;
white-space: nowrap;
text-align: right;
padding-left: 10px;
direction: rtl; /*direction: rtl;将文本方向设置为从右向左，从而实现文字向左溢出*/

注意：direction: rtl;会影响伪类元素:before和:after的位置，会进行交换

并且direction: rtl;只能作用于块级元素如 div 等

7.empty-text在表格里面不生效 ​

注意：empty-text属性是用在 table 上面的，而不是用在el-table-column上的，而且只是指示整体没有数据，而不是某一列！

表格里面一边只能|| "-"这样才可以！

8.concat 和…运算符对比 ​

concat()方法是用于合并多个数组或值，它创建一个新的数组并将合并后的元素添加到新数组中。在合并多个数组时，concat()方法的性能可能会受到合并数组数量的影响。如果需要合并多个数组，concat()方法会创建一个新的数组，并将所有合并后的元素逐个添加到新数组中，因此在合并大量数组时，可能会导致性能下降。

扩展运算符（...）是ES6中的一个语法特性，可以用于将数组展开为单独的元素。对于合并多个数组，扩展运算符通常比concat()方法更为简洁，并且不会创建新的数组。它只是将多个数组的元素展开，并将它们直接插入到一个新的数组中。这可能在一些场景下更高效。

9.在 h5 中进行轮询支付的策略 ​