插件预览图
功用引见
1.长按保留图片
2.右下角图片点击保留图片
3.点击图片能够隐蔽图片
运用教程
1.插件代码拷贝
- 下载后把components目录下saveFile.vue文件拷贝到本身项目目录下
2.插件全局设置
- 在项目里main.js中设置以下代码
import savefile from './components/saveFile.vue'
Vue.component('savefile',savefile)
3.插件运用
- vue页面运用
<template>
<view>
<!-- 预览图片 -->
<savefile v-if="isShowPhoto" :url="qrUrl" @hide="hidePhoto"></savefile>
</view>
</template>
<script>
export default {
data() {
return {
qrUrl:'/static/img/img1.jpg',
isShowPhoto:true,
};
},
onLoad() {},
methods: {
hidePhoto(){
this.isShowPhoto = false;
uni.showToast({
title:'图片已隐蔽',
icon:'none'
})
}
}
};
</script>
兼容性
uni-app项目中运用都兼容 除了H5