@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/filter-panel/webdoc/filter-panel.js

@@ -16,9 +16,8 @@ export default {
       'demoId': 'disabled',
       'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>通过<code>disabled</code>设置禁用</p>\n',
-        'en-US':
-          '<p>Disabling by <code>disabled</code></p>\n'
+        'zh-CN': '<p>通过 <code>disabled</code> 设置禁用</p>\n',
+        'en-US': '<p>Disabling by <code>disabled</code> </p>\n'
       },
       'codeFiles': ['disabled.vue']
     },
@@ -26,7 +25,8 @@ export default {
       'demoId': 'clearable',
       'name': { 'zh-CN': '显示清空按钮', 'en-US': 'Show Clear Button' },
       'desc': {
-        'zh-CN': '<p>给组件加上<code>clearable</code>属性可以显示清空按钮，配合<code>handle-clear</code>事件一起使用清空内容区域的值</p>\n',
+        'zh-CN':
+          '<p>给组件加上 <code>clearable</code> 属性可以显示清空按钮，配合 <code>handle-clear</code> 事件一起使用清空内容区域的值</p>\n',
         'en-US':
           '<p>The <code>clearable</code> attribute is added to the component to display the clear button. This attribute is used together with the <code>handle-clear</code> event to clear the value of the content area.</p>\n'
       },
@@ -37,8 +37,7 @@ export default {
       'name': { 'zh-CN': 'tip 提示', 'en-US': 'Tip' },
       'desc': {
         'zh-CN': '<p>标题右侧添加提示信息</p>\n',
-        'en-US':
-          '<p>Add a message to the right of the title.</p>\n'
+        'en-US': '<p>Add a message to the right of the title.</p>\n'
       },
       'codeFiles': ['tip.vue']
     },
@@ -56,8 +55,9 @@ export default {
       'demoId': 'event',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p><code>visible-change</code> 事件在下拉面板显示/隐藏时触发</p>',
-        'en-US': '<p><code>visible-change</code> event is triggered when the drop-down panel is displayed or hidden</p>'
+        'zh-CN': '<p> <code>visible-change</code> 事件在下拉面板显示/隐藏时触发</p>',
+        'en-US':
+          '<p> <code>visible-change</code> event is triggered when the drop-down panel is displayed or hidden</p>'
       },
       'codeFiles': ['event.vue']
     },
@@ -77,14 +77,15 @@ export default {
     {
       'name': 'filter-panel',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'clearable ',
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '显示清空按钮，配合`handle-clear`事件一起使用清空内容区域的值，默认为true。',
-            'en-US': 'Displays the Clear button, which is used together with the `handle-clear` event to clear the value of the content area. The default value is true.'
+            'en-US':
+              'Displays the Clear button, which is used together with the `handle-clear` event to clear the value of the content area. The default value is true.'
           },
           'demoId': 'clearable'
         },
@@ -162,7 +163,7 @@ export default {
       'events': [
         {
           'name': 'handle-clear',
-          'type': 'Function',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '清除按钮点击事件。',
@@ -172,7 +173,7 @@ export default {
         },
         {
           'name': 'visible-change',
-          'type': 'Function',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉框显示隐藏事件。',
@@ -181,5 +182,6 @@ export default {
           'demoId': 'event'
         }
       ]
-    }]
+    }
+  ]
 }

package/demos/pc/app/form/display-only-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-form">
-    <div style="margin-bottom: 12px">表单是否只展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
+    <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="right" :display-only="displayOnly">
-      <tiny-form-item label="input">
+      <tiny-form-item label="超长文字">
         <tiny-input v-model="formData.input"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="radio">
@@ -40,9 +40,6 @@
       <tiny-form-item label="开关">
         <tiny-switch></tiny-switch>
       </tiny-form-item>
