akkoma-fe/src/components/image_cropper/image_cropper.vue

85 lines
1.6 KiB
Vue
Raw Normal View History

2019-02-07 08:05:59 +00:00
<template>
<div class="image-cropper">
2019-02-09 02:59:33 +00:00
<div v-if="dataUrl">
<div class="image-cropper-image-container">
2019-07-05 07:17:44 +00:00
<img
ref="img"
:src="dataUrl"
alt=""
@load.stop="createCropper"
>
2019-02-07 08:05:59 +00:00
</div>
2019-02-09 02:59:33 +00:00
<div class="image-cropper-buttons-wrapper">
2019-07-05 07:17:44 +00:00
<button
class="btn"
type="button"
:disabled="submitting"
@click="submit()"
v-text="saveText"
/>
<button
class="btn"
type="button"
:disabled="submitting"
@click="destroy"
v-text="cancelText"
/>
<button
class="btn"
type="button"
:disabled="submitting"
@click="submit(false)"
v-text="saveWithoutCroppingText"
/>
<i
v-if="submitting"
class="icon-spin4 animate-spin"
/>
2019-02-07 08:05:59 +00:00
</div>
2019-07-05 07:17:44 +00:00
<div
v-if="submitError"
class="alert error"
>
{{ submitErrorMsg }}
<i
class="button-icon icon-cancel"
@click="clearError"
/>
2019-02-09 02:59:33 +00:00
</div>
</div>
2019-07-05 07:17:44 +00:00
<input
ref="input"
type="file"
class="image-cropper-img-input"
:accept="mimes"
>
2019-02-07 08:05:59 +00:00
</div>
</template>
<script src="./image_cropper.js"></script>
<style lang="scss">
.image-cropper {
&-img-input {
display: none;
}
&-image-container {
position: relative;
img {
display: block;
max-width: 100%;
}
}
2019-02-09 02:59:33 +00:00
&-buttons-wrapper {
2019-03-19 01:19:42 +00:00
margin-top: 10px;
button {
margin-top: 5px;
}
2019-02-07 08:05:59 +00:00
}
}
</style>