VUE 引入可刪除、可上傳、可設置默認的swiper 子頁面動態輪播圖。

首先，我們要實現swiper的引用。
swiper的引用，網上很多。
先上效果圖，提示，此處爲vue的子頁面

創建swiper局部視圖

vue界面：

<template>
	<div class="pc-slide">
		<el-upload class="upload-demo " :headers="headers" action="/admin/file/uploadImg?bucketName=products" :before-remove="beforeRemove" :on-success="handleSuccess" multiple :limit="5" :show-file-list='false' :on-exceed="handleExceed">
			<el-button size="small" class="add-img el-icon-plus" type="primary"></el-button>
			<!-- <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>-->
		</el-upload>
		<div class="view">
			<div class="swiper-container">
				<a class="arrow-left" @click="leftClick" v-if="data.length>0">
					<img src="../../../../public/img/feel3.png" />
				</a>
				<a class="arrow-right" @click="rightClick" v-if="data.length>0">
					<img src="../../../../public/img/feel4.png" />
				</a>
				<div class="swiperwrapper-bg" v-if="data.length<=0">

				</div>
				<div class="swiper-wrapper" v-if="data.length>0">
					<div class="swiper-slide" v-for="item in data">
						<img :src="item.prodImgAccessPath" style="width: 100%;height: 100%;" />
						<div class="bg_hover">
							<a class="el-icon-delete" @click="deleteItemList(item)"></a>
							<a class="el-icon-star-on" v-if="item.prodImgIsMaster != '1'" @click="setDefault(item)"></a>
							<div class="bg_option"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="preview" v-if="data.length>0">
			<a class="arrow-left" @click="leftClick">
				<img style="width: 80%;height: 30px;" src="../../../../public/img/index_tab_l.png" />
			</a>
			<a class="arrow-right" @click="rightClick" v-if="data.length>0">
				<img style="width: 80%;height: 30px;" src="../../../../public/img/index_tab_r.png" />
			</a>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide active-nav" v-for="item in data">
						<img id="prodImgFilePath" :src="item.prodImgAccessPath" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

插入swiper 引用所需的js類庫

import $ from 'jquery' 	
import Swiper from "swiper";

頁面接收父頁面傳遞的參數

props: {
			data: {
				type: Array,
				default() {
					return {}
				}
			}
		},

初始化對象

return {
				viewSwiper: new Swiper('.view .swiper-container', {
					on: {
						slideChangeTransitionStart: function() {
							_this.updateNavPosition()
						}
					}
				}),
				previewSwiper: new Swiper('.preview .swiper-container', {
					slidesPerView: 'auto',
					allowTouchMove: false,
					on: {
						tap: function() {
							_this.viewSwiper.slideTo(_this.previewSwiper.clickedIndex)
						}
					}
				}),
			}

mothods方法：

