选择修改

.prettierrc.js

@@ -1,6 +1,5 @@
 module.exports = {
   bracketSpacing: true,
-  jsxBracketSameLine: true,
   singleQuote: true,
   semi: false,
   arrowParens: 'avoid',

src/teacher/music/upload/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { Button, Field, Sticky } from 'vant'
+import { Button, Field, Sticky, Form } from 'vant'
 import ColArea from '@/components/col-area'
 import { MusicType } from 'src/teacher/music/list/item.d'
 import ColField from '@/components/col-field'
@@ -9,16 +9,32 @@ export default defineComponent({
   name: 'MusicUpload',
   data() {
     return {
-      musicSheetName: ''
+      musicSheetName: '',
+      selectTagVisible: false
+    }
+  },
+  methods: {
+    submit(vals: any) {
+      console.log(vals)
+    },
+    failed() {
+      console.log('failed', this.musicSheetName)
     }
   },
   render() {
     return (
-      <>
+      <Form onSubmit={this.submit} onFailed={this.failed}>
         <div class={styles.container}>
           <ColArea class={styles.area}>
             <ColField required title="曲目名称">
-              <Field class={styles['clear-px']} placeholder="请输入曲目名称" />
+              <Field
+                name="musicSheetName"
+                modelValue={this.musicSheetName}
+                rules={[{ required: true, message: '请输入曲目名称' }]}
+                class={styles['clear-px']}
+                placeholder="请输入曲目名称"
+                onUpdate:modelValue={val => (this.musicSheetName = val)}
+              />
             </ColField>
             <ColField required title="作曲人">
               <Field
@@ -28,7 +44,23 @@ export default defineComponent({
             </ColField>
           </ColArea>
           <ColArea class={styles.area}>
-            <ColField required title="曲目标签">
+            <ColField
+              required
+              title="曲目标签"
+              v-slos={{
+                right: () => (
+                  <Button
+                    class={styles.select}
+                    round
+                    type="primary"
+                    size="small"
+                    onClick={() => (this.selectTagVisible = true)}
+                  >
+                    选择
+                  </Button>
+                )
+              }}
+            >
               <Field class={styles['clear-px']} placeholder="请输入曲目名称" />
             </ColField>
           </ColArea>
@@ -62,12 +94,12 @@ export default defineComponent({
         </div>
         <Sticky offsetBottom={0} position="bottom">
           <div class={styles['button-area']}>
-            <Button type="primary" block round>
+            <Button type="primary" block round native-type="submit">
               确认
             </Button>
           </div>
         </Sticky>
-      </>
+      </Form>
     )
   }
 })