HiDocs

1.借助 boolean 值变量动态为 dom 添加删除样式表

html

<div :class="{'is-reverse': showAgentDropDown}"></div>

:class 绑定指令用于动态设置元素的类。在绑定中使用对象语法，其中键是类名，值是布尔表达式。当 showAgentDropDown 为 true 时，类名 'is-reverse' 将被添加到元素的类列表中。如果 showAgentDropDown 为 false，则该类名将从类列表中移除。

css样式：

css

.is-reverse {
  transform: rotate(180deg);
}

如果直接用 style 设置旋转：

html

<div style="transform: rotate(180deg);"></div>

2.不要重复导出api 定义的方法

要么在 const 前面加 export，要么写在最后的 export 中：

您需要确保只有一个地方导出了"queryAllAgentTypes"函数。请检查代码并删除重复的导出语句，以确保每个导出的名称都是唯一的。

3.es6 的 export 和 import 常用策略

ES6 的模块系统中，有两种常用的导出（export）和导入（import）的策略：命名导出和默认导出。

命名导出（Named Exports）：

在模块中，使用 export 关键字将特定的变量、函数或类导出，以供其他模块使用。
导出的内容可以使用花括号 {} 包裹，列出多个导出项。
导入时需要使用相应的名称进行匹配。

例如：

// module.js
export const name = 'John';
export function sayHello() {
  console.log('Hello!');
}
export class Person {
  // ...
}

// otherModule.js
import { name, sayHello, Person } from './module';
console.log(name); // 'John'
sayHello(); // logs 'Hello!'
const person = new Person();

注意：命名导出在导入的时候必须使用{}才可以，要不然就是使用 import * 全部导入

命名导出时，还可以统一在最后面进行导出

// module.js
const name = 'John';
function sayHello() {
  console.log('Hello!');
}
class Person {
  // ...
}
export{
	name,
  sayHello,
  Person
};

或者两者结合使用

// module.js
const name = 'John';
export function sayHello() {
  console.log('Hello!');
}
class Person {
  // ...
}
export{
	name,
  Person
};

但是注意，千万不要重复了，不要上面 export 了一个变量，下面 export{}中还写上了！

默认导出（Default Export）：

在模块中，使用 export default 关键字将一个变量、函数或类设为默认导出，每个模块只能有一个默认导出。
导入时可以使用任意名称来接收默认导出的值。

例如：

// module.js
const message = 'Hello!';
export default message;
//也可以export default const message = 'Hello!'; 写在一起

// otherModule.js
import greeting from './module'; //可以随意命名，vue 中定义组件常用这种
console.log(greeting); // 'Hello!'

此外，还有两个命名导出的常用的导入策略：

导入所有命名导出：使用 * as 语法将所有的命名导出放在一个对象中导入（注意：必须全是命名导出，不能有默认导出）。

// module.js
export const name = 'John';
export function sayHello() {
  console.log('Hello!');
}

// otherModule.js
import * as module from './module';
console.log(module.name); // 'John'
module.sayHello(); // logs 'Hello!'

导出重命名：在导入时，可以使用 as 关键字为导入的项指定一个新的名称。

// module.js
export const name = 'John';

// otherModule.js
import { name as myName } from './module';
console.log(myName); // 'John'

此外，还可以导入和导出时结合默认导出和命名导出：

可以同时使用默认导出和命名导出，根据需要导入和导出不同的项，这里不能使用 import *

// module.js
export const name = 'John';
export default function sayHello() {
  console.log('Hello!');
}

// otherModule.js
import greet, { name } from './module';
console.log(name); // 'John'
greet(); // logs 'Hello!'

4.Object.assign方法

Object.assign 是一个 JavaScript 内置的静态方法，用于将一个或多个源对象的属性复制到目标对象中。

const merged = Object.assign(target, ...sources)

Object.assign 也可以用于将多个源对象合并为一个新的对象，而不会修改原始对象。

const merged = Object.assign({}, obj1, obj2, obj3);

