【个人笔记】前端碎片笔记

不积跬步无以至千里~

用自己闲暇时间汇总工作中遇到的问题进行整理，碎片问题、闲时阅读加深记忆。

如何单独给子组件的某个标签（比如h6)添加类名，在不使用slot的情况下

（组件WidgetContent渲染视图效果)

如上图，如果有部分模块或者单页需要单独让 WidgetContent的h6标签更换颜色或添加下划线等样式，我们又不想污染原有组件的样式，那么该如何编写出优雅的代码？

# :data 子组件接收对象
# 父组件给提供给子组件的数据源
# :title-class 由父组件定义的自定义标签，子组件负责接收
# $terminal.isPc 是自己定义的端类检查插件，isPc表示如果是pc端
# "!text-5xl" 其中 ！ 表示使用强制样式命名（该篇文章有介绍），类名来自tailwindcss
# "/[58px]表示行高line-height
<WidgetCentent :data="ad" :title-class="$terminal.isPc ? '!text-5xl/[58px]' : ''"></WidgetCentent>

 子组件代码：

主要通过$attrs访问父组件传递给子组件但子组件没有声明的所有属性。

# WidgetContent
<template>
  <section class="content-wrap">
     <h6 :class="['title', $attrs['title-class']]"> {{ data.title }} </h6>
     <p class="desc"> {{ data.desc }} </p>
  </section>
</template>

如何让Tailwind 样式名标记为 !important

只需要给对应的标签添开头添加 ! 字符：!mt-10

<!-- 内容 -->
<div class="content-container w-main !mt-10">
   <!-- 内容块 -->
   <div class="content-body dim-filter">111</div>
</div>

如何使用css3让文本换行

第一种方法使用pre标签+样式+符号\n实现：

#  第一种方法使用pre标签+样式+符号\n实现：

# about.vue
<WidgetIconContent v-for="item in icons01" :key="item.name" :data="item"></WidgetIconContent>

<script setup lang="ts">
const icons01 = [
  {
    icon: "/images/b1.png",
    name: "技术革新",
    desc: "提供最新的物联网（IoT）\n人工智能（AI）、大数据等技术支\n持，帮助企业提升产品和服务的技\n术含量"
  },
  {
    icon: "/images/b3.png",
    name: "解决方案定制",
    desc: "根据行业特定的需求和挑战\n提供定制化的解决方案，包括但不\n限于智能制造、智慧农业\n智慧城市等"
  }
]
</script>


# IconContent .vue
<template>
  <li class="icon-centent-item">
    <img :src="data.icon" :alt="data.name" />
    <h6>{{ data.name }}</h6>
    <pre>{{ data.desc }}</pre>
  </li>
</template>


<style lang="scss" scoped>
  pre {
    margin-top: 10px;
    display: block;
    font-size: 14px;
    color: #8a8a8a;
    text-align: center;
    line-height: 18px;
    font-family: inherit;
  }
</style>

第二种方式使用white-space: pre;实现 

#第二种方式使用white-space: pre;实现

#AD.vue
<template>
  <!-- ad -->
  <section class="ad-wrap" :style="`background-image: url(${data.img})`">
    <div class="w-main">
      <h6 class="tt" v-if="data.title">
        {{ data.title }}
      </h6>
      <p class="desc" v-if="data.desc">
        {{ data.desc }}
      </p>
    </div>
  </section>
</template>


