<template>
<div>
- <VolForm :label-width="150" :loadKey="true" :formFileds="formFileds1" :formRules="formRules1"></VolForm>
+ <VolForm
+ ref="myform"
+ :label-width="150"
+ :loadKey="true"
+ :formFileds="formFileds1"
+ :formRules="formRules1"
+ ></VolForm>
+ <div>
+ <Button type="info" long @click="reset">重置表单</Button>
+ </div>
</div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
export default {
components: { VolForm },
- methods: {},
+ methods: {
+ reset() {
+ this.$refs.myform.reset();
+ this.$Message.error("表单已重置");
+ }
+ },
data() {
return {
formFileds1: {
@@ -55,10 +69,13 @@ let codeString = {
number1: 20,
mail: "",
Date: "",
- IsTop: "还没想好...",
+ IsTop: "",
Fruits: [],
Other: "",
Switch: 1,
+ readonlyText: "还没想好....",
+ readonlyImg:
+ "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg",
ProImg:
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
},
@@ -89,7 +106,12 @@ let codeString = {
title: "手机号",
required: true, //设置为必选项
field: "AgeRange",
- type: "phone"
+ type: "phone",
+ onKeyPress: $event => {
+ if ($event.keyCode == 13) {
+ this.$Message.error(this.formFileds1.AgeRange + "");
+ }
+ }
},
{
title: "date日期",
@@ -135,11 +157,11 @@ let codeString = {
title: "自定义验证",
required: true,
field: "Other",
- validator: (rule, val, callback) => {
+ validator: (rule, val) => {
if (val != "234") {
- return callback(new Error("必须输入【234】"));
+ return "必须输入【234】";
}
- return callback();
+ return "";
}
},
{
@@ -152,22 +174,8 @@ let codeString = {
}
],
[
- {
- title: "备注",
- required: true,
- field: "IsTop",
- colSize: 12, //设置12，此列占100%宽度
- type: "textarea"
- }
- ],
- [
- {
- title: "图片",
- disabled: true, //必须设置此属性
- field: "ProImg",
- type: "img"
- },
- {
+ //readonlyImg
+ {
title: "checkbox",
//如果这里绑定了data数据，后台不会加载此数据源
data: [
@@ -178,6 +186,37 @@ let codeString = {
],
field: "Fruits",
type: "checkbox"
+ },
+ {
+ title: "字段只读",
+ readonly: true, //设置readonly或disabled都行
+ field: "readonlyText",
+ type: "text"
+ }
+ ],
+ [
+ {
+ title: "备注",
+ required: true,
+ field: "IsTop",
+ min: 3,
+ max: 5,
+ placeholder: "至少输入3个字符,最多只能输入5个字符",
+ colSize: 12, //设置12，此列占100%宽度
+ type: "textarea"
+ }
+ ],
+ [
+ {
+ title: "图片只读",
+ readonly: true, //设置readonly或disabled都行
+ field: "readonlyImg",
+ type: "img"
+ },
+ {
+ title: "可修改图片",
+ field: "ProImg",
+ type: "img"
}
]
]
@@ -215,7 +254,7 @@ let codeString = {
</script>
+ box: `
<template>
<div>
<Button type="info" @click="model=!model">弹出框</Button>
@@ -242,6 +281,7 @@ let codeString = {
};
</script>
-
`
+
`,
+ uploadExcel: ``, uploadImg: ``, volmenu: ``, voltable: ``, viewGrid: ``
}
export default codeString
\ No newline at end of file
diff --git a/Vol.Vue/src/views/document/docApi/test.vue b/Vol.Vue/src/views/document/docApi/test.vue
index eccb1033..4d130e6f 100644
--- a/Vol.Vue/src/views/document/docApi/test.vue
+++ b/Vol.Vue/src/views/document/docApi/test.vue
@@ -1,25 +1,190 @@
-
-
- 弹出框内容
-
-
-
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/Vol.Vue/src/views/document/document.vue b/Vol.Vue/src/views/document/document.vue
index cecf60e2..38a2f4c7 100644
--- a/Vol.Vue/src/views/document/document.vue
+++ b/Vol.Vue/src/views/document/document.vue
@@ -175,7 +175,7 @@ export default {
left: 0;
right: 0;
margin: 0 auto;
- padding: 30px;
+ padding: 10px;
padding-top: 80px;
}