vue 3打字稿中的原子设计

Question

我目前正在尝试在我的 vue 应用程序中使用原子设计。

下面是我的按钮原子的代码：

<template>
  <ElButton
    :type="button?.type"
    :plain="button?.plain"
    :rounded="button?.rounded"
    :icon="button?.icon"
    :disabled="button?.disabled"
    :loading="button?.loading"
    :size="button?.size"
  >
    {{ button?.label }}
  </ElButton>
</template>

<script lang="ts">
  import { ElButton } from "element-plus"
  import { PropType, defineComponent } from "vue"
  interface IButton {
    label: String
    type: String
    plain?: boolean
    rounded?: boolean
    icon?: String
    disabled?: boolean
    loading?: boolean
    size?: String
    rest?: any
  }
  export default defineComponent({
    name: "Button",
    props: {
      button: Object as PropType<IButton>,
    },
    components: {
      ElButton,
    },
  })
</script>

我正在使用我的HelloWorld.vue中的按钮

<script lang="ts">
  import {defineComponent } from "vue"
  import Button from "./atom/input/index.vue"

  export default defineComponent({
    components: {
      Button,
    },
  })
</script>

<template>
  <Button type="success" size="large" label="Primary Button" />
</template>

通过以上设置，我可以轻松使用我的按钮组件。唯一的问题是该按钮不显示其文本。

虽然我已经将 label prop 传递给组件，但当我检查按钮元素时，它显示为按钮的属性。

像这样：

<button class="el-button el-button--success el-button--large" type="button" label="Primary Button"></button>

谁能帮我弄清楚我在这里缺少什么？

Answer 1

你的道具是
props: { button: {label: string} }
但你正试图将它们用作
props: { label: string }

任何一个

  <Button :button="{type:'success', size:'large', label:'Primary Button'}" />

或使道具正确