fix

src/components/save-form/index.vue

@@ -3,6 +3,7 @@
     ref="form"
     :model="model"
     :rules="rules"
+    :inline="inline"
   >
     <slot/>
   </el-form>
@@ -11,7 +12,7 @@
 import { saveToStorage, getSearchs } from '@/helpers'
 export default {
   name: 'save-form',
-  props: ['model', 'rules', 'formProps'],
+  props: ['model', 'rules', 'formProps', 'inline'],
   mounted() {
     const searchs = getSearchs(this.$route.fullPath)
     for (const key in searchs) {

src/views/save-form-test/index.vue

@@ -1,80 +1,95 @@
 <template>
-  <div>
-    <saveform ref="form" :formProps="{}" :model.sync="form">
-      <el-form-item
-        label="内容"
-        prop="input"
-        :rules="[{required: true}]"
-      >
-        <el-input v-model="form.input" placeholder="请输入内容"/>
-      </el-form-item>
-      <el-form-item
-        label="内容2"
-        prop="input2"
-        :rules="[{required: true}]"
-      >
-        <el-input v-model="form.input2" placeholder="请输入内容2"/>
-      </el-form-item>
-      <el-form-item label="活动区域" prop="region">
-        <el-select v-model="form.region" placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="活动时间" required>
-        <el-col :span="11">
-          <el-form-item prop="date1">
-            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col class="line" :span="2">-</el-col>
-        <el-col :span="11">
-          <el-form-item prop="date2">
-            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
-          </el-form-item>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="即时配送" prop="delivery">
-        <el-switch v-model="form.delivery"></el-switch>
-      </el-form-item>
-      <el-form-item label="活动性质" prop="type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="美食/餐厅线上活动" value="1" name="type"></el-checkbox>
-          <el-checkbox label="地推活动" value="2" name="type"></el-checkbox>
-          <el-checkbox label="线下主题活动" value="3" name="type"></el-checkbox>
-          <el-checkbox label="单纯品牌曝光" value="4" name="type"></el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="特殊资源" prop="resource">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="线上品牌商赞助"></el-radio>
-          <el-radio label="线下场地免费"></el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="活动形式" prop="desc">
-        <el-input type="textarea" v-model="form.desc"></el-input>
-      </el-form-item>
-      <el-form-item label="活动时间范围" prop="times">
-        <el-date-picker
-          v-model="form.times"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-button @click="submit">提交</el-button>
-    </saveform>
+  <div class='m-container'>
+    <h2>
+      <div class="squrt"></div>保存表单演示
+    </h2>
+    <div class="m-core">
+      <saveform ref="form" :formProps="{}" :model.sync="form" inline>
+        <el-form-item
+          label="内容"
+          prop="input"
+          :rules="[{required: true}]"
+        >
+          <el-input v-model="form.input" placeholder="请输入内容"/>
+        </el-form-item>
+        <el-form-item
+          label="内容2"
+          prop="input2"
+          :rules="[{required: true}]"
+        >
+          <el-input v-model="form.input2" placeholder="请输入内容2"/>
+        </el-form-item>
+        <el-form-item label="活动区域" prop="region">
+          <el-select v-model="form.region" placeholder="请选择活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间" required>
+          <el-col :span="11">
+            <el-form-item prop="date1">
+              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col class="line" :span="2">-</el-col>
+          <el-col :span="11">
+            <el-form-item prop="date2">
+              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="即时配送" prop="delivery">
+          <el-switch v-model="form.delivery"></el-switch>
+        </el-form-item>
+        <el-form-item label="活动性质" prop="type">
+          <el-checkbox-group v-model="form.type">
+            <el-checkbox label="美食/餐厅线上活动" value="1" name="type"></el-checkbox>
+            <el-checkbox label="地推活动" value="2" name="type"></el-checkbox>
+            <el-checkbox label="线下主题活动" value="3" name="type"></el-checkbox>
+            <el-checkbox label="单纯品牌曝光" value="4" name="type"></el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="特殊资源" prop="resource">
+          <el-radio-group v-model="form.resource">
+            <el-radio label="线上品牌商赞助"></el-radio>
+            <el-radio label="线下场地免费"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="活动形式" prop="desc">
+          <el-input type="textarea" v-model="form.desc"></el-input>
+        </el-form-item>
+        <el-form-item label="活动时间范围" prop="times">
+          <el-date-picker
+            v-model="form.times"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-button @click="submit">提交</el-button>
+        <el-button @click="testvisible = true">打开弹窗</el-button>
+      </saveform>
+    </div>
+    <el-dialog :visible.sync="testvisible" destroy-on-close>
+      <test v-if="testvisible"/>
+      <template #footer>
+        <el-button @click="testvisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script>
 import saveform from '@/components/save-form'
+import test from './modals/test'
 export default {
   components: {
-    saveform
+    saveform,
+    test
   },
   data() {
     return {
+      testvisible: false,
       form: {
         input: '',
         input2: '',

src/views/save-form-test/modals/test.vue

@@ -3,6 +3,17 @@
 </template>
 <script>
 export default {
-
+  created() {
+    console.log('created')
+  },
+  mounted() {
+    console.log('mounted')
+  },
+  updated() {
+    console.log('updated')
+  },
+  destroyed() {
+    console.log('destroyed')
+  }
 }
 </script>