Vue3 组件示例工程（一） —— 标题组件

最新推荐文章于 2024-10-15 20:07:45 发布

Lyrelion

最新推荐文章于 2024-10-15 20:07:45 发布

阅读量1.7k

点赞数

分类专栏： Vue3 文章标签： vue3

本文链接：https://blog.csdn.net/Lyrelion/article/details/113972983

版权

Vue3 专栏收录该内容

24 篇文章 21 订阅

订阅专栏

目录

1.标题组件 title-base 编写

2.标题组件 title-base 使用

3.color: var(--font-color1)，是 sass 通过变量设置颜色，变量存储于 variable.scss 文件中

4.字体颜色渐变原理

5.实现需求：在 ios 上使用苹方字体，在 windows 上使用微软雅黑，同时无论哪种设备，所有引号都要使用宋体

6.修改 input type=number 的样式【指上下按钮+-】

7.Google 记住密码之后，账号密码框自动填充，输入框的背景色为白色，字体为黑色，如何去除这些默认颜色？

1.标题组件 title-base 编写

效果展示：

组件名称：TTitleBase

主题风格：
通过 计算属性 computed 获取当前主题风格 ThemeStyle，并因此改变组件部分样式
获取 props 传入的主题风格
  setup(props, context) {

    // 获取 props接受的 主题风格
    const currentThemeStyle = computed(() => props.themeStyle);

    // 将计算属性返回，给 html 使用
    return {
      currentThemeStyle,
    };
  },
计算属性接受函数，且计算属性都是响应式的，通过 .value 获取计算属性真实值
例如：根据传入的主题风格，确认标题组件下边线颜色：
const currentBorderColor = computed(() => {
    (currentThemeStyle.value === ThemeStyle.LIGHT) ? '#999' : '#fff';
});
可供接受的参数（props）：
/**
 * t-title-base
 * @desc 标题
 * @param {string} [title] - 标题
 * @param {string} [icon] - 图标
 * @param {slot} - 显示在右侧区域
 * @example
 * <t-title-base :theme-style="light" >
 *         右侧插入内容
 * </t-title-base>
 */

// 主题风格
enum ThemeStyle {
  LIGHT = 'light',
  DARK = 'dark',
}

  props: {
    // 标题内容
    title: {
      type: String,
      default: '',
    },
    // 图标
    icon: {
      type: String,
      default: '',
    },
    // 自定义样式
    cStyle: {
      type: Object,
      default: () => ({
        wrapper: {}, // 容器整体样式
        title: {}, // 标题样式
        icon: {}, // 图标样式
      }),
    },
    // 主题风格
    themeStyle: {
      type: String as PropType<ThemeStyle.LIGHT | ThemeStyle.DARK>,
      default: ThemeStyle.LIGHT,
    },
  },
注意：props 中指定默认值时，如果是 对象 / 数组，应该写成函数的形式

默认为对象： () => ({})
默认为数组： () => ([])

注意：设置主题风格时，指定了符合枚举类型的字符串，想实现这个功能，需要使用 PropType， xxx as PropType<T>，内部接受泛型T

组件模板：
通过 class 设置组件默认样式
通过动态绑定 :style="{ ...cStyle.xxx }" 设置用户传入的自定义样式
<template>
  <div class="ths-title-base">
    <div
      :style="{...cStyle.wrapper}"
      class="title-content"
    >
      <div class="title-content__left">
        <img v-if="icon"
          class="title-content__img"
          :style="{ ...cStyle.icon }"
          :src="icon"
        >
        <p
          :style="{ ...cStyle.title }"
          class="title-content__title"
        >
          {{ title }}
        </p>
      </div>
      <slot />
    </div>
  </div>
</template>
最外层通过 ths-title-base div包裹，禁止用户设置
第一层通过 title-content div包裹，允许用户设置标题容器整体样式（cStyle.wrapper）
第二层分为左右两个部分：

左边包含图标（根据传入的 icon 决定 src）和双向绑定标题（根据传入的 title 决定）
右边添加插槽 <slot />，由用户自定义传入内容，比如下拉框、链接跳转等等