-      <tiny-form-item label="评分">
-        <tiny-rate v-model="formData.rate1" show-text></tiny-rate>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -70,7 +67,6 @@ import {
   Checkbox as TinyCheckbox,
   CheckboxGroup as TinyCheckboxGroup,
   Switch as TinySwitch,
-  Rate as TinyRate,
   Autocomplete as TinyAutocomplete,
   Cascader as TinyCascader,
   Select as TinySelect,
@@ -168,7 +164,7 @@ const formData = ref({
   person: 'test1',
   user: '655783272594485',
   monthrange: ['2022-01', '2023-01'],
-  quantity: '1',
+  quantity: 1,
   textareaValue:
     '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
   checked: true,
@@ -204,20 +200,11 @@ function createFilter(queryString) {
 
 <style scoped>
 .demo-form {
-  padding-left: 50px;
-}
-.demo-form-btns {
-  margin-bottom: 70px;
+  width: 380px;
 }
-.demo-form .tiny-input,
-.demo-form .tiny-select,
-.demo-form .tiny-textarea,
-.demo-form .tiny-numeric,
-.demo-form .tiny-dept,
-.demo-form .tiny-hrapprover,
-.demo-form .tiny-user,
-.demo-form .tiny-amount,
-.demo-form .tiny-area .tiny-select {
-  width: 274px !important;
+.title {
+  margin-bottom: 30px;
+  margin-left: 16px;
+  font-size: 14px;
 }
 </style>

package/demos/pc/app/form/display-only.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-form">
-    <div style="margin-bottom: 12px">表单是否只展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
+    <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="right" :display-only="displayOnly">
-      <tiny-form-item label="input">
+      <tiny-form-item label="超长文字">
         <tiny-input v-model="formData.input"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="radio">
@@ -40,9 +40,6 @@
       <tiny-form-item label="开关">
         <tiny-switch></tiny-switch>
       </tiny-form-item>
-      <tiny-form-item label="评分">
-        <tiny-rate v-model="formData.rate1" show-text></tiny-rate>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -91,7 +88,6 @@ export default {
     TinyCheckbox: Checkbox,
     TinyCheckboxGroup: CheckboxGroup,
     TinySwitch: Switch,
-    TinyRate: Rate,
     TinyAutocomplete: Autocomplete,
     TinyCascader: Cascader
   },
@@ -187,7 +183,7 @@ export default {
         person: 'test1',
         user: '655783272594485',
         monthrange: ['2022-01', '2023-01'],
-        quantity: '1',
+        quantity: 1,
         textareaValue:
           '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
         checked: true,
@@ -229,4 +225,9 @@ export default {
 .demo-form {
   width: 380px;
 }
+.title {
+  margin-bottom: 30px;
+  margin-left: 16px;
+  font-size: 14px;
+}
 </style>

package/demos/pc/app/form/form-disabled-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
-  <div style="width: 480px">
-    <h3 style="margin-bottom: 16px; margin-left: 100px">
-      是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch>
-    </h3>
+  <div class="demo-form">
+    <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
       <tiny-form-item label="Input">
         <tiny-input v-model="createData.user"></tiny-input>
@@ -119,7 +117,7 @@ import {
 const createData = reactive({
   checked: false,
   checked2: true,
-  quantity: '',
+  quantity: 0,
   sw: false,
   sex: '1',
   datepicker: '',
@@ -262,3 +260,15 @@ function createFilter(queryString) {
   return (restaurant) => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
 }
 </script>
+
+<style scoped>
+.demo-form {
+  width: 480px;
+}
+
+.title {
+  margin-bottom: 30px;
+  margin-left: 100px;
+  font-size: 14px;
+}
+</style>

package/demos/pc/app/form/form-disabled.vue

@@ -1,8 +1,6 @@
 <template>
-  <div style="width: 480px">
-    <h3 style="margin-bottom: 16px; margin-left: 100px">
-      是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch>
-    </h3>
+  <div class="demo-form">
+    <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
       <tiny-form-item label="Input">
         <tiny-input v-model="createData.user"></tiny-input>
@@ -145,7 +143,7 @@ export default {
       createData: {
         checked: false,
         checked2: true,
-        quantity: '',
+        quantity: 0,
         sw: false,
         sex: '1',
         datepicker: '',
@@ -291,3 +289,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-form {
+  width: 480px;
+}
+.title {
+  margin-bottom: 30px;
+  margin-left: 100px;
+  font-size: 14px;
+}
+</style>

package/demos/pc/app/form/form-in-row-composition-api.vue

@@ -15,7 +15,7 @@ import { reactive } from 'vue'
 import { Form as TinyForm, FormItem as TinyFormItem, Numeric as TinyNumeric, Radio as TinyRadio } from '@opentiny/vue'
 
 const formData = reactive({
-  quantity: '',
+  quantity: 0,
   sex: ''
 })
 </script>

package/demos/pc/app/form/form-in-row.vue

@@ -23,7 +23,7 @@ export default {
   data() {
     return {
       formData: {
-        quantity: '',
+        quantity: 0,
         sex: ''
       }
     }

package/demos/pc/app/form/form-validation-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <div class="mb-12">
+    <div class="title">
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
@@ -138,7 +138,8 @@ function clearFormValid() {
 .demo-form {
   width: 380px;
 }
-.mb-12 {
-  margin-bottom: 12px;
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
 }
 </style>

package/demos/pc/app/form/form-validation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <div class="mb-12">
+    <div class="title">
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
@@ -149,7 +149,8 @@ export default {
 .demo-form {
   width: 380px;
 }
-.mb-12 {
-  margin-bottom: 12px;
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
 }
 </style>

package/demos/pc/app/form/label-align-composition-api.vue

@@ -1,118 +1,41 @@
 <template>
   <div class="demo-form">
-    <div style="margin-bottom: 16px">
-      <div style="margin-bottom: 6px">是否对齐：<tiny-switch v-model="isLabelAlign"></tiny-switch></div>
-      <div>
-        标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
-      </div>
-    </div>
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isvalidate"
-      :label-align="isLabelAlign"
-      :label-position="labelPositionValue"
-      label-width="100px"
-      @validate="validate"
-    >
-      <tiny-form-item label="用户名" prop="username">
+    <div class="title">标签位置： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
+    <tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
+      <tiny-form-item label="用户名" prop="username" required>
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="密码" prop="password">
+      <tiny-form-item label="密码" prop="password" required>
         <tiny-input v-model="createData.password" type="password" show-password></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="密钥" prop="password2">
         <tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
       </tiny-form-item>
-      <tiny-form-item class="btn-form-item">
-        <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="removePass"> 清除密码校验 </tiny-button>
-      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal,
-  ButtonGroup as TinyButtonGroup,
-  Switch as TinySwitch
-} from '@opentiny/vue'
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Switch as TinySwitch } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 
-let validatePass = (rule, value, callback) => {
-  if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(value)) {
-    callback(new Error('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字'))
-  } else {
-    callback()
-  }
-}
-
 const isLabelAlign = ref(true)
-const labelPositionList = ref([
-  { text: 'left', value: 'left' },
-  { text: 'top', value: 'top' },
-  { text: 'right', value: 'right' }
-])
-const labelPositionValue = ref('left')
+
 const createData = reactive({
   username: '',
   password: '',
   password2: ''
 })
-const isvalidate = ref(true)
-const rules = ref({
-  username: [
-    { required: true, message: '必填', trigger: 'blur' },
-    { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
-  ],
-  password: [
-    { required: true, message: '必填', trigger: 'blur' },
-    { validator: validatePass, trigger: 'blur' }
-  ]
-})
-
-function validate(val) {
-  Modal.message({
-    message: `表单项被校验后触发的事件,所校验字段为:${val}`,
-    status: 'info'
-  })
-}
-
-function handleSubmit() {
-  ruleFormRef.value.validate((valid) => {
-    if (valid) {
-      Modal.alert('校验通过，开始注册！')
-    } else {
-      Modal.message({ message: '校验不通过！！', status: 'warning' })
-      return false
-    }
-  })
-}
-
-function removePass() {
-  isvalidate.value = false // 通过配置validate-on-rule-change属性,设置是否在rules属性改变后立即触发一次验证
-  rules.value = {
-    username: [
-      { required: true, message: '必填', trigger: 'blur' },
-      { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
-    ]
-  }
-}
 </script>
 
 <style scoped>
 .demo-form {
   width: 380px;
 }
-.btn-form-item {
-  padding-top: 8px;
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
 }
 </style>

package/demos/pc/app/form/label-align.vue

@@ -1,109 +1,37 @@
 <template>
   <div class="demo-form">
-    <div style="margin-bottom: 16px">
-      <div style="margin-bottom: 6px">是否对齐：<tiny-switch v-model="isLabelAlign"></tiny-switch></div>
-      <div>
-        标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
-      </div>
-    </div>
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isvalidate"
-      :label-align="isLabelAlign"
-      :label-position="labelPositionValue"
-      label-width="100px"
-      @validate="validate"
-    >
-      <tiny-form-item label="用户名" prop="username">
+    <div class="title">标签位置： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
+    <tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
+      <tiny-form-item label="用户名" prop="username" required>
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="密码" prop="password">
+      <tiny-form-item label="密码" prop="password" required>
         <tiny-input v-model="createData.password" type="password" show-password></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="密钥" prop="password2">
         <tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
       </tiny-form-item>
-      <tiny-form-item class="btn-form-item">
-        <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="removePass"> 清除密码校验 </tiny-button>
-      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal, ButtonGroup, Switch } from '@opentiny/vue'
+import { Form, FormItem, Input, Switch } from '@opentiny/vue'
 
 export default {
   components: {
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup,
     TinySwitch: Switch
   },
   data() {
-    let validatePass = (rule, value, callback) => {
-      if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(value)) {
-        callback(new Error('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字'))
-      } else {
-        callback()
-      }
-    }
-
     return {
       isLabelAlign: true,
-      labelPositionList: [
-        { text: 'left', value: 'left' },
-        { text: 'top', value: 'top' },
-        { text: 'right', value: 'right' }
-      ],
-      labelPositionValue: 'left',
       createData: {
         username: '',
         password: '',
         password2: ''
-      },
-      isvalidate: true,
-      rules: {
-        username: [
-          { required: true, message: '必填', trigger: 'blur' },
-          { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
-        ],
-        password: [
-          { required: true, message: '必填', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    validate(val) {
-      Modal.message({
-        message: `表单项被校验后触发的事件,所校验字段为:${val}`,
-        status: 'info'
-      })
-    },
-    handleSubmit() {
-      this.$refs.ruleFormRef.validate((valid) => {
-        if (valid) {
-          Modal.alert('校验通过，开始注册！')
-        } else {
-          Modal.message({ message: '校验不通过！！', status: 'warning' })
-          return false
-        }
-      })
-    },
-    removePass() {
-      this.isvalidate = false // 通过配置validate-on-rule-change属性,设置是否在rules属性改变后立即触发一次验证
-      this.rules = {
-        username: [
-          { required: true, message: '必填', trigger: 'blur' },
-          { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
-        ]
       }
     }
   }
@@ -114,7 +42,8 @@ export default {
 .demo-form {
   width: 380px;
 }
-.btn-form-item {
-  padding-top: 8px;
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
 }
 </style>

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="demo-form">
+    <div class="title">
+      标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
+    </div>
+    <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>
+      <tiny-form-item label="密码" prop="password">
+        <tiny-input v-model="createData.password" type="password" show-password></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="密钥" prop="password2">
+        <tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import {
+  Form as TinyForm,
+  FormItem as TinyFormItem,
+  Input as TinyInput,
+  ButtonGroup as TinyButtonGroup
+} from '@opentiny/vue'
+
+const ruleFormRef = ref()
+
+const labelPositionList = ref([
+  { text: 'left', value: 'left' },
+  { text: 'right', value: 'right' },
+  { text: 'top', value: 'top' }
+])
+const labelPositionValue = ref('left')
+
+const createData = reactive({
+  username: '',
+  password: '',
+  password2: ''
+})
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+</style>