vue-plugin-hiprint调整样式

### 修改或自定义 `vue-plugin-hiprint` 插件的样式

为了调整或修改 `vue-plugin-hiprint` 插件的样式，可以采取多种方式来覆盖默认样式并应用个性化的设计。

#### 方法一：全局CSS覆盖
可以在项目的根级 CSS 文件中添加特定的选择器来覆盖插件中的样式。由于Vue组件的作用域特性，默认情况下这些样式会作用于整个应用程序：

/* src/assets/styles/global.css */
.hi-print-container {
    background-color: #f0f0f0;
}

.hi-print-item {
    border-radius: 8px;
}

确保此文件被引入到项目入口处，例如 main.js 或 App.vue 中[^1]。

#### 方法二：局部SCSS/SASS变量重写
如果使用预处理器如 SCSS，则可以通过创建一个新的 SASS 文件，在其中重新定义原生主题的颜色和其他属性，并将其导入至需要的地方:

// src/components/CustomHiPrintStyles.scss
$primaryColor: #ff5722;

@import '~vue-plugin-hiprint/dist/style';

接着在 Vue 组件内通过 `<style lang="scss">` 标签加载上述样式表[^2]:

<template>
  <!-- ... -->
</template>

<script setup>
// ...
</script>

<style scoped lang="scss">
@import './components/CustomHiPrintStyles';
</style>

#### 方法三：利用插件配置项定制外观
部分插件允许开发者传递额外参数来自定义其行为和视觉效果。查阅官方文档确认是否存在这样的选项用于更改字体大小、颜色等基本样式设置。

对于更复杂的场景比如想要完全重构界面布局或是增加交互功能的话，可能就需要深入研究源码结构甚至考虑贡献代码给社区了。