首页 > 其他分享 >elementplus vue3 ts 单图预览封装

elementplus vue3 ts 单图预览封装

时间:2023-05-26 14:11:06浏览次数:50  
标签:__ el 单图 demo image ts elementplus error

  <div class="demo-image__preview">
    <el-image
      style="width: 50px"
      :src="props.image"
      :zoom-rate="1.2"
      :preview-src-list="[props.image]"
      :initial-index="4"
      fit="cover"
    />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  image: String,
});
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>

标签:__,el,单图,demo,image,ts,elementplus,error
From: https://www.cnblogs.com/xxdmua/p/17434570.html

相关文章

  • Vue3.3 的新功能的体验(下):泛型组件(Generic Component) 与 defineSlots
    上一篇说了DefineOptions、defineModel、Props的响应式解构和从外部导入类型这几个新功能,但是没有说Generic、defineSlots等,这是因为还没有完全搞清楚可以用在什么地方。折腾了几天终于弄清楚了。这还要从TS的泛型说起。泛型的目的和意义泛型仅仅只是表达传啥都行吗?当然......
  • UNIX网络编程:socket & select() 实现clients/server通信
    一、问题引入UNIX网络编程卷1:套接字联网API(第三版)第6章介绍了I/O复用可以通过select()的单进程服务器与多客户端通信。UNIX下可用的5中I/O模型:阻塞式I/O非阻塞式I/OI/O(select和poll)信号驱动式I/O(SIGIO)异步I/O(POSIX的aio_系列函数)其中前面4种可以分为同步I/O,第五种为......
  • Unity2018.2 Standard Assets汉化
    下载中文汉化包拷贝到安装盘:\ProgramFiles\Unity\Editor\Data\Localization下面2018.1+的StandardAssets安装方法“自从我升级到2018.2之后,就再也找不到Unity自带的那些标准资源了,就是那个StandardAssets,里面有好多东西是我的必备资源呢,比如地形的那些贴图,第一人称控制......
  • 效率&质量 华为CodeArts助力生态伙伴在软件时代先人一步
    ChatGPT大火的现状,告诉我们这个世界正在加速向AI时代演进。智能时代是数字世界,软件将无处不在。“软件定义”是新一轮科技革命和产业变革的新特征和新标志,已成为驱动未来发展的重要力量。“工欲善其事,必先利其器”。当软件变得越来越重要,做软件的工具也在愈发凸显其重要性。「No.......
  • CAfile: /etc/ssl/certs/ca-certificates.crt CApath: none
    报错信息:cURLerror77:errorsettingcertificateverifylocations: CAfile:/etc/ssl/certs/ca-certificates.crtCApath:none  ln-s/etc/pki/ca-trust/extracted/openssl/ca-bundle.trust.crt/etc/ssl/certs/ca-certificates.crt......
  • CMakeLists --- add_subdirectory 添加子目录
    命令格式:#添加一个子目录并构建该子目录。add_subdirectory(source_dir[binary_dir][EXCLUDE_FROM_ALL])#source_dir:子项目的CMakeLists.txt所在的目录#binary_dir:子项目产物的生成目录#EXCLUDE_FROM_ALL:不生成子项目的目标命令解析:source_dir必选参数。该参数指定......
  • Python竖版大屏2 | 用pyecharts开发可视化的奇妙探索!
    目录1、SHINE主题2、LIGHT主题3、MACARONS主题4、INFOGRAPHIC主题5、WALDEN主题6、WESTEROS主题7、WHITE主题8、WONDERLAND主题你好!我是@马哥python说,一名10年程序猿,正在试错用pyecharts开发可视化大屏的非常规排版。以下,我用8种ThemeType展示的同一个可视化数据大屏,可视化主题......
  • Habits That Farmonize Life
        Everynowandthen,Ireadaself--developmentbookandthenself--evaluatemyachivementsinlifeandmyfuturegoals.OnebookthatreallyhasmeexcitedisStephenR.Covey's"TheSevenHabitsofHighlyEffectivePeople".        H......
  • Are RTA agreements with environmental provisions reducing emissions?
    贸易政策中最具争议的辩论之一涉及贸易自由化对环境的影响。贸易政策对碳排放的影响有三种观点:①经济活动说:贸易自由化导致经济活动的扩大,在所有其他条件相同的情况下(生产成分和技术),污染总量将增加。②技术促进说:贸易与环境之间的第二个传递是所谓的技术效应,贸易的增加促进了现代(......
  • ubuntu系统安装的firefox浏览器 echarts图表显示有问题,但是window版的firefox浏览器是
    如果在Ubuntu系统上安装的Firefox浏览器不能正确显示ECharts图表,有几种可能的原因和解决方法:1.缺少字体在Ubuntu系统中,可能会缺少浏览器所需的字体文件,导致无法正确显示图表。可以通过以下命令安装所需的字体:```sudoapt-getinstallttf-wqy-zenhei```安装后,重启Fi......