refs #118 Show preview of attached image in new toot

This commit is contained in:
AkiraFukushima 2018-03-29 13:36:47 +09:00
parent 3abc8554ef
commit 215ca53184
1 changed files with 30 additions and 0 deletions

View File

@ -9,6 +9,12 @@
<textarea v-model="status" ref="status" @keyup.meta.enter.exact="toot" @keyup.ctrl.enter.exact="toot" @keyup.enter.exact="enter" @keydown="keydown" @keyup="keyup"></textarea>
</div>
</el-form>
<div class="preview">
<div class="image-wrapper" v-for="media in attachedMedias" v-on:key="media.id">
<img :src="media.preview_url" class="preview-image" />
<icon class="remove-image" name="times-circle" @click="removeAttachment(media)"></icon>
</div>
</div>
<div slot="footer" class="dialog-footer">
<div class="upload-image">
<el-button size="small" type="text" @click="selectImage"><icon name="camera"></icon></el-button>
@ -148,6 +154,9 @@ export default {
type: 'error'
})
})
},
removeAttachment (media) {
// TODO:
}
}
}
@ -188,6 +197,27 @@ export default {
outline: 0;
}
}
.preview {
box-sizing: border-box;
padding: 0 12px;
.image-wrapper {
position: relative;
display: inline-block;
.preview-image {
width: 60px;
}
.remove-image {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
}
}
}
.el-dialog__footer {