时间戳

首页 > 解决方案 > 如何更改 primvue 组件字体系列、字体大小和字体粗细

vuejs3 - 如何更改 primvue 组件字体系列、字体大小和字体粗细

问题描述

我有 vue3 composition api 和 primevue。我需要更改特定组件的系列、尺寸和重量。我花了一天多的时间，找不到这个信息。具体来说，我需要将下拉菜单更改为字体系列 Lato，字体粗细：粗体，字体大小 1.2vw

我想要一个示例或指出有关如何实现此目的的明确文档。

谢谢您的帮助。

标签： vuejs3viteprimevue

解决方案

您可以覆盖类样式，例如：

.p-dropdown-label,
.p-dropdown-item {
  font-family: Lato; // add !important if not applied
  font-weight: bold;
  font-size: 1.2vw;
}

检查类列表

更新

::v-global(.p-dropdown-label),
::v-global(.p-dropdown-item) {
  font-family: Lato !important;
  font-weight: bold !important;
  font-size: 1.2vw !important;
}

更新 2使用插槽

例子：

<template>
  <Dropdown
    v-model="selectedCity"
    :options="cities"
    optionLabel="name"
    placeholder="Select a City"
  >
    <template #value="{ value, placeholder }">
      <span class="p-dropdown-label__custom">{{
        value ? value.name : placeholder
      }}</span>
    </template>
    <template #option="{ option }">
      <span class="p-dropdown-item__custom">{{ option.name }}</span>
    </template>
  </Dropdown>
</template>

<script>
import Dropdown from "primevue/dropdown/sfc";

export default {
  name: "App",
  components: {
    Dropdown,
  },
  data() {
    return {
      selectedCity: null,
      cities: [
        { name: "New York", code: "NY" },
        { name: "Rome", code: "RM" },
        { name: "London", code: "LDN" },
        { name: "Istanbul", code: "IST" },
        { name: "Paris", code: "PRS" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.p-dropdown-label__custom,
.p-dropdown-item__custom {
  font-family: Lato;
  font-weight: bold;
  font-size: 1.2vw;
}
</style>

推荐阅读