Атомарный дизайн в машинописном тексте vue 3
В настоящее время я пытаюсь использовать атомарный дизайн в своем приложении 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 компоненту, он отображается как атрибут кнопки, когда я проверяю элемент кнопки.
Так:
<button class = "el-button el-button--success el-button--large" type = "button" label = "Primary Button"></button>
Может ли кто-нибудь помочь мне понять, что мне здесь не хватает?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваш реквизитprops: { button: {label: string} }
но вы пытаетесь использовать их какprops: { label: string }
Или
<Button :button = "{type:'success', size:'large', label:'Primary Button'}" />
или сделай реквизиты правильными
Есть ли способ, где я могу использовать эти реквизиты напрямую, как в реакции? Я из реагирующего фона, поэтому мне трудно понять vue 3
Как я уже сказал, у вас есть один реквизит с именем button. Вам понадобится несколько реквизитов.
Кстати, вы новичок в Vue? Вы хотите найти хороший шаблон, использующий все новейшие функции Vue и сопутствующие вещи?
Тогда попробуйте github.com/antfu/vitesse, он использует все, что вам нужно для правильного интерфейса.
После глубокого изучения документации vue typescript. Я нашел подходящее решение для использования интерфейса на реквизитах с API-интерфейсом vue 3 typescript.
атом/кнопка/index.vue
<template>
<ElButton
:type = "type"
:plain = "plain"
:round = "round"
:icon = "icon"
:disabled = "disabled"
:loading = "loading"
:size = "size"
>
{{ label }}
</ElButton>
</template>
<script setup lang = "ts">
import { ElButton } from "element-plus"
interface IButton {
type: string
label: string
plain?: boolean
round?: boolean
icon?: string
disabled?: boolean
loading?: boolean
size?: string
}
const { type, label, plain, round, icon, disabled, loading, size } =
defineProps<IButton>()
</script>
/компонент/HelloWorld.vue
<script setup lang = "ts">
import Button from "./atom/button/index.vue"
import Input from "./atom/input/index.vue"
const buttonClick = (type: string): void => {
console.info(`string text ${type} string text`)
}
</script>
<template>
<Button
:type = "'success'"
:label = "'Success'"
@click = "buttonClick('Success')"
/>
</template>
это не составной API, это API опций