将参数 props 限制在一个类型的列表中

最新推荐文章于 2024-06-07 10:13:09 发布

梅花十三儿

最新推荐文章于 2024-06-07 10:13:09 发布

阅读量322

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Android062005/article/details/128431870

版权

本文介绍如何在Vue组件中使用validator属性来确保props参数`imgStyle`的值仅限于预定义的集合，例如`'round'`和`'square'`。通过设置validator，当用户传入无效值时，组件会发出警告，帮助开发者快速定位问题。这种做法在封装高质量组件时非常有用，类似于ElementUI或Antd UI库中对Button组件类型的验证。

摘要由CSDN通过智能技术生成

这节课，我们来看下，怎样将一个 props 限制在一个特定值的集合中。

现在我们有一个 Image 组件，内容如下：

<template><imgclass="image":class="computeImgStyle"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-9cd5b6a8a9a4882925a3fbb7d724c610_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671460510&t=1439c0f17c7afc467b9798f0466cdbda"alt="图片加载失败"/>
</template>

<script setup lang="ts"> const props = defineProps({imgStyle: {type: String,default: 'square'}});const computeImgStyle = computed(() => {return {square: props.imgStyle === 'square',rounded: props.imgStyle === 'rounded'};}); </script>

<style scoped lang="scss"> .image {margin: 100px;width: 70%;}.square {