这节课,我们来看下,怎样将一个 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 {