/*刪除swiper子項*/
    deleteItemList(item) {
    				let _this = this;
    
    				this.$confirm(_this.$t("message.comfirmDeleteTipText"), _this.$t("layer.tips"), {
    					confirmButtonText: _this.$t("button.ok"),
    					cancelButtonText: _this.$t("button.cancel"),
    					type: 'warning'
    				}).then(function() {
    					_this.data = _this.removeAaary(_this.data, item);
    					_this.pageload();
    					_this.$message({
    						showClose: true,
    						title: _this.$t("message.titleSuccess"),
    						message: _this.$t("message.deleteSuccess"),
    						type: 'success'
    					})
    				})
    			},
    			//設置默認
    			setDefault(item) {
    				let _this = this;
    				this.$confirm("是否設置該項爲主項", _this.$t("layer.tips"), {
    					confirmButtonText: _this.$t("button.ok"),
    					cancelButtonText: _this.$t("button.cancel"),
    					type: 'warning'
    				}).then(function() {
    					for(var i = 0; i < _this.data.length; i++) {
    						if(_this.data[i].prodImgAccessPath == item.prodImgAccessPath) {
    							_this.data[i].prodImgIsMaster = "1";
    						} else {
    							_this.data[i].prodImgIsMaster = "0";
    						}
    					}
    					_this.$message({
    						message: '恭喜你，設置成功',
    						type: 'success'
    					});
    				})
    			},
    			//上傳文件限制
    			handleExceed(files) {
    				this.$message.warning(`當前限制選擇 5 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + this.data.length} 個文件`);
    			},
    			beforeRemove(file) {
    				return this.$confirm(`確定移除 ${ file.name }？`);
    			},
    			/*移除數組中某元素**/
    			removeAaary(_arr, _obj) {
    				var length = _arr.length;
    				for(var i = 0; i < length; i++) {
    					if(_arr[i] == _obj) {
    						if(i == 0) {
    							_arr.shift(); //刪除並返回數組的第一個元素
    							return _arr;
    						} else if(i == length - 1) {
    							_arr.pop(); //刪除並返回數組的最後一個元素
    							return _arr;
    						} else {
    							_arr.splice(i, 1); //刪除下標爲i的元素
    							return _arr;
    						}
    					}
    				}
    			},
    			//上傳成功方法返回
    			handleSuccess(res, file) {
    				let _this = this;
    				returnBlobImg(res.data.bucketName + "-" + res.data.fileName)
    					.then(response => {
    						let blob = response.data;
    						let newimgUrl = URL.createObjectURL(blob);
    						var defaultImg = "0";
    						if(this.data.length <= 0 || this.data == null || this.data == "undefined") {
    							defaultImg = "1";
    						}
    						var newArrStr = {
    							prodImgName: res.data.fileName,
    							prodImgFilePath: res.data.bucketName + "-" + res.data.fileName,
    							prodImgAccessPath: newimgUrl,
    							prodImgIsMaster: defaultImg,
    						};
    						_this.data.push(newArrStr);
    						window.setTimeout(function() {
    							window.URL.revokeObjectURL(blob)
    							_this.pageload();
    						}, 0)
    					});
    			},
    			//重置載入swiper動畫
    			pageload() {
    				let _this = this;
    				_this.viewSwiper = new Swiper('.view .swiper-container', {
    					on: {
    						slideChangeTransitionStart: function() {
    							_this.updateNavPosition()
    						}
    					}
    				});
    				_this.previewSwiper = new Swiper('.preview .swiper-container', {
    					//visibilityFullFit: true,
    					slidesPerView: 'auto',
    					allowTouchMove: false,
    					on: {
    						tap: function() {
    							_this.viewSwiper.slideTo(_this.previewSwiper.clickedIndex)
    						}
    					}
    				});
    			},
    			//往左
    			leftClick(e) {
    				let _this = this;
    				if(_this.viewSwiper.activeIndex == 0) {
    					_this.viewSwiper.slideTo(_this.viewSwiper.slides.length - 1, 1000);
    					return
    				}
    				_this.viewSwiper.slidePrev()
    			},
    			//往右
    			rightClick(e) {
    				let _this = this;
    				if(_this.viewSwiper.activeIndex == _this.viewSwiper.slides.length - 1) {
    					_this.viewSwiper.slideTo(0, 1000);
    					return
    				}
    				_this.viewSwiper.slideNext()
    			},
    			//swiper 的position方法
    			updateNavPosition() {
    				let _this = this;
    				$('.preview .active-nav').removeClass('active-nav')
    				var activeNav = $('.preview .swiper-slide').eq(_this.viewSwiper.activeIndex).addClass('active-nav')
    				if(!activeNav.hasClass('swiper-slide-visible')) {
    					if(activeNav.index() > _this.previewSwiper.activeIndex) {
    						var thumbsPerNav = Math.floor(_this.previewSwiper.width / activeNav.width()) - 1
    						_this.previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
    					} else {
    						_this.previewSwiper.slideTo(activeNav.index())
    					}
    				}
    			}

此時，該頁面的輪播和上傳應該已經可以了，前提自己有後臺上傳圖片的api接口。我此處用的是minion上傳

子頁面做完，父頁面調用
引入子模塊

import moduleSwiper from './module-swiper'

模塊注入頁面

components: {
			moduleSwiper,
		},

頁面引用，傳入list值，此處採用的是data傳輸，而非日prop：

		<module-swiper :data="ruleForm.itemList">
						</module-swiper>

此時，如果是添加界面，輪播已經可以了，但是，我們編輯的時候，載入之後，輪播圖無法切換輪播
此時，我們考慮，調用子頁面方法，我們採用ref，我們將方法改爲如下
注意，ref的值，必須等於引用的標籤名，否則子頁面方法調取失敗

<module-swiper ref="moduleSwiper" :data="ruleForm.itemList">
					</module-swiper>

在我們編輯的方法中，我們調取子頁面方法pageload：

let _this = this;
_this.$refs.moduleSwiper.pageload();

此時，就已經實現我們想要的動態、可刪除。可上傳、可設置默認的的swiper輪播圖。