<style lang="scss" scoped>
// ad
.ad-wrap {
  margin-top: 75px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(/images/b1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  .tt {
    color: #3370ff;
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    white-space: pre;
  }

  .desc {
    margin-top: 20px;
    color: #8a8a8a;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    white-space: pre;
  }
}
</style>

nuxt中如何修改Swiper箭头按钮的样式

 使用:deep(<inner-selector>)代替：如:deep(div)、:deep(.className)、:deep([prop^="className"])...

# :deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of :deep <inner-selector>.
# ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.

  :deep([class^="swiper-button-"]) {
    margin: 0 55px;
    top: auto;
    bottom: 50px;
    padding: 0;
    width: 32px;
    height: 21px;
    background-image: url(/images/pay/arrow-btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 200ms linear;
    &::after {
      content: none;
    }
    &:hover {
      transform: scale(1.2);
    }
  }
  :deep(.swiper-button-next) {
    transform: rotate(180deg) scale(1);
    &:hover {
      transform: rotate(180deg) scale(1.2);
    }
  }

使用css3实现英文语句每个词汇首字母大写

使用 text-transform: capitalize; 

# 使用 text-transform: capitalize; 

<ul class="ul w-main">
  <li v-for="item in company_dep">
    <img :src="`/images/about/${item.img}`" alt="" />
    <section>
      <h6 class="tt">{{ item.tt }}</h6>
      <p class="en">{{ item.en }}</p>
      <p class="cn">{{ item.cn }}</p>
    </section>
  </li>
</ul>

<style lang="scss" scoped>
  .en {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-family: Arial;
    line-height: 15px;
    font-weight: 400;
    text-transform: capitalize;
  }
</style>

手机端  video 标签设置了 autoplay属性，访问站点网页会自动全屏播放 在不调整autoplay的情况下怎么实现取消自动全屏播放？

# 取消自动全屏播放，可以通过使用 playsinline 属性来告诉浏览器在内联模式下播放视频，而不是全屏播放。
<video autoplay playsinline>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

禁止鼠标右键保存图片、禁止拖动图片的代码

# 1、禁止鼠标右键保存图片
<img src="logo.png" width="150" height="150" oncontextmenu="return false;">

# 2、禁止鼠标拖动图片
<img src="logo.png" width="150" height="150" ondragstart="return false;">

# 3、文字禁止鼠标选中
<p onselectstart="return false;">文字禁止鼠标选中</p>
<p>普通文字可以选中</p>

# 4、禁止复制文本
<p onselect="document.selection.empty();">禁止复制文本</p>
<p>普通文字可以复制</p>

# 以上效果用jQuery实现代码：
<script>
  var imgs=$("img");
  imgs.on("contextmenu",function(){return false;});
  imgs.on("dragstart",function(){return false;});
</script>  

flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案

flex布局采用justify-content:space-between,当为两个内容时中间被空出给外层容器加一个伪类::after,设置样式content:""; width:“内容宽”

在Nuxt3中如何为二级路由添加默认页面（可访问）

当seo工作人员告诉你，为什么你的二级目录无法访问404的时候，怎么给他添加成可以访问。如，在该目录没有index页面的情况下：

可以通过hooks :  pages:extend 实现

# nuxt.config.ts

  hooks: {
    "pages:extend"(pages: any) {
      pages.push(
        {
          name: "partner",
          path: "/partner",
          file: "~/pages/partner/Iot-cooperation"
        }
      );
    }
  }

这样就可以访问 https://www.你的网站地址.com/partner 了

快速删除项目中node_modules目录

# 安装"rimraf"模块
npm install rimraf -g
 
# 删除操作
rimraf node_modules

如何修复控制台的min-height: auto;警告

# min-content 是一个 CSS 的尺寸关键字，表示的是内容的最小宽度。
# 对于文本内容而言，这意味着内容会利用所有软换行的机会，变得尽可能的小，
# 大小不会超过最长单词的宽度。

min-height: min-content;

在Nuxt3修改element-plus颜色变量

有时候，我们只需要组件库的部分功能并且自定义了颜色等样式。

这里只要介绍如何修改（重置）主要按钮（primary)颜色scss变量。

index.scss

# 在asset / styles / element 创建 index.scss 文件
# index.scss 
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #3370ff
    )
  )
);

nuxt.config.ts

# nuxt.config.ts

export default defineNuxtConfig({
  // 注入scss变量、混合等
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/styles/element/index.scss" as *;',
        },
      },
    },
  },
});

在Nuxt3中，如何写一个简单按钮组件button并通过自定义事件发生跳转至外部链接（第三方链接）

button.vue

# button.vue
<template>
  <button :class="['my-btn', type || 'default']" @click="handleJump(path)">
    <slot name="prefix"></slot>
    <span class="txt">
      <slot>{{ txt }}</slot>
    </span>
    <slot name="suffix"></slot>
  </button>
</template>

<script lang="ts" setup>
const handleJump = (path: string | undefined) => {
  if (!path) return;
  // 检查链接是否以 "http" 或 "https" 开头
  const isExternal = path.startsWith("http://") || path.startsWith("https://");
  // 调用 navigateTo 函数，并根据是否为外部链接添加选项
  navigateTo(path, isExternal ? { external: true } : {});
};
</script>

NuxtJs项目在Microsoft Edge浏览器打开（手机端）出现 “翻译页面？”

1、设置 HTML 的 lang 属性： 在你的 Nuxt.js 项目中的 nuxt.config.ts 文件中，确保 HTML 的 lang 属性设置为 "zh-CN"，这样浏览器会知道该页面使用的是中文：

# nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: {
        lang: "zh-CN"
      }
    }
  },
})

2、设置 HTTP 头部： 在你的服务器上，确保 HTTP 头部中的 Content-Language 属性设置为中文。如果你使用的是 Nginx，可以在配置文件中添加如下行：

http {
    # 其他配置...

    server {
        # 其他服务器配置...

        location / {
            # 其他位置配置...
            add_header Content-Language "zh-CN";
        }
    }
}

通过这些设置，你的网站就会被正确标识为中文，Edge 浏览器就不会再提示进行翻译了。