HiDocs
Search K

Appearance

1.visibility: hidden和opacity: 0的使用策略和区别？ ​

visibility: hidden; 和 opacity: 0; 在某些方面可以实现相似的效果，但它们之间存在一些关键的区别。

  1. 视觉效果：visibility: hidden; 会使元素完全不可见，包括其内容和占用的空间都会被隐藏。而 opacity: 0; 则只是使元素变为完全透明，但仍然占据着原来的空间。
  2. 鼠标交互：visibility: hidden; 会禁用元素上的鼠标交互，包括鼠标事件和鼠标指针样式。而 opacity: 0; 并不会禁用鼠标交互，元素仍然可以触发事件并显示鼠标指针样式。

因此，如果你希望元素在不可见的同时禁用鼠标交互，可以使用 visibility: hidden;。如果你只是想让元素透明但保留其占据的空间和鼠标交互，可以使用 opacity: 0;。

注意：visibility: hidden; 不能实现渐显效果，因为它会立即将元素从可见状态变为不可见状态，没有渐变的过程。

如果你希望实现渐显效果，可以结合使用 opacity 和 CSS 过渡（transition）属性。

如果使用了opacity: 0还不希望鼠标交互呢？

使用pointer-events: none;

2.梯子会造成gitlab访问失败 ​

注意：开梯子了网页是无法访问gitlab的，即是是http://gitlab.classba.com.cn/域名

但是git命令可以进行访问，开梯子不会产生影响

3.元素设置100%宽度，但是发现屏幕宽度溢出出现滚动条了怎么办？ ​

设置溢出隐藏

css
width: 100%;
//加入下面两行，把一部分溢出的进行舍弃
margin: 0 auto;
overflow: hidden;

4.设置大框架的高度100vh ​

在内部元素不够撑起高度，但是还想设置为一整屏幕的时候

用height:100vh

注意：width: 100%;用的比较多，而100vw用的很少

5.js中new URL的使用 ​

this.product1 = new URL(../assets/images/introduce/${this.type}/product-1.png,import.meta.url).href;

这行代码是使用 JavaScript 创建了一个 URL 对象，并为 product1 变量赋值。这个 URL 对象是根据给定的路径和基准 URL 创建的。

让我们逐个解析这段代码：

js
this.product1 = new URL(`../assets/images/introduce/${this.type}/product-1.png`, import.meta.url).href;
  • this.product1：这是一个变量，用于存储生成的 URL 的最终结果。
  • new URL()：这是创建 URL 对象的构造函数。
  • ../assets/images/introduce/${this.type}/product-1.png：这是一个模板字符串，表示相对于当前脚本文件的路径。${this.type} 是一个插入表达式，用于动态地插入 this.type 变量的值。假设 this.type 是一个字符串变量，该路径将根据 this.type 的值进行动态替换。
  • import.meta.url：这是一个特殊变量，提供了当前模块文件的 URL 地址。它用作基准 URL，以便相对路径能够正确解析。（../这样的相对路径，需要知道当前路径才方便去解析）

.href 是 URL 对象的属性，用于获取完整的解析后的 URL。

通过以上代码，this.product1 变量将包含根据给定的路径和基准 URL 解析后的完整 URL 地址，用于进一步在应用中加载对应的图像资源。

6.import.meta的作用 ​

import.meta 是一个 JavaScript 中的元数据对象，它提供了与模块相关的信息。它是 ECMAScript 模块规范的一部分，在支持该规范的环境中可用。

import.meta 对象具有以下属性：

  • import.meta.url：返回包含当前模块的 URL 地址的字符串。它可以用作基准 URL，用于解析相对路径。例如，import.meta.url 可以用于构建资源的绝对路径。
  • import.meta.scriptElement：返回当前模块的 <script> 元素对象（如果有的话）。它可以用于在运行时获取当前模块的 <script> 元素，以进行一些操作，比如动态加载其他资源。

这些属性提供了关于模块自身的信息，使开发者能够根据需要动态地获取和操作模块的相关数据。

请注意，import.meta 是在 ECMAScript 模块中使用的，而不是在普通的脚本文件或全局作用域中。它提供了一种访问模块特定信息的方式，有助于模块之间的通信和模块的动态行为。

7.禁止用户选中 ​

-webkit-user-select: none; /* Safari/Chrome */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; /* Standard syntax */

注意：这个样式是可以进行继承的

8.要注意将功能卡片进行组件的独立 ​

一般一个页面的功能块：比如产品介绍卡片，跳转顶部的按钮，点击弹出的视频播放器层，遮罩层等等，都最好独立出来，可以用peops接收参数，非常方便！

将图片等url实现统一性，可以根据props参数进行统一修改

js
this.product1 = new URL(`../assets/images/introduce/${this.type}/product-1.png`,import.meta.url).href;
html
<img :src="product1">

这样就可以了，需要注意的就是我们要在assets中建立有规律的目录去存放图片！

9.安卓端实现视频自动播放 ​

html
<video id="myVideo" autoplay muted>
    <source src="video.mp4" type="video/mp4">
</video>
<script>
    let video = document.getElementById("myVideo");
    video.addEventListener('loadeddata', function() {
        video.play();
    });
</script>

10.defineProps宏命令设置默认值 ​

vue
<script lang="ts" setup>
//子组件 Search，reportAll不传默认为false
const props = withDefaults( //使用withDefaults
  defineProps<{
    reportAll: boolean;
    exportApi: any;
  }>(),
  {
    reportAll: false, //这里设置了
  }
);
</script>

11.<script setup>中可以使用顶层 await ​

也就是说可以不用加async，直接使用await，会在解析的时候自动在setup外面添加async

变成async setup() {}

12.vue3.2的defineEmits的使用方法：用于自定义实现实现子到父的传参 ​

子组件：son.vue

vue
<script setup lang="ts">
    // 这样是没有任何的类型检查的
    const emit = defineEmits(['handleClick', 'handleChange']); //（1）声明自定义事件handleClick和handleChange，并定义为emit对象

    //使用emit对象进行事件的触发，返回为两个方法，分别触发一个事件
    const handleClick = () => emit('handleClick', Date.now()+''); //（2）触发自定义事件
    const handleChange = () => emit('handleChange', Date.now());
</script>
<template>
	<div @click="handleClick">
        点我1
    </div>
	<div @click="handleChange">
        点我2
    </div>
</template>

父组件：father.vue

vue
<script setup lang="ts">

    //使用emit对象进行事件的触发，返回为两个方法，分别触发一个事件
    const handle1 = (param) => { //接收到参数Date.now()+''
        console.log(param)
    }
    const handle2 = (param) => {
        console.log(param)
    }
</script>
<template>
	<son @handleClick="handle1" @handleChange="handle2"></son>
</template>

13.debugger; 进行断点调试 ​

注意：不要再用console.log的方式了，太low了太慢了

在想要打断点的地方，写上debugger;

直接打开浏览器，进行相关操作，让代码运行到debugger;的那行

然后鼠标放到对应位置上就可以看到相关变量的内容是多少了！