forked from opentiny/tiny-engine
132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<template>
|
|
<div class="text-input">
|
|
<tiny-input :modelValue="inputValue" placeholder="请输入内容" v-bind="$attrs" @input="inputChange">
|
|
<template #suffix>
|
|
<tiny-popover
|
|
ref="popoverRef"
|
|
width="260"
|
|
trigger="click"
|
|
:visible-arrow="false"
|
|
popper-class="lowcode"
|
|
@hide="onHide"
|
|
>
|
|
<div class="popover-content">
|
|
<icon-close class="icon-close" @click="closePopover"></icon-close>
|
|
<bind-i18n
|
|
ref="addI1i8nRef"
|
|
v-model="i18nValue"
|
|
:lang-data="langs"
|
|
:is-bind="isBind"
|
|
:currentLang="currentLanguage"
|
|
:data="modelValue"
|
|
:locales="i18nResource.locales"
|
|
@bind="setI18n"
|
|
></bind-i18n>
|
|
</div>
|
|
|
|
<template #reference>
|
|
<icon-language :class="['icon-language', { isBind }]"></icon-language>
|
|
</template>
|
|
</tiny-popover>
|
|
</template>
|
|
</tiny-input>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watchEffect, computed } from 'vue'
|
|
import { Input, Popover } from '@opentiny/vue'
|
|
import { IconLanguage, IconClose } from '@opentiny/vue-icon'
|
|
import BindI18n from './BindI18n.vue'
|
|
import { useTranslate } from '@opentiny/tiny-engine-controller'
|
|
|
|
export default {
|
|
components: {
|
|
TinyInput: Input,
|
|
BindI18n,
|
|
TinyPopover: Popover,
|
|
IconClose: IconClose(),
|
|
IconLanguage: IconLanguage()
|
|
},
|
|
inheritAttrs: false,
|
|
props: {
|
|
modelValue: {
|
|
type: [String, Object],
|
|
default: ''
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const { currentLanguage, getLangs, i18nResource } = useTranslate()
|
|
const langs = computed(() => getLangs())
|
|
const isBind = computed(() => props.modelValue?.type === 'i18n')
|
|
const inputValue = ref('')
|
|
const i18nValue = ref(props.modelValue?.key || '')
|
|
const addI1i8nRef = ref(null)
|
|
const popoverRef = ref(null)
|
|
|
|
watchEffect(() => {
|
|
i18nValue.value = props.modelValue?.key || ''
|
|
inputValue.value = useTranslate().translate(props.modelValue)
|
|
})
|
|
|
|
const inputChange = (event) => {
|
|
emit('update:modelValue', event.target.value) // 直接修改时去掉绑定
|
|
}
|
|
|
|
const setI18n = (data) => {
|
|
emit('update:modelValue', data)
|
|
}
|
|
|
|
const onHide = () => {
|
|
if (addI1i8nRef.value) {
|
|
addI1i8nRef.value.showEditItem = false
|
|
}
|
|
}
|
|
|
|
const closePopover = () => {
|
|
popoverRef.value.state.showPopper = false
|
|
}
|
|
|
|
return {
|
|
isBind,
|
|
inputValue,
|
|
inputChange,
|
|
langs,
|
|
i18nValue,
|
|
currentLanguage,
|
|
i18nResource,
|
|
setI18n,
|
|
addI1i8nRef,
|
|
onHide,
|
|
closePopover,
|
|
popoverRef
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.text-input {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.tiny-svg {
|
|
outline: none;
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: var(--ti-lowcode-toolbar-icon-color);
|
|
}
|
|
&.isBind {
|
|
color: var(--ti-lowcode-icon-bind-color);
|
|
}
|
|
}
|
|
}
|
|
.popover-content {
|
|
text-align: right;
|
|
.icon-close {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
</style>
|