0.實現(xiàn)功能
1、動態(tài)獲取圖片
2、動態(tài)設(shè)置圖片小圖寬高
3、動態(tài)設(shè)置圖片id值
4、加載完成后自動預(yù)覽第一張圖片
1、引入js
注意：引入順序，先加載vue，在加載elementui 否則elementui無效果
1.1 引入element_ui樣式
地址：https://unpkg.com/element-ui/lib/theme-chalk/index.css
1.2 引入vue.js
地址：https://cn.vuejs.org/v2/guide/installation.html
1.3 引入element_ui.js
地址：https://unpkg.com/element-ui/lib/index.js?
1.4 下載element_ui的字體文件
注意：如果不下載，有的圖標(biāo)不會顯示
?地址：https://unpkg.com/element-ui/lib/theme-chalk/fonts/
位置放到fonts/下
1.5 遇到問題：Failed to decode downloaded font
原因：文件受損，無法解析
驗證文件地址：https://www.fontsquirrel.com/tools/webfont-generator
解決方案：重新下載
1.6 引入axios
地址：https://axios-http.com/docs/intro
cdn方式引入的話，解壓后在這里：
2、使用
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>element-圖片遍歷循環(huán)+預(yù)覽-demo</title>
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head>
<body>
<div id="app">
<el-image
v-for="(item, index) in srcList"
:id="'image_'+index"
:style="{'width': setting.width, 'height': setting.height}"
:src="item"
:preview-src-list="srcList"
@load ="zoomFirstImage"
>
</el-image>
</div>
<script>
var tbbh = "${param.tbbh}";
var sysenname ="${sessionScope.appinfo.sysenname}";
//通過vue.js 把數(shù)據(jù)和對應(yīng)的視圖關(guān)聯(lián)起來
new Vue({
el: '#app',
data: {
srcList: [],
setting: {
width: "100px",
height: "100px"
}
},
mounted:function(){
this.getInfo();
},
methods:{
getInfo:function (){
var url ="<%=path%>/files/getFileList.do";
var self = this;
axios.get(url, {
params: {
"path": sysenname + "/tpk/" + tbbh
}
}).then((response) => {
self.srcList= response.data;
this.changeImageSize();
})
},
changeImageSize:function(){
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
var offset = 30;
this.setting.width = (w / 2) - offset;
this.setting.height= (h / 2) - offset;
},
zoomFirstImage:function(){
document.getElementById("image_0").click();
}
}
})
</script>
<style>
.el-image{margin: 10px;}
</style>
</body>
</html>
3、效果
文章來源：http://www.zghlxwxcb.cn/news/detail-403741.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-403741.html
到了這里，關(guān)于【Element_UI】圖片動態(tài)獲取+預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
