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

目录

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
 * 
 *         右侧插入内容
 * 
 */

// 主题风格
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,
      default: ThemeStyle.LIGHT,
    },
  },

• 注意：props 中指定默认值时，如果是 对象 / 数组，应该写成 函数 的形式

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

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

---

• 组件模板：
• 通过 class 设置组件 默认样式
• 通过动态绑定 :style="{ ...cStyle.xxx }" 设置用户传入的 自定义样式

• 最外层通过 ths-title-base div包裹，禁止用户设置
• 第一层通过 title-content div包裹，允许用户设置标题容器整体样式（cStyle.wrapper）
• 第二层分为左右两个部分：

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

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

• ---

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

• ---

  默认样式设置：
• 注意：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 , // 声明引入的组件
  },
})

• ---

  使用标题组件：

    
      我是右侧插槽内容
    

• ---

  引入 图标 的两种方式：
• 通过 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;  
}