MediaContainer 媒体文件展示容器
用于在给定元素中以原比例展示图片或视频内容。适用于需要在图片上叠加可操作区域或可拖拽元素拖拽时保持比例。
说明
媒体元素设置css属性object-fit也可以实现维持比例居中显示,但是拖拽时的影像会变形。
基础用法
本示例裁剪后将在新窗口打开裁剪后的图片, 获取的数据可在控制台查看
props和插槽的使用
外部逻辑处理资源懒加载
Attributes
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
type | string | 媒体文件类型 | image | video | image |
src | string | 文件地址 | -- | -- |
loading | boolean | 是否在加载中, 传入src时组件自动处理,一般和mediaSize配合使用 | -- | true |
autoFit | boolean | 是否自动适应容器尺寸变化 | -- | true |
showBackgroud | boolean | 是否需要显示背景 | -- | true |
containerForceRender | boolean | 是否始终渲染媒体容器相关节点,适用于需要懒加载的情况 | -- | true |
v-model:mediaSize | Size | 媒体文件尺寸,如果媒体源被其他组件引用,也可以用媒体元素的实际像素尺寸传入 | -- | -- |