MediaContainer 媒体文件展示容器

用于在给定元素中以原比例展示图片或视频内容。适用于需要在图片上叠加可操作区域或可拖拽元素拖拽时保持比例。

说明

媒体元素设置css属性object-fit也可以实现维持比例居中显示,但是拖拽时的影像会变形。

基础用法

本示例裁剪后将在新窗口打开裁剪后的图片, 获取的数据可在控制台查看

props和插槽的使用

外部逻辑处理资源懒加载

Attributes

参数类型说明可选值默认值
typestring媒体文件类型image | videoimage
srcstring文件地址----
loadingboolean是否在加载中, 传入src时组件自动处理,一般和mediaSize配合使用--true
autoFitboolean是否自动适应容器尺寸变化--true
showBackgroudboolean是否需要显示背景--true
containerForceRenderboolean是否始终渲染媒体容器相关节点,适用于需要懒加载的情况--true
v-model:mediaSizeSize媒体文件尺寸,如果媒体源被其他组件引用,也可以用媒体元素的实际像素尺寸传入----
Last Updated:
Contributors: wxhccche