mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-08 12:33:17 +08:00
kert
91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<template>
|
|
<view class="vip-component-upload-image-drag">
|
|
|
|
<!-- 顶部自定义导航 -->
|
|
<tn-nav-bar fixed>可拖拽图片上传</tn-nav-bar>
|
|
|
|
<!-- 页面内容 -->
|
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
|
|
|
<view class="drag__wrap tn-margin-top">
|
|
<tn-image-upload-drag ref="imageUpload" :action="action" :height="220" :width="220" :formData="formData"
|
|
:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
|
|
:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
|
|
:customBtn="customBtn" @sort-list="onSortList" />
|
|
<view class="tn-flex tn-margin-top-xs tn-flex-row-center">
|
|
<tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
|
|
<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx"
|
|
@tap="clear">清空列表</tn-button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'VipComponentUploadImageDrag',
|
|
data() {
|
|
return {
|
|
action: 'https://www.hualigs.cn/api/upload',
|
|
// action: '',
|
|
formData: {
|
|
apiType: 'this,ali',
|
|
token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
|
|
image: null
|
|
},
|
|
fileList: [{
|
|
url: 'https://resource.tuniaokj.com/images/shop/bag1.jpg'
|
|
}],
|
|
showUploadList: true,
|
|
customBtn: false,
|
|
autoUpload: true,
|
|
showProgress: true,
|
|
deleteable: true,
|
|
customStyle: false,
|
|
maxCount: 9,
|
|
disabled: false,
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.pushFileList().then(res=>{
|
|
this.fileList=[...this.fileList,...res]
|
|
})
|
|
},
|
|
methods: {
|
|
//模拟异步获取数据
|
|
async pushFileList() {
|
|
return [{
|
|
url: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
|
|
}, {
|
|
url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
|
|
}, {
|
|
url: 'https://resource.tuniaokj.com/images/shop/cup2.jpg'
|
|
}]
|
|
},
|
|
// 手动上传文件
|
|
upload() {
|
|
this.$refs.imageUpload.upload()
|
|
},
|
|
// 手动清空列表
|
|
clear() {
|
|
this.$refs.imageUpload.clear()
|
|
},
|
|
// 图片拖拽重新排序
|
|
onSortList(list) {
|
|
console.log(list);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drag {
|
|
&__wrap {
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
}
|
|
}
|
|
</style> |