mirror of https://github.com/ElemeFE/element
49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<template>
|
|
<div class="el-dragger__cover" @click.stop v-if="image">
|
|
<transition name="fade-in">
|
|
<el-progress
|
|
class="el-dragger__cover__progress"
|
|
v-if="image.status === 'loading'"
|
|
size="large"
|
|
:percentage="image.percentage"
|
|
:type="image.status === 'finished' ? 'green' : 'blue'">
|
|
</el-progress>
|
|
</transition>
|
|
<div v-if="image.status === 'finished'" @mouseenter="mouseover = true" @mouseleave="mouseover = false">
|
|
<img :src="image.url">
|
|
<transition name="fade-in">
|
|
<div v-show="mouseover" class="el-dragger__cover__interact">
|
|
<div class="el-draggeer__cover__btns">
|
|
<span class="btn" @click="$parent.$refs.input.click()"><i class="el-icon-upload"></i><span>继续上传</span></span>
|
|
<span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>查看图片</span></span>
|
|
<span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>删除</span></span>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition name="md-fade-top">
|
|
<h4 v-show="mouseover" class="el-dragger__cover__title">{{image.name}}</h4>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
image: {},
|
|
onPreview: {
|
|
type: Function,
|
|
default: function() {}
|
|
},
|
|
onRemove: {
|
|
type: Function,
|
|
default: function() {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
mouseover: false
|
|
};
|
|
}
|
|
};
|
|
</script>
|