首页 > 其他分享 >vue-preview图片预览组件的使用

vue-preview图片预览组件的使用

时间:2022-10-14 22:45:24浏览次数:44  
标签:vue 预览 缩略图 组件 preview 图片

一、运行命令 `npm i vue-preview `安装插件。

二、在main.js里面进行全局声明。

 

三、插入缩略图,imgs1为定义的用于存储缩略图数据的属性。

 

 

 

四、获取数据。

 

 

标签:vue,预览,缩略图,组件,preview,图片
From: https://www.cnblogs.com/sfwu/p/16793238.html

相关文章

  • vue-router
    vue-routervue的路由解决方案点击指定标签(a),地址栏(hash/history)发生变化,在指定的元素内(路由容器)显示指定的html字符串(组件)安装npminstallvue-router-S......
  • Vue路由跳转后,页面和滚动条不在最顶部。
    在路由跳转后,页面以及滚动条保持在当前位置,没用回到最顶部怎么办?解决方法如下:在main.js中加入以下代码router.afterEach((to,from,next)=>{window.scrollTo(0,0)})......
  • 前端Vue2-Day50
    Vue内置指令:v-bind:单向绑定解析表达式,可简写为:xxx。v-model:双向数据绑定。v-for:遍历对象、数组、字符串。v-if:条件渲染(动态控制节点是否存在)v-else:条件渲染(动态控制节......
  • Vue3 +elementUI + wangEditor 富文本编辑器
    哎呀,一个富文本编辑器折腾了我好久啊,刚开始找的就是wangEditor,但是上传图片的调接口,我就寻思找个简单的,后来换了quill可以不调接口上传图片,但是v-model绑定不了,而且一直......
  • 预览项目中所有文章中图片
    注意:不要在赋值之后(列表渲染)读取操作节点,因为异步的数据获取需要时间,节点来不及渲染到页面就去读取,是读取不到的-朱龙旭看世界-博客园(cnblogs.com) ......
  • Vue3动态路由传参;获取动态路由传入参数;
           路由文件,配置动态路由( /:  -后面的tabsItem为参数名称,参数名后的?号 -使参数可以为空而不报错  )1{2//关于我们3......
  • vue3 + pinia实现简单购物车功能
    这个小例子是学习vue3与pinia状态管理工具时写的一个简单的购物车功能,它实现了从模拟接口(node.js的json-server提供)读取商品数据,到添加商品到购物车和购物车中删除商品......
  • vue3 + qiankun(微前端)
    主服务路由配置constrouter=createRouter({history:createWebHistory(),routes:[{path:`/jupiter:page*`,name:`jupiter`,compo......
  • vite vue3 规范化与Git Hooks
    在《JS模块化》系列开篇中,曾提到前端技术的发展不断融入很多后端思想,形成前端的“四个现代化”:工程化、模块化、规范化、流程化。在该系列文章中已详细介绍了模块化的发......
  • Vue的基本原理
    创建vue实例,会遍历data中的属性,由object.defineProperty将其转为getter和setter,并追踪其依赖,当属性被访问或发生改变时会通知相应的watcher程序段在组件渲染的过程钟将其标......