注意：组件通过 props 接受的参数，可以在组件模板中直接使用；而 setup() 中的内容，需要 return 之后，才能在组件模板中使用

字号转换：
在 sass 中，需要动态的把 px 转换为 rem，进而实现 自适应 效果，计算方法如下
<style lang="scss">

/* $px 为需要转换的字号 */
@function px2rem($px) {
  @return $px / 16px * 1rem;
}

</style>
默认样式设置：
注意：sass 语法，可以通过 变量 var(--font-color1) 设置颜色
此处用了别致的类名命名风格，你学会了吗
可以设置一个小类名，使用组件时，在他的标签加上，类名会自动替换默认样式
// 最外层div，禁止用户设置
.ths-title-base {
  // 第一层标题容器，允许用户设置
  .title-content {
    display: flex;
    justify-content: space-between; // 标题组件整体左右结构
    align-items: center;
    height: 45px;
    max-width: 1920px;
    border-bottom: 1px solid var(--border-color1);
    color: var(--font-color1);

    &__left {
      display: flex;
      align-items: center;
    }

    &__img {
      width: 19px;
      margin: 0;
    }

    &__title {
      padding: 4px;
      margin: 0;
      font-size: 18px;
      letter-spacing: 1px;
      color: var(--font-color1);
    }
  }
}
2.标题组件 title-base 使用

导入组件及样式：
一种是在 main.ts 中全局引入，另一种是在单独的 .vue文件中按需引入
// main.ts 全局引入
import TTitleBase from '@p-base/title-base';
import '@p-base/title-base/dist/cjs/index.css';
createApp(App).use(TTitleBase); // 全局挂载

// xx.vue 单文件引入
import TTitleBase from "@p-base/title-base";
import '@p-base/title-base/dist/cjs/index.css';
export default defineComponent({
  components: {
    TTitleBase , // 声明引入的组件
  },
})
使用标题组件：
    <t-title-base
      theme-style="dark"
      class="ths-title--first" // 此处用到了组件内置的备用样式，可以覆盖默认样式哦
      title="大鹏新区空气状况"
      :icon="icon"
    >
      我是右侧插槽内容
    </t-title-base>
引入图标的两种方式：
通过 require('@/assets/.../xxx.png').default 引入图片，将其变成响应式数据，并 return 给组件模板使用，此方法会有 eslint 报错，加上那行注释就ok
通过 import xxx from '../xxx.png'; 引入图片，将其变成响应式数据，并 return 给组件板使用，此处路径尽量不要使用 @xxx 的形式，个人感觉容易报错【?】

3.color: var(--font-color1)，是 sass 通过变量设置颜色，变量存储于 variable.scss 文件中

4.字体颜色渐变原理
.ths-title--first{
  .title-content__title {
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 1px;
    // 下面是关键代码
    color: transparent;
    background-image: linear-gradient(0deg, #FFF495 0%, #FFFFFF 100%);
    background-clip: text;
  }
}
5.实现需求：在 ios 上使用苹方字体，在 windows 上使用微软雅黑，同时无论哪种设备，所有引号都要使用宋体

上述需求实现方法：unicode-range: U+201c, U+201d; // 指定仅当前两个字符 ( 引号的 unicode编码 ) 适用引入的字体
@font-face {
  font-family: BASE;
  src: local('PingFang SC'), // 实现 ios 中显示 苹方字体
       local("Microsoft Yahei"); // 实现在 windows 中显示 微软字体
}

@font-face {
  font-family: quote;
  src: local('SimSun');    
  unicode-range: U+201c, U+201d; // 指定仅当前两个字符(引号的 unicode编码)适用引入的字体
}

.font {
    font-family: quote, BASE; // 同时引入上面三个 @font-face
}
参考文档：https://blog.csdn.net/p312011150/article/details/79785973

6.修改 input type=number 的样式【指上下按钮+-】
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
7.Google 记住密码之后，账号密码框自动填充，输入框的背景色为白色，字体为黑色，如何去除这些默认颜色？
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {  
    -webkit-text-fill-color: #ededed !important;  
    -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  
    background-color:transparent;  
    background-image: none;  
    transition: background-color 50000s ease-in-out 0s;  
}  
input {  
    background-color:transparent;  
}  