61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="cursor">
|
||
|
|
<slot name="read">
|
||
|
|
<div class="flex align-center" v-if="!isEdit">
|
||
|
|
<span>{{ data }}</span>
|
||
|
|
<el-button @click.prevent="editNameHandle" text v-if="showEditIcon">
|
||
|
|
<el-icon><Edit /></el-icon>
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</slot>
|
||
|
|
<slot>
|
||
|
|
<div class="flex align-center" v-if="isEdit">
|
||
|
|
<el-input ref="inputRef" v-model="writeValue" placeholder="请输入"></el-input>
|
||
|
|
<span class="ml-4">
|
||
|
|
<el-button type="primary" text @click="submit">
|
||
|
|
<el-icon><Select /></el-icon>
|
||
|
|
</el-button>
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
<el-button text @click="isEdit = false">
|
||
|
|
<el-icon><CloseBold /></el-icon>
|
||
|
|
</el-button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, watch } from 'vue'
|
||
|
|
defineOptions({ name: 'ReadWrite' })
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
showEditIcon: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const emit = defineEmits(['change'])
|
||
|
|
const isEdit = ref(false)
|
||
|
|
const writeValue = ref('')
|
||
|
|
|
||
|
|
watch(isEdit, (bool) => {
|
||
|
|
if (!bool) {
|
||
|
|
writeValue.value = ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function submit() {
|
||
|
|
emit('change', writeValue.value)
|
||
|
|
isEdit.value = false
|
||
|
|
}
|
||
|
|
function editNameHandle(row: any) {
|
||
|
|
writeValue.value = props.data
|
||
|
|
isEdit.value = true
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped></style>
|