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

76 lines
1.4 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="button-default btn"
2019-07-05 07:17:44 +00:00
type="button"
:disabled="submitting"
@click="submit()"
v-text="saveText"
/>
<button
class="button-default btn"
2019-07-05 07:17:44 +00:00
type="button"
:disabled="submitting"
@click="destroy"
v-text="cancelText"
/>
<button
class="button-default btn"
2019-07-05 07:17:44 +00:00
type="button"
:disabled="submitting"
@click="submit(false)"
v-text="saveWithoutCroppingText"
/>
2020-10-20 21:01:28 +00:00
<FAIcon
2019-07-05 07:17:44 +00:00
v-if="submitting"
2020-10-20 21:01:28 +00:00
spin
icon="circle-notch"
2019-07-05 07:17:44 +00:00
/>
2019-02-07 08:05:59 +00:00
</div>
2019-02-09 02:59:33 +00:00
</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>