注意：如果源对象和目标对象具有相同的属性名，后面的对象属性将覆盖前面对象的同名属性。

5.用 mac 自带邮箱登录腾讯企业邮

Mail界面下，从下拉菜单中选择“添加帐号”；

发件服务器填写：smtp.exmail.qq.com

帐户类型选择“POP”

用户名称：（填写自己的帐号全称），密码：（填写对应的帐号密码）

有可能遇到只能接收邮件不能发送的问题：

在邮箱的偏好设置-账户，做如下配置，一定要取消勾选自动管理连接设置

6.el-cascader实现选择最后一项之后，直接关闭

只要给配置项，不设置 checkStrictly 即可

checkStrictly的意思：

在 <el-cascader> 组件中，checkStrictly 用于控制级联选择器的选择模式。

当 checkStrictly 设置为 true 时，级联选择器的选择模式为多选模式。用户可以选择多个选项，每个选项都是独立的，不受其他选项的关联影响。（并且可以选择三级中的其中两项、其中一项都可以）

当 checkStrictly 设置为 false 或未指定时，级联选择器的选择模式为单选模式。用户只能选择一个选项，选择一个选项后，其他选项将被自动关闭。

通过设置 checkStrictly 属性，你可以根据需求选择适当的选择模式，实现级联选择器的不同行为。

所以说如果要实现可以不全选三级，那么还是要设置checkStrictly属性为 true

7.实现展开收起显示不同的内容

并且展开收起的按钮跟在文字的后面！

html

<div class="region-text">
  <template v-if="isActive">
    <template v-if="index != moreIndex">
      {{ item.agentRegion }}
      <label class="read-more" @click.stop="lookMore(index)">
        更多
      </label>
    </template>
    <template v-else>
      {{ item.agentRegionFull }}
      <label class="read-more" @click.stop="noLookMore"> 
        收起 
      </label>
    </template>
  </template>
</div>

moreIndex: null,
lookMore(index) {
  this.moreIndex = index;
},
noLookMore() {
  this.moreIndex = null;
},

scss

.region-text {
  // display: flex; //这里千万不要设置 flex，否则按钮是不可能紧跟在某行后面的了，会自动在整个文字的后面
  // justify-content: start;
  // align-items: center;
  margin-bottom: 10px;
  font-size: 26px;
  width: 220px;
  line-height: 1.2; //必须设置行高，也就是每行的高度，这样换行之后行之间就会有间距了
  .read-more {
    color: #58abf6 !important;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* 标准语法 */
    // display: flex; //这里也没有设置的必要性
    // align-items: center;
    // float: none;
    margin: 0;
    margin-left: 10px;
  }
}

8.updated 生命周期的使用

在组件初次渲染完成之后，会调用 mounted 钩子函数，但是如果组件的数据发生变化或父组件重新渲染，会触发组件的重新渲染，但不会再次执行 mounted 钩子函数。mounted 钩子只在组件初次渲染完成时执行一次，之后的重新渲染不会再触发 mounted 钩子。

需要频繁进行调用的方法，直接写在 updated 里面就可以了，虽然组件初次渲染只会调用 mounted 不会调用 updated，但是一般组件渲染是伴随 ajax 请求的，当 ajax请求完毕之后，自然就会调用 updated

但是为了保险起见，可以在 mounted 和 updated 里面都写上相关的方法

更加保险的情况，可以在 mounted 里面写this.$nextTick(() => {})钩子函数（这个nextTick会在 mounted 执行完毕之后执行一次）

写在 updated 里面比写在回调函数里要好很多，因为回调函数里面获取不到更新后的页面，但是 updated 里面可以！这个钩子其实非常好用！

总结：mounted 全局触发一次，updated 无限次触发，只要页面发生一点小改变造成了 js 数据的变化，那么updated 都会进行触发

例子：js动态监听数据列表中的某一个项的字数，超过9 个字数就截取并加三个点

