如何定义类型：样式对象vue3 typescript

oipij1gg 于 2023-05-30 发布在 TypeScript

关注(0)|答案(3)|浏览(229)

在模板中，我有：

<template>
      <div ref="PopupContent" class="popupContent" :style="data.contentStyle">
 </template>

在设置中，我有：

export default defineComponent({
    name: "Popup",
    setup() {
       const data = ref({
       someOtherProp: 0,
       style: <StyleValue>(),
       someOtherOtherProp: false,
       retries: 0,
    });

如果需要的话，我还可以将一些对象定义为接口，但也许存在可以使用的现有类型。我仍然不知道安装程序的正确语法。

interface StyleProps {
   left: string;
   right: string;
   top: string;
   bottom: string;
   width: string;
   height?: string;
}

如果我这样做了，有没有一种好的方法可以让所有使用它们的代码都可以访问它们？
我试图找到一种方法来定义样式，而不会在后面的代码中遇到问题，例如设置this.data.style [“width”]。
所以作为对其中一个答案的回应，这似乎起作用了，但我还有一个进一步的问题：

const style: Partial<CSSStyleDeclaration> = {};
const arrowStyle: Partial<CSSStyleDeclaration> = {};

const data = ref({
   strokeWidth: 0.108,
   style: style,
   arrowStyle: arrowStyle,
});

有没有一种方法可以内联地定义const data，而不是笨拙地定义单独的变量？

typescript

来源：https://stackoverflow.com/questions/70929043/how-to-define-type-of-style-object-vue3-typescript

3条答案

按热度按时间

3phpmpom1#

我想你正在寻找：
Partial<CSSStyleDeclaration>

文档：

部分
CSSStyleDeclaration

赞(0）回复(0）举报 2023-05-30

llycmphe2#

你可以使用一个接口和泛型优雅地做到这一点，像这样：

interface MyData {
  strokeWidth: number;
  style: Partial<CSSStyleDeclaration>;
  arrowStyle: Partial<CSSStyleDeclaration>;
}

const data = ref<MyData>({
  strokeWidth: 0.108,
  style: {},
  arrowStyle: {},
})

赞(0）回复(0）举报 2023-05-30

kzipqqlq3#

这是一个应用程序示例（它实际上没有做任何事情），但向您展示了如何为typescript中的样式动态设置值。如果不设置类型，vue3会在getStyle（n）上停止。

<template>
   <template v-for="n in data.count" :key="n">
     <div class="relative" :style="getStyle(n)"></div>
   </template>
 </template>
 <script>
 import { defineComponent, StyleValue } from 'vue';

 export default defineComponent({
   name: "MyApp",
   data() {
     return {
       count: 10,
       isVert: true,
       x: 10,
     };
  },
  methods: {
    getStyle(n: number): StyleValue {
      return this.data.isVert
        ? ({
          height: this.data.x / this.scale + 'px',
          top: this.data.x * n / this.scale + 'px'
        } as StyleValue)
        : ({
          width: this.data.x / this.scale + 'px',
          left: this.data.x * n / this.scale + 'px'
        } as StyleValue)
    },
  },
});
</script>

赞(0）回复(0）举报 2023-05-30

我来回答

如何定义类型：样式对象vue3 typescript

3条答案

相关问题

热门标签

最新问答