0

我正在将一个组件库导入到我的 Vue 3 项目中。

组件的每个实例都使用完全相同的样式。为了避免手动更改每个实例的道具，我使用了全局属性：

app.config.globalProperties.$tooltipStyles = { width: '300px', minWidth: 'unset' };

为此，我必须将其导入app每个文件，并将return其导入setup(). 我还必须将其设置为每个实例：

:styles="app.$tooltipStyles"

有没有办法全局设置它，以便每次我使用组件时，它默认具有这些样式？

编辑

为了补充已接受的答案，我创建了一个单独的文件，该文件导出单个反应对象：

import { reactive } from 'vue';

const global = reactive({
    $tooltipStyles: { width: '300px', minWidth: 'unset' },
    $tooltipPosition: 'right',
});

export default global;

这样我就可以即时更新任何属性。

例如，当屏幕低于某个尺寸时，我可以将位置更改为'top'：

window.addEventListener('resize', () => {
    if (window.matchMedia('(max-width: 992px)').matches) {
        global.$tooltipPosition = 'top';
    } else {
        global.$tooltipPosition = 'right';
    }
})

它会相应地更新。

4

2 回答 2

1

看起来你已经准备好了几乎所有的东西。

唯一的事情是您不需要指定app，因此您不需要导入它。

这：:styles="$tooltipStyles"应该得到你的价值

const app = Vue.createApp({})

app.component('my-component', {
  template: '<h1 :style="$tooltipStyles">My Component {{$tooltipStyles}}</h1>',
})

app.config.globalProperties.$tooltipStyles= 'color: green;'
app.mount('#app')
<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>
<div id="app">
  <my-component></my-component>
</div>

于 2020-10-19T16:05:09.990 回答
0

你可以试试prototypes

import Vue from 'vue'

Vue.prototype.$tooltipStyles = {
   width: '300px',
   minWidth: 'unset'
}

有关更多信息：添加实例属性

安装 Vue 后：

otherFile.js

mounted() {
  console.log(this.$tooltipStyles)
}
于 2020-10-19T14:09:14.780 回答