updated() {
    // 在每次组件更新后执行的代码
    const elements = document.querySelectorAll(".one-text");
    console.log(elements);
    elements.forEach((e) => {
      const text = e.textContent;
      const maxLength = 9; // 最大字数限制
      if (text.length > maxLength) {
        const truncatedText = text.slice(0, maxLength) + "...";
        e.textContent = truncatedText;
      }
    });
  },

html

<span class="one-text">{{ item.agentRegion }}</span>
<label class="read-more" @click.stop="lookMore(index)"> 更多 </label></span>

如果是限制一行，超过就加三个点呢？

可以用纯 css 实现（但是限制字数就必须用 js 实现了）

css

.text-limit {
  width: 200px; /* 设置容器宽度 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 禁止换行，限制为单行显示 */
}

注意：ref 获取 dom 的方法只能获取一个 dom

如果在 Vue 组件中定义了多个相同名称的 ref，那么通过 this.$refs 获取到的是一个对象，其中只有最后一个定义的 ref 会被保留。

html

<div ref="myElement">Element</div>

const element = this.$refs.myElement; //只有一个

这是因为 ref 在 Vue 中是唯一标识符，类似于 id。

如果需要获取到多个相同名称的 DOM 对象，可以考虑使用类名选择器进行获取：

let elements = document.querySelectorAll(".one-text");

9.this.$nextTick执行时间和使用情况

消除观念：this.$nextTick 的回调函数不一定只会在 mounted 钩子函数之后执行。它也可以在其他情况下使用，例如在组件数据更新后执行，或者在异步操作的回调函数中执行。

this.$nextTick 方法可以在以下情况下使用：

在 Vue 组件更新后，等待 DOM 更新完成后执行代码。当 Vue 组件的数据发生变化时，Vue 会异步更新 DOM，此时使用 this.$nextTick 可以确保在 DOM 更新完成后执行特定的代码。这样可以避免在更新数据后立即访问 DOM，以确保获得最新的 DOM 更新结果。
在 Vue 组件的生命周期钩子函数中，等待下一次 DOM 更新后执行代码。例如，在 mounted 钩子函数中使用 this.$nextTick 可以确保在组件初次渲染完成后执行代码。
在使用 Vue 进行异步操作后，等待下一次 DOM 更新后执行代码。例如，在异步获取数据后，更新 Vue 组件的数据，然后使用 this.$nextTick 等待下一次 DOM 更新后执行与更新数据相关的操作。

总之，this.$nextTick 方法用于在 Vue 组件更新或异步操作后等待 DOM 更新后执行代码。这样可以确保在操作 DOM 元素时获得最新的结果。

特别注意：

this.$nextTick 是一个一次性操作。它会在下一次 DOM 更新周期完成后执行回调函数，并且在执行完毕后就结束了。也就是说，一旦回调函数执行完毕，this.$nextTick 的任务就完成了，不会再继续监听下一次的 DOM 更新。

10.flex 布局的align-content属性

决定在次轴方向的排列的效果：可以指定为 space-around，space-between等

和justify-content在主轴上面的效果作用是一样的

相当于比align-items对于垂直方向的布局更加强大，align-items只能指定对齐方式（即开始的位置，只有 center、start、end）

注意

justify-content: flex-start 和 justify-content: start 是没有区别的，只是flex-start是老的写法，兼容性强一些，start 是 Grid 布局风格的写法

11.label 和 span 标签对比

label 标签通常用于关联表单控件和文本标签。它可以通过 for 属性与对应的表单控件关联起来，从而提升表单的可用性和可访问性。label 标签可以包裹表单控件，或者使用 for 属性与表单控件的 id 属性相对应。当用户点击 label 标签时，关联的表单控件会获得焦点或选中。

html

<label for="username">Username:</label>
<input type="text" id="username">

span 标签是一个行内元素，用于包裹一段文本或其他行内元素，用于对文本进行样式设置或者将多个行内元素组合在一起。

html

<span class="highlight">Highlighted Text</span>

