前端学习（2698）：重读vue电商网站19之处理图片预览操作

news/2025/4/6 1:17:41/文章来源:https://geyao.blog.csdn.net/article/details/110781838

图片预览窗可以用 el-dialog 组件来做，然后通过 on-preview 函数来处理图片预览的操作。

<!-- 图片预览 -->
<el-dialog title="图片预览" :visible.sync="previewVisable" width="50%"><img :src="previewPath" class="previewImg">
</el-dialog>

通过函数来获取上传图片的真实 url ，然后监听图片预览窗口的打开即可。

// 处理图片预览的操作
handlePreview(file) {// 获取图片显示的urlthis.previewPath = file.response.data.urlthis.previewVisable = true
}

最终效果如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/414885.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS

/*** 判断定位服务是否开启** param* return true 表示开启*/ public static boolean isLocationEnabled(Context context) {int locationMode 0;String locationProviders;if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {try {locationMode Settings.Secure.…

vscode-spring-boot YAML_UNKNOWN_PROPERTY 解决

使用vscode开发，安装了vscode-spring-boot ,报错如下解决方案，增加对yml文件的识别新增.vscode/settings.json 内容如下： {"files.associations": {"*.yml": "yaml"} }

adb命令检测apk启动时间、内存、CPU使用情况、流量、电池电量等——常用的adb命令...

ADB：Android Debug Bridge，是Android SDK里一个可以直接操作安卓模拟器或真实设备的工具，颇为强大。检测APP：adb shell am start -W packageName/.MainActivity //启动时间adb shell dumpsys meminfo $PID …

vue3父组件调用子组件方法

父组件 <component ref"xponent" /><script lang"ts" setup> import { ref } from "vue"; const xponent ref();const download async () > {console.log(xponent)xponent.value.download() } </script>子组件核心方法&…

Android之Junit测试类

今天跟着视频学习了Junit测试类，趁热打铁、顺便把学的东西整理下来，再就是为了以后好回顾 1、Junit单元测试介绍： 在实际开发中，经常要对已经实现的功能进行单元测试，以保证当前单元没问题，尽可能的减少已有…

前端学习（2699）：重读vue电商网站20之使用Timeline 时间线

可视化地呈现时间流信息。由于 vue-cli-plugin-element 最后更新时间是 2019年1月，而 element-ui 中 Timeline 时间线更新是在 3月份，因此我们没有办法直接进行引用。因此，我们直接通过手动导入的方式。然后，我们打开 element.j…

Android 高德地图根据地址获取经纬度，计算两个坐标的距离

1、到高德开放平台申请，获取key 高德开放平台：https://lbs.amap.com/ 2、下载高德定位及地址搜索SDK:https://download.csdn.net/download/meixi_android/10845407 3、项目绑定高德SDK （1）配置key <meta-data android:name&q…

Graphics.DrawRectangle Method（矩形）

Overload List Name Description DrawRectangle(Pen, Int32, Int32, Int32, Int32) Draws a rectangle specified by a coordinate pair, a width, and a height. DrawRectangle(Pen, Rectangle) Draws a rectangle specified by a Rectangle structure. DrawRec…

前端学习（2700）：重读vue电商网站21之如何导入全局样式表

直接在 main.js将相关样式导入即可 Code // 导入全局样式表 import ./assets/css/global.css

Android中WebService的应用

1.简介 Android中的WebService 是一种基于SOAP协议的远程调用标准。通过WebService可以将不同操作系统平台，不同语言、不同技术整合到一起。在Android SDK中并没有提供调用WebService的库，因此，需要使用第三方类库（KSOAP2&#x…

宝塔 nginx 配置文件的存放目录配置vue的history模式

在项目中使用vue的history模式，需要配置文件，使用到宝塔面板的服务器。现在记录存放位置。 /www/server/panel/vhost/nginx配置history模式 try_files $uri $uri/ /index.html qkbim/index.html;配置跨域 add_header Access-Control-Allow-Origin *;ad…

Android 高德地图添加自定义Marker，添加图片Marker，Marker点击事件

地图点击事件 map.setOnMapClickListener(new AMap.OnMapClickListener() {Overridepublic void onMapClick(LatLng latLng) {addMarker(map, latLng.latitude, latLng.longitude, latLng.toString());} }); private void addMarker(AMap map, double latitude, double longitu…