65 lines
1.1 KiB
Vue
65 lines
1.1 KiB
Vue
<template>
|
|
<div class="user-text">
|
|
<el-button type="primary" :icon="ArrowLeft" class="back" v-if="userText.backText" @click="handleBack">{{ userText.backText
|
|
}}</el-button>
|
|
<h2 v-if="userText.title">{{ userText.title }}</h2>
|
|
<p class="text" v-if="userText.text">{{ userText.text }}</p>
|
|
<p class="account" v-if="userText.account">{{ userText.account }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
defineOptions({
|
|
name: 'Text'
|
|
})
|
|
import { ArrowLeft } from '@element-plus/icons-vue'
|
|
interface UserText {
|
|
backText: string
|
|
title: string
|
|
text: string
|
|
account: string
|
|
}
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
userText?: Partial<UserText>
|
|
}>(),
|
|
{
|
|
userText: () => ({
|
|
backText: '',
|
|
title: '',
|
|
text: '',
|
|
account: ''
|
|
})
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits(['back'])
|
|
|
|
const handleBack = () => {
|
|
emit('back')
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user-text {
|
|
margin-bottom: 24px;
|
|
|
|
.back {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #000;
|
|
margin-bottom: 10px;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.text {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style> |