虽然 label 和 span 都可以用于包裹文本，但它们的用途和功能不同。label 主要用于表单控件和标签的关联，而 span 主要用于样式设置和行内元素的包裹。但是它们的性态非常类似。

12.line-height: initial;

line-height: initial; 是将行高属性设置为初始值。初始值取决于浏览器和元素的默认样式。

通过设置 line-height: initial;，可以将元素的行高恢复为默认值。这样可以使元素的行高遵循浏览器的默认样式，而不受其他样式的影响。

需要注意的是，不同的浏览器可能有不同的默认行高值，所以在使用 line-height: initial; 时，最好在具体浏览器中测试和验证效果。

但是一般情况下设置了line-height: initial;都可以有一个比较好的展示效果，是自适应的，如果不合适的话，就设置 line-height:1.2等等，如果是 1.2意思就是行高为字体大小的 1.2倍！

13.在表达式的前面添加一个加号+的作用

在 JavaScript 中，如果在表达式的前面添加一个加号 +，它可以有以下几种用途：

数字转换：当 + 作为一元操作符（前缀操作符）放在数字或字符串之前时，它可以将其转换为数字类型。
示例：
js
```
const numString = '42';
const num = +numString;
console.log(num); // 输出: 42 (数字类型)
```
正数标识：当 + 作为一元操作符（前缀操作符）放在数字之前时，它可以表示正数。这对于强调一个数字是正数是有用的。
示例：
js
```
const positiveNumber = +10;
console.log(positiveNumber); // 输出: 10
```

14.`-webkit-line-clamp` 和 `-webkit-box-orient` 属性

-webkit-line-clamp 和 -webkit-box-orient 是用于控制文本在容器中的显示方式的 CSS 属性，通常用于实现多行文本的截断和垂直显示。

-webkit-line-clamp 属性用于指定容器中显示的文本行数。通过设置该属性为一个整数值，可以限制文本的行数，超出行数的文本将被截断并以省略号表示。例如，-webkit-line-clamp: 2; 表示最多显示两行文本。
-webkit-box-orient 属性用于指定容器内元素的排列方向。通过设置该属性为 vertical，可以将元素垂直排列。在与 -webkit-line-clamp 结合使用时，可以实现多行文本在垂直方向上的显示。例如，-webkit-box-orient: vertical; 表示元素垂直排列。这样就相当于实现了换行的效果。

需要注意的是，-webkit-line-clamp 和 -webkit-box-orient 是 WebKit 内核的私有属性，只能在特定的浏览器（如 Chrome 和 Safari）中使用，并不是标准的 CSS 属性。在其他浏览器中，可能需要使用其他方法来实现类似的效果。

1.借助 boolean 值变量动态为 dom 添加删除样式表 ​

2.不要重复导出api 定义的方法 ​

3.es6 的 export 和 import 常用策略 ​

4.Object.assign方法 ​

5.用 mac 自带邮箱登录腾讯企业邮 ​

6.el-cascader实现选择最后一项之后，直接关闭 ​

7.实现展开收起显示不同的内容 ​

8.updated 生命周期的使用 ​

9.this.$nextTick执行时间和使用情况 ​

10.flex 布局的align-content属性 ​

11.label 和 span 标签对比 ​

12.line-height: initial; ​

13.在表达式的前面添加一个加号+的作用 ​

14.-webkit-line-clamp 和 -webkit-box-orient 属性 ​

1.借助 boolean 值变量动态为 dom 添加删除样式表

2.不要重复导出api 定义的方法

3.es6 的 export 和 import 常用策略

4.Object.assign方法

5.用 mac 自带邮箱登录腾讯企业邮

6.el-cascader实现选择最后一项之后，直接关闭

7.实现展开收起显示不同的内容

8.updated 生命周期的使用

9.this.$nextTick执行时间和使用情况

10.flex 布局的align-content属性

11.label 和 span 标签对比

12.line-height: initial;

13.在表达式的前面添加一个加号+的作用

14.`-webkit-line-clamp` 和 `-webkit-box-orient` 属性