Vue3项目中@tato30/vue-pdf深色主题切换失效问题求助

错误点 #

1. Vue3模板中禁止使用this：Vue3模板上下文已移除this，直接访问全局属性或setup中暴露的变量即可，this.$store的写法不符合Vue3规范。
2. :style绑定格式错误：你直接传入了原生CSS语句字符串，而Vue要求:style接收的是样式对象，而非纯CSS代码片段。

修复代码 #

情况1：使用Options API（非setup语法糖） #

移除this，并将样式改为对象格式：

<VuePDF
  align="center"
  :pdf="pdf"
  :page="currentPage"
  :scale="scale"
  :style="{ filter: `invert(${ $store.getters.theme === 'dark' ? 1 : 0 })` }"
/>

情况2：使用Composition API（setup语法糖） #

先通过useStore获取store实例，再暴露给模板使用：

<script setup>
import { useStore } from 'vuex'
const store = useStore()
// 定义pdf、currentPage、scale等变量
</script>

<template>
  <VuePDF
    align="center"
    :pdf="pdf"
    :page="currentPage"
    :scale="scale"
    :style="{ filter: `invert(${ store.getters.theme === 'dark' ? 1 : 0 })` }"
  />
</template>

额外优化建议 #

纯invert(1)会导致PDF颜色反转后出现偏色（比如蓝色变为黄色），可以配合hue-rotate滤镜修正：

{ 
  filter: `${ store.getters.theme === 'dark' ? 'invert(1) hue-rotate(180deg)' : 'none' }`
}

内容的提问来源于stack exchange，提问作者Lucas Almeida Carotta