|
@@ -1,5 +1,6 @@
|
|
|
import { Icon, Image, Toast, Uploader } from "vant";
|
|
|
import { defineComponent } from "vue";
|
|
|
+import vueCropper from 'vue-cropper';
|
|
|
import styles from "./index.module.less";
|
|
|
|
|
|
import iconUploader from '@common/images/icon_uploader.png';
|
|
@@ -16,6 +17,10 @@ export default defineComponent({
|
|
|
deletable: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
+ },
|
|
|
+ cropper: { // 是否进行裁切
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -25,14 +30,14 @@ export default defineComponent({
|
|
|
beforeRead(file: any) {
|
|
|
const isLt2M = file.size / 1024 / 1024 < 5
|
|
|
if (!isLt2M) {
|
|
|
- Toast('上传文件大小不能超过 5MB')
|
|
|
- return false
|
|
|
+ Toast('上传文件大小不能超过 5MB')
|
|
|
+ return false
|
|
|
}
|
|
|
return true
|
|
|
},
|
|
|
beforeDelete(file: any, detail: { index: any; }) {
|
|
|
- // this.dataModel.splice(detail.index, 1)
|
|
|
- return true
|
|
|
+ // this.dataModel.splice(detail.index, 1)
|
|
|
+ return true
|
|
|
},
|
|
|
async afterRead(file: any, detail: any) {
|
|
|
try {
|
|
@@ -56,18 +61,25 @@ export default defineComponent({
|
|
|
render() {
|
|
|
return (
|
|
|
<div class={styles['uploader-section']}>
|
|
|
- {/* @ts-ignore */}
|
|
|
- <Uploader afterRead={this.afterRead} beforeRead={this.beforeRead} beforeDelete={this.beforeDelete}
|
|
|
- v-slots={{
|
|
|
- default: () => (this.value ? <div class={styles['img-section']} onClick={this.onClose}>
|
|
|
- { this.deletable ? <Icon name="cross" class={styles["img-close"]} /> : null }
|
|
|
- <Image fit="cover" class={styles.uploadImg} src={this.value} />
|
|
|
- </div> : <div class={styles.uploader}>
|
|
|
- <Icon name={iconUploader} size="32" />
|
|
|
- <p class={styles.uploaderText}>{this.tips}</p>
|
|
|
- </div> )
|
|
|
- }}
|
|
|
- />
|
|
|
+ {this.cropper ? <vueCropper
|
|
|
+ ref="cropper"
|
|
|
+ img="option.img"
|
|
|
+ outputSize="option.size"
|
|
|
+ outputType="option.outputType"
|
|
|
+ ></vueCropper> : (
|
|
|
+ // @ts-ignore
|
|
|
+ <Uploader afterRead={this.afterRead} beforeRead={this.beforeRead} beforeDelete={this.beforeDelete}
|
|
|
+ v-slots={{
|
|
|
+ default: () => (this.value ? <div class={styles['img-section']} onClick={this.onClose}>
|
|
|
+ {this.deletable ? <Icon name="cross" class={styles["img-close"]} /> : null}
|
|
|
+ <Image fit="cover" class={styles.uploadImg} src={this.value} />
|
|
|
+ </div> : <div class={styles.uploader}>
|
|
|
+ <Icon name={iconUploader} size="32" />
|
|
|
+ <p class={styles.uploaderText}>{this.tips}</p>
|
|
|
+ </div>)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
</div>
|
|
|
)
|
|
|
}
|