de-net/src/view/iframe/publish/components/form-input.vue

<template>
    <div class="form-input-wrapper">
        <div class="prefix" v-if="prefix">
            {{prefix}}
        </div>
        <slot name="content"></slot>
        <component-zoom :width="50" fontSize="14" :txt="suffix" v-if="suffix">
            <div class="suffix">
                {{suffix}}
            </div>
        </component-zoom>
    </div>
</template>

<script setup>
import { onMounted, ref, defineProps, defineEmits } from "vue";
import ComponentZoom from '@/view/components/component-zoom.vue'

const props = defineProps({
    prefix: {
        type: String,
        default: '',
    },
    suffix: {
        type: String,
        default: '',
    },
});
const emits = defineEmits(["close", "confirm", "postPublishFinish"]);

onMounted(() => {
}) 
</script>

<style scoped lang="scss">
.form-input-wrapper {
    width: max-content;
    height: 38px;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #999999;
    font-weight: 400;
    font-size: 14px;

    .prefix {
        margin-right: 4px;
    }

    .suffix {
        margin-left: 4px;
        white-space: nowrap;
        color: #999999;
        font-weight: 400;
    }
}
</style>