@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/TdesignForm.vue

@@ -1,249 +1,249 @@
-<template>
-  <div class="tdesign-form-demo">
-    <h2>TDesign 表单示例</h2>
-    
-    <div class="section">
-      <h3>基础表单</h3>
-      <ebiz-tdesign-form :data="baseFormData" :rules="baseFormRules" @submit="handleSubmit">
-        <ebiz-tdesign-form-item label="用户名" name="username">
-          <ebiz-tdesign-input v-model="baseFormData.username" placeholder="请输入用户名" />
-        </ebiz-tdesign-form-item>
-        
-        <ebiz-tdesign-form-item label="密码" name="password">
-          <ebiz-tdesign-input v-model="baseFormData.password" type="password" placeholder="请输入密码" />
-        </ebiz-tdesign-form-item>
-        
-        <ebiz-tdesign-form-item>
-          <ebiz-tdesign-button theme="primary" type="submit" content="提交" />
-          <ebiz-tdesign-button style="margin-left: 10px;" type="reset" content="重置" />
-        </ebiz-tdesign-form-item>
-      </ebiz-tdesign-form>
-    </div>
-    
-    <div class="section">
-      <h3>不同标签对齐方式</h3>
-      <div class="form-wrapper">
-        <div class="form-item">
-          <h4>左对齐</h4>
-          <ebiz-tdesign-form :data="alignFormData" label-align="left">
-            <ebiz-tdesign-form-item label="用户名" name="username">
-              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
-            </ebiz-tdesign-form-item>
-            
-            <ebiz-tdesign-form-item label="电子邮箱" name="email">
-              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
-            </ebiz-tdesign-form-item>
-          </ebiz-tdesign-form>
-        </div>
-        
-        <div class="form-item">
-          <h4>右对齐</h4>
-          <ebiz-tdesign-form :data="alignFormData" label-align="right">
-            <ebiz-tdesign-form-item label="用户名" name="username">
-              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
-            </ebiz-tdesign-form-item>
-            
-            <ebiz-tdesign-form-item label="电子邮箱" name="email">
-              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
-            </ebiz-tdesign-form-item>
-          </ebiz-tdesign-form>
-        </div>
-        
-        <div class="form-item">
-          <h4>顶部对齐</h4>
-          <ebiz-tdesign-form :data="alignFormData" label-align="top">
-            <ebiz-tdesign-form-item label="用户名" name="username">
-              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
-            </ebiz-tdesign-form-item>
-            
-            <ebiz-tdesign-form-item label="电子邮箱" name="email">
-              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
-            </ebiz-tdesign-form-item>
-          </ebiz-tdesign-form>
-        </div>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>不同布局类型</h3>
-      <div class="form-wrapper">
-        <div class="form-item">
-          <h4>垂直布局</h4>
-          <ebiz-tdesign-form :data="layoutFormData" layout="vertical">
-            <ebiz-tdesign-form-item label="姓名" name="name">
-              <ebiz-tdesign-input v-model="layoutFormData.name" placeholder="请输入姓名" />
-            </ebiz-tdesign-form-item>
-            
-            <ebiz-tdesign-form-item label="电话" name="phone">
-              <ebiz-tdesign-input v-model="layoutFormData.phone" placeholder="请输入电话" />
-            </ebiz-tdesign-form-item>
-          </ebiz-tdesign-form>
-        </div>
-        
-        <div class="form-item">
-          <h4>行内布局</h4>
-          <ebiz-tdesign-form :data="layoutFormData" layout="inline">
-            <ebiz-tdesign-form-item label="姓名" name="name">
-              <ebiz-tdesign-input v-model="layoutFormData.name" placeholder="请输入姓名" />
-            </ebiz-tdesign-form-item>
-            
-            <ebiz-tdesign-form-item label="电话" name="phone">
-              <ebiz-tdesign-input v-model="layoutFormData.phone" placeholder="请输入电话" />
-            </ebiz-tdesign-form-item>
-            
-            <ebiz-tdesign-form-item>
-              <ebiz-tdesign-button theme="primary" content="搜索" />
-            </ebiz-tdesign-form-item>
-          </ebiz-tdesign-form>
-        </div>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>表单校验</h3>
-      <ebiz-tdesign-form 
-        :data="validateFormData" 
-        :rules="validateFormRules" 
-        show-error-message 
-        status-icon
-        @validate="handleValidate"
-        @submit="handleSubmit"
-      >
-        <ebiz-tdesign-form-item label="用户名" name="username" help="请输入3-20个字符">
-          <ebiz-tdesign-input v-model="validateFormData.username" placeholder="请输入用户名" />
-        </ebiz-tdesign-form-item>
-        
-        <ebiz-tdesign-form-item label="电子邮箱" name="email">
-          <ebiz-tdesign-input v-model="validateFormData.email" placeholder="请输入电子邮箱" />
-        </ebiz-tdesign-form-item>
-        
-        <ebiz-tdesign-form-item label="年龄" name="age">
-          <ebiz-tdesign-input v-model="validateFormData.age" type="number" placeholder="请输入年龄" />
-        </ebiz-tdesign-form-item>
-        
-        <ebiz-tdesign-form-item>
-          <ebiz-tdesign-button theme="primary" type="submit" content="提交" />
-          <ebiz-tdesign-button style="margin-left: 10px;" type="reset" content="重置" />
-        </ebiz-tdesign-form-item>
-      </ebiz-tdesign-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { EbizTdesignForm, EbizTdesignFormItem, EbizTdesignInput, EbizTdesignButton } from '../index.js';
-
-export default {
-  name: 'TdesignFormDemo',
-  components: {
-    EbizTdesignForm,
-    EbizTdesignFormItem,
-    EbizTdesignInput,
-    EbizTdesignButton
-  },
-  data() {
-    return {
-      // 基础表单数据
-      baseFormData: {
-        username: '',
-        password: ''
-      },
-      // 基础表单校验规则
-      baseFormRules: {
-        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
-      },
-      
-      // 对齐方式表单数据
-      alignFormData: {
-        username: '',
-        email: ''
-      },
-      
-      // 布局类型表单数据
-      layoutFormData: {
-        name: '',
-        phone: ''
-      },
-      
-      // 表单校验数据
-      validateFormData: {
-        username: '',
-        email: '',
-        age: ''
-      },
-      // 表单校验规则
-      validateFormRules: {
-        username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          { min: 3, max: 20, message: '用户名长度应该在3-20个字符之间', trigger: 'blur' }
-        ],
-        email: [
-          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
-          { type: 'email', message: '请输入正确的电子邮箱格式', trigger: 'blur' }
-        ],
-        age: [
-          { required: true, message: '请输入年龄', trigger: 'blur' },
-          { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
-          { validator: (val) => val >= 18, message: '年龄必须大于等于18岁', trigger: 'blur' }
-        ]
-      }
-    };
-  },
-  methods: {
-    handleSubmit(e) {
-      console.log('表单提交', e);
-      alert('表单提交成功！');
-    },
-    handleValidate(params) {
-      console.log('表单校验结果', params);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.tdesign-form-demo {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.section {
-  margin-bottom: 30px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 20px;
-}
-
-h2 {
-  margin-bottom: 20px;
-  font-size: 24px;
-  color: #0052d9;
-}
-
-h3 {
-  margin-bottom: 12px;
-  font-size: 18px;
-  color: #333;
-}
-
-h4 {
-  margin-bottom: 8px;
-  font-size: 16px;
-  color: #666;
-}
-
-.form-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-}
-
-.form-item {
-  flex: 1;
-  min-width: 300px;
-  padding: 15px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-}
+<template>
+  <div class="tdesign-form-demo">
+    <h2>TDesign 表单示例</h2>
+    
+    <div class="section">
+      <h3>基础表单</h3>
+      <ebiz-tdesign-form :data="baseFormData" :rules="baseFormRules" @submit="handleSubmit">
+        <ebiz-tdesign-form-item label="用户名" name="username">
+          <ebiz-tdesign-input v-model="baseFormData.username" placeholder="请输入用户名" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item label="密码" name="password">
+          <ebiz-tdesign-input v-model="baseFormData.password" type="password" placeholder="请输入密码" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item>
+          <ebiz-tdesign-button theme="primary" type="submit" content="提交" />
+          <ebiz-tdesign-button style="margin-left: 10px;" type="reset" content="重置" />
+        </ebiz-tdesign-form-item>
+      </ebiz-tdesign-form>
+    </div>
+    
+    <div class="section">
+      <h3>不同标签对齐方式</h3>
+      <div class="form-wrapper">
+        <div class="form-item">
+          <h4>左对齐</h4>
+          <ebiz-tdesign-form :data="alignFormData" label-align="left">
+            <ebiz-tdesign-form-item label="用户名" name="username">
+              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电子邮箱" name="email">
+              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+        
+        <div class="form-item">
+          <h4>右对齐</h4>
+          <ebiz-tdesign-form :data="alignFormData" label-align="right">
+            <ebiz-tdesign-form-item label="用户名" name="username">
+              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电子邮箱" name="email">
+              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+        
+        <div class="form-item">
+          <h4>顶部对齐</h4>
+          <ebiz-tdesign-form :data="alignFormData" label-align="top">
+            <ebiz-tdesign-form-item label="用户名" name="username">
+              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电子邮箱" name="email">
+              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同布局类型</h3>
+      <div class="form-wrapper">
+        <div class="form-item">
+          <h4>垂直布局</h4>
+          <ebiz-tdesign-form :data="layoutFormData" layout="vertical">
+            <ebiz-tdesign-form-item label="姓名" name="name">
+              <ebiz-tdesign-input v-model="layoutFormData.name" placeholder="请输入姓名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电话" name="phone">
+              <ebiz-tdesign-input v-model="layoutFormData.phone" placeholder="请输入电话" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+        
+        <div class="form-item">
+          <h4>行内布局</h4>
+          <ebiz-tdesign-form :data="layoutFormData" layout="inline">
+            <ebiz-tdesign-form-item label="姓名" name="name">
+              <ebiz-tdesign-input v-model="layoutFormData.name" placeholder="请输入姓名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电话" name="phone">
+              <ebiz-tdesign-input v-model="layoutFormData.phone" placeholder="请输入电话" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item>
+              <ebiz-tdesign-button theme="primary" content="搜索" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>表单校验</h3>
+      <ebiz-tdesign-form 
+        :data="validateFormData" 
+        :rules="validateFormRules" 
+        show-error-message 
+        status-icon
+        @validate="handleValidate"
+        @submit="handleSubmit"
+      >
+        <ebiz-tdesign-form-item label="用户名" name="username" help="请输入3-20个字符">
+          <ebiz-tdesign-input v-model="validateFormData.username" placeholder="请输入用户名" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item label="电子邮箱" name="email">
+          <ebiz-tdesign-input v-model="validateFormData.email" placeholder="请输入电子邮箱" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item label="年龄" name="age">
+          <ebiz-tdesign-input v-model="validateFormData.age" type="number" placeholder="请输入年龄" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item>
+          <ebiz-tdesign-button theme="primary" type="submit" content="提交" />
+          <ebiz-tdesign-button style="margin-left: 10px;" type="reset" content="重置" />
+        </ebiz-tdesign-form-item>
+      </ebiz-tdesign-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignForm, EbizTdesignFormItem, EbizTdesignInput, EbizTdesignButton } from '../index.js';
+
+export default {
+  name: 'TdesignFormDemo',
+  components: {
+    EbizTdesignForm,
+    EbizTdesignFormItem,
+    EbizTdesignInput,
+    EbizTdesignButton
+  },
+  data() {
+    return {
+      // 基础表单数据
+      baseFormData: {
+        username: '',
+        password: ''
+      },
+      // 基础表单校验规则
+      baseFormRules: {
+        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+      },
+      
+      // 对齐方式表单数据
+      alignFormData: {
+        username: '',
+        email: ''
+      },
+      
+      // 布局类型表单数据
+      layoutFormData: {
+        name: '',
+        phone: ''
+      },
+      
+      // 表单校验数据
+      validateFormData: {
+        username: '',
+        email: '',
+        age: ''
+      },
+      // 表单校验规则
+      validateFormRules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 3, max: 20, message: '用户名长度应该在3-20个字符之间', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的电子邮箱格式', trigger: 'blur' }
+        ],
+        age: [
+          { required: true, message: '请输入年龄', trigger: 'blur' },
+          { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
+          { validator: (val) => val >= 18, message: '年龄必须大于等于18岁', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    handleSubmit(e) {
+      console.log('表单提交', e);
+      alert('表单提交成功！');
+    },
+    handleValidate(params) {
+      console.log('表单校验结果', params);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.tdesign-form-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+h4 {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: #666;
+}
+
+.form-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.form-item {
+  flex: 1;
+  min-width: 300px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
 </style>