This commit is contained in:
parent
dfdd1b06e3
commit
bbe80a8505
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
<!-- 使用示例 -->
|
||||||
|
<FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
|
||||||
|
<template #default>
|
||||||
|
<el-form :model="form" label-width="120px">
|
||||||
|
<el-form-item label="Activity name">
|
||||||
|
<el-input v-model="form.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Activity zone">
|
||||||
|
<el-select v-model="form.region" placeholder="please select your zone">
|
||||||
|
<el-option label="Zone one" value="shanghai" />
|
||||||
|
<el-option label="Zone two" value="beijing" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Activity time">
|
||||||
|
<el-col :span="11">
|
||||||
|
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2" class="text-center">
|
||||||
|
<span class="text-gray-500">-</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="11">
|
||||||
|
<el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</FormDialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from "vue"
|
||||||
|
/* 表单弹框 */
|
||||||
|
const formDialog = ref(false)
|
||||||
|
const FormDialogData = reactive({
|
||||||
|
title: '新增', // String | 必填 | 标题
|
||||||
|
width: '30%', // String | 默认值 30% | 弹框宽度
|
||||||
|
formType: 'slot', // 'slot' 默认为 slot | 'json' (后台接口返回就配置 json)
|
||||||
|
|
||||||
|
/* ------------- */
|
||||||
|
// 注意:以下配置为 json 时才有效
|
||||||
|
formJosnRules: {}, // 默认为{},表单校验规则
|
||||||
|
formJosnLabelWidth: '120px', // 默认为 120px,表单 label 宽度
|
||||||
|
// form 元素
|
||||||
|
formJosnElement: [
|
||||||
|
{
|
||||||
|
type: 'input', // 元素类型
|
||||||
|
cloSpan: '24', // 栅格布局所占份数 (默认24)
|
||||||
|
disabled: false, // 元素是否禁用(默认为false)
|
||||||
|
label: '姓名', // 元素的 label
|
||||||
|
placeholder: '请填写姓名', // 元素的 placeholder
|
||||||
|
model: 'name', // 元素 form 的 key
|
||||||
|
|
||||||
|
// options: [] // type 为 select 生效 (默认为 [] )
|
||||||
|
|
||||||
|
// dateType: [] // type 为 date 生效 (默认为 date )
|
||||||
|
// dateValueformat: [] // type 为 date 生效 (默认为 YYYY-MM-DD )
|
||||||
|
},
|
||||||
|
],
|
||||||
|
formJosnDisabled: false, // 表单是否禁用
|
||||||
|
formJsonData: {}, // 新增或者编辑表单值 (编辑必须传)
|
||||||
|
})
|
||||||
|
const handleSubmit = (formJsonValue) => {
|
||||||
|
formDialog.value = false
|
||||||
|
}
|
||||||
|
const form = ref({})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped></style>
|
||||||
|
|
Loading…
Reference in New Issue