79 lines
1.2 KiB
Vue
79 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
|
|
import BaseButton from "@/components/BaseButton.vue";
|
|
import {$ref} from "vue/macros";
|
|
import {watchEffect} from "vue";
|
|
|
|
interface IProps {
|
|
value: string,
|
|
}
|
|
|
|
const props = withDefaults(defineProps<IProps>(), {
|
|
value: '',
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'save'
|
|
])
|
|
|
|
let editVal = $ref('')
|
|
let edit = $ref(false)
|
|
|
|
watchEffect(() => {
|
|
editVal = props.value
|
|
})
|
|
|
|
function save() {
|
|
emit('save', editVal)
|
|
edit = false
|
|
}
|
|
|
|
function toggle() {
|
|
edit = !edit
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="edit"
|
|
class="edit-text">
|
|
<el-input
|
|
v-model="editVal"
|
|
ref="inputRef"
|
|
autosize
|
|
autofocus
|
|
type="textarea"
|
|
:input-style="`color:black;font-size: 16rem;`"
|
|
/>
|
|
<div class="options">
|
|
<BaseButton @click="toggle">取消</BaseButton>
|
|
<BaseButton @click="save">保存</BaseButton>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="text"
|
|
:style="`font-size: 16rem;`"
|
|
@click="toggle">
|
|
{{ value }}
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.edit-text {
|
|
margin-top: 10rem;
|
|
color: black;
|
|
|
|
.options {
|
|
margin-top: 10rem;
|
|
gap: 10rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
color: black;
|
|
min-height: 18rem;
|
|
}
|
|
</style> |