forked from opentiny/tiny-engine
83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<template>
|
|
<div class="demo-form">
|
|
<tiny-form label-position="left" label-width="53px">
|
|
<template v-for="label in labelList" :key="label">
|
|
<tiny-form-item v-if="labelTranslations[label]" :label="labelTranslations[label] || label">
|
|
<tiny-input v-model="formData[label]"></tiny-input>
|
|
</tiny-form-item>
|
|
</template>
|
|
<tiny-form-item :class="{ footerbtnHide: footerbtnHide }">
|
|
<tiny-button @click="cancel">取消</tiny-button>
|
|
<tiny-button @click="confirm">确定</tiny-button>
|
|
</tiny-form-item>
|
|
</tiny-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive } from 'vue'
|
|
import { Form, FormItem, Input, Button } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyForm: Form,
|
|
TinyFormItem: FormItem,
|
|
TinyInput: Input,
|
|
TinyButton: Button
|
|
},
|
|
props: {
|
|
option: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
footerbtnHide: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const labelList = Object.keys(props.option)
|
|
const formData = reactive({ ...props.option })
|
|
|
|
const labelTranslations = {
|
|
label: '显示值',
|
|
text: '展示值',
|
|
zh_CN: '中文',
|
|
en_US: '英文',
|
|
field: 'field',
|
|
title: 'title',
|
|
description: '描述',
|
|
defaultValue: '缺省值'
|
|
}
|
|
|
|
const cancel = () => {
|
|
emit('cancel')
|
|
}
|
|
|
|
const confirm = () => {
|
|
emit('confirm', formData)
|
|
}
|
|
|
|
return {
|
|
labelList,
|
|
formData,
|
|
labelTranslations,
|
|
cancel,
|
|
confirm
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo-form {
|
|
.tiny-button {
|
|
min-width: 50px;
|
|
padding: 0 8px;
|
|
}
|
|
.footerbtnHide {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|