VCarouselItem API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| alt | ||
| Alternate text for screen readers. Leave empty for decorative images. | ||
| aspect-ratio | ||
| Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| content-class | ||
| Apply a custom class to the internal content element. | ||
| cover | ||
| Resizes the background image to cover the entire container. | ||
| crossorigin | ||
| Specify that images should be fetched with CORS enabled MDN | ||
| disabled | ||
| Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method. | ||
| draggable | ||
| Controls the draggable behavior of the image. See MDN . | ||
| eager | ||
| Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. | ||
| gradient | ||
| The gradient to apply to the image. This can be any valid CSS gradient declaration. You can find more information on the MDN documentation for gradients . | ||
| height | ||
| Sets the height for the component. | ||
| inline | ||
| Display as an inline element instead of a block, also disables flex-grow. | ||
| lazy-src | ||
| Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied. NOTE: This prop has no effect unless either height or aspect-ratio are provided. | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| min-height | ||
| Sets the minimum height for the component. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| options | ||
| Options that are passed to the Intersection observer constructor. | ||
| position | ||
| Applies object-position styles to the image and placeholder elements. | ||
| referrerpolicy | ||
| Define which referrer is sent when fetching the resource MDN | ||
| reverse-transition | ||
| Sets the reverse transition. | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| selected-class | ||
| Configure the active CSS class applied when an item is selected. | ||
| sizes | ||
| For use with srcset, see MDN . | ||
| src | ||
| The image URL. This prop is mandatory. | ||
| srcset | ||
| A set of alternate images to use based on device size. Read more… . | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| transition | ||
| The transition to use when switching from lazy-src to src. Can be one of the built in or custom transition. | ||
| value | ||
| The value used when the component is selected in a group. If not provided, a unique ID will be used. | ||
| width | ||
| Sets the width for the component. | ||
插槽
| default |
| The default Vue slot. |
| error |
| Will be shown if the image fails to load, replacing the placeholder slot. |
| placeholder |
| Display an overlay while the image is loading. |
| sources |
| A list of <source> elements. If this slot is used v-img will render a <picture> instead of <img>. |