124 lines
2.5 KiB
Vue
124 lines
2.5 KiB
Vue
<template>
|
|
<div class="user-comment__open py-3">
|
|
<!-- <div class="d-flex justify-content-between align-items-center"> -->
|
|
<!-- <h6 class="mb-2">
|
|
فرم ثبت نظر
|
|
</h6> -->
|
|
<!-- <button class="btn p-0" @click="close()" type="button">
|
|
<span class="tavasi tavasi-Component-294--1 text__13"></span>
|
|
</button> -->
|
|
<!-- </div> -->
|
|
<div class="selected-text">
|
|
{{ selectedText }}
|
|
</div>
|
|
<div class="footer position-static px-0">
|
|
<textarea
|
|
placeholder="نظر یا پیشنهاد خود را بنویسید."
|
|
class="form-control"
|
|
v-model.trim="description"
|
|
@keyup.enter="save()"
|
|
name="user-comment"
|
|
id="user-comment"
|
|
cols="30"
|
|
rows="1"
|
|
></textarea>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<button-component
|
|
title="ذخیره"
|
|
classes="btn btn-primary text__13"
|
|
@click="save()"
|
|
buttonText="ذخیره"
|
|
>
|
|
</button-component>
|
|
<button-component
|
|
title="بستن"
|
|
classes="btn btn-outline-danger text__13"
|
|
buttonText="بستن"
|
|
@click="close"
|
|
>
|
|
</button-component>
|
|
|
|
</div>
|
|
|
|
<div class="bubble-arrow-down">
|
|
<div class="before"></div>
|
|
<div class="after"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
selectedText: {
|
|
default: null,
|
|
},
|
|
},
|
|
emits: ["close", "save"],
|
|
data() {
|
|
return {
|
|
description: null,
|
|
};
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.$emit("close");
|
|
},
|
|
save() {
|
|
this.$emit("save", this.description);
|
|
this. close();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-comment__open {
|
|
position: absolute;
|
|
opacity: 0;
|
|
max-width: 20em;
|
|
}
|
|
|
|
.selected-text {
|
|
height: 3.3em;
|
|
overflow: auto;
|
|
}
|
|
.bubble-arrow-down {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 49%;
|
|
}
|
|
|
|
.before {
|
|
display: block;
|
|
height: 0px;
|
|
position: absolute;
|
|
width: 0px;
|
|
border-width: 9px;
|
|
border-style: solid;
|
|
border-color: initial;
|
|
-o-border-image: initial;
|
|
border-image: initial;
|
|
left: -9px;
|
|
border-color: rgb(187, 187, 187) transparent;
|
|
border-bottom-width: 0px;
|
|
}
|
|
|
|
.after {
|
|
display: block;
|
|
height: 0px;
|
|
position: absolute;
|
|
width: 0px;
|
|
border-width: 8px;
|
|
border-style: solid;
|
|
border-color: initial;
|
|
-o-border-image: initial;
|
|
border-image: initial;
|
|
left: -8px;
|
|
border-color: rgb(255, 255, 255) transparent;
|
|
border-bottom-width: 0px;
|
|
bottom: -8px;
|
|
}
|
|
</style>
|