45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col.w-full(class="gap-y-1.5")
|
|
span.title-section.font-semibold.text-xs(v-if="field.title" ) {{field.title}}
|
|
.flex.items-center(v-if="field.type === 'text' || field.type === 'textarea'" class="gap-x-2.5")
|
|
span.w-4.icon(v-if="field.icon" :class="field.icon")
|
|
base-input(v-model="data[field.label]" :mask="mask" :with-icon="field.copy" outlined)
|
|
.flex.items-center(v-if="field.copy && data[field.label]")
|
|
.copy.icon-copy.cursor-pointer(@click="() => copyValue(data[field.label])")
|
|
base-input(v-if="field.type === 'date'" :mask="mask" type="date" v-model="data[field.label]" outlined)
|
|
base-radio-buttons-group(v-if="field.type === 'radio'" v-model="data[field.label]" :items="field.items" size="xs" :column-gap="14" direction-column)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
|
|
export default {
|
|
name: "BaseDetailInput",
|
|
components: { BaseInput, BaseRadioButtonsGroup },
|
|
props: {
|
|
value: String,
|
|
field: Object,
|
|
data: Object,
|
|
mask: String,
|
|
},
|
|
data() {
|
|
return {
|
|
isNoData: true,
|
|
};
|
|
},
|
|
methods: {
|
|
copyValue(text) {
|
|
navigator.clipboard.writeText(text);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.icon
|
|
color: var(--icon-light-blue)
|
|
.copy
|
|
color: var(--btn-blue-color)
|
|
opacity: 0.6
|
|
</style>
|