docs(form): [form] optimize demo and docs

Author: gimmyhehe

examples/sites/demos/pc/app/form/form-validation-composition-api.vue

@@ -19,7 +19,7 @@
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="Numeric字段" prop="num1">
+      <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
       <tiny-form-item label="IP字段" prop="ip">

examples/sites/demos/pc/app/form/form-validation.vue

@@ -19,7 +19,7 @@
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="Numeric字段" prop="num1">
+      <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
       <tiny-form-item label="IP字段" prop="ip">

examples/sites/demos/pc/app/form/label-position-composition-api.vue

@@ -3,7 +3,7 @@
     <div class="title">
       标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
     </div>
-    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
+    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>

examples/sites/demos/pc/app/form/label-position.vue

@@ -3,7 +3,7 @@
     <div class="title">
       标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
     </div>
-    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
+    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>

examples/sites/demos/pc/app/form/popper-options-composition-api.vue

@@ -40,10 +40,11 @@ function submitClick() {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 420px;
 }
 .scroll-parent {
   height: 200px;
   overflow: auto;
+  padding-right: 40px;
 }
 </style>

examples/sites/demos/pc/app/form/popper-options.vue

@@ -50,10 +50,11 @@ export default {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 420px;
 }
 .scroll-parent {
   height: 200px;
   overflow: auto;
+  padding-right: 40px;
 }
 </style>

examples/sites/demos/pc/app/form/slot-label-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" show-message>
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
       <tiny-form-item prop="users">
         <template #label> 必填 </template>
         <tiny-input v-model="createData.users"></tiny-input>
@@ -11,7 +11,7 @@
       </tiny-form-item>
       <tiny-form-item prop="url">
         <template #label>
-          <div class="custom-label">超过两行文字，省略显示</div>
+          <div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
         </template>
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
@@ -37,6 +37,7 @@ import {
   Modal,
   RadioGroup as TinyRadioGroup
 } from '@opentiny/vue'
+import { AutoTip as VAutoTip } from '@opentiny/vue-directive'
 
 function handleClick() {
   Modal.message({ message: 'click', status: 'info' })

examples/sites/demos/pc/app/form/slot-label.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" show-message>
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
       <tiny-form-item prop="users">
         <template #label> 必填 </template>
         <tiny-input v-model="createData.users"></tiny-input>
@@ -11,7 +11,7 @@
       </tiny-form-item>
       <tiny-form-item prop="url">
         <template #label>
-          <div class="custom-label">超过两行文字，省略显示</div>
+          <div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
         </template>
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
@@ -28,6 +28,7 @@
 
 <script>
 import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup } from '@opentiny/vue'
+import { AutoTip } from '@opentiny/vue-directive'
 
 export default {
   components: {
@@ -38,6 +39,7 @@ export default {
     TinyButton: Button,
     TinyRadioGroup: RadioGroup
   },
+  directives: { AutoTip },
   data() {
     return {
       options: [

examples/sites/demos/pc/app/form/smb-required-composition-api.vue

@@ -9,7 +9,7 @@
       :hide-required-asterisk="hideRequiredAsterisk"
       :model="createData"
       :rules="rules"
-      label-width="100px"
+      label-width="108px"
       validate-type="text"
       message-type="block"
     >
@@ -36,7 +36,6 @@ import {
   FormItem as TinyFormItem,
   Input as TinyInput,
   Button as TinyButton,
-  Modal,
   Switch as TinySwitch
 } from '@opentiny/vue'
 
@@ -59,6 +58,7 @@ function handleSubmit() {
   })
 }
 </script>
+
 <style scoped>
 .demo-form {
   width: 380px;

examples/sites/demos/pc/app/form/smb-required.vue

@@ -9,7 +9,7 @@
       :hide-required-asterisk="hideRequiredAsterisk"
       :model="createData"
       :rules="rules"
-      label-width="100px"
+      label-width="108px"
       validate-type="text"
       message-type="block"
     >
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal, Switch } from '@opentiny/vue'
+import { Form, FormItem, Input, Button, Switch } from '@opentiny/vue'
 
 export default {
   components: {