Wed Apr 17 11:22:00 CST 2024 inscode

src/App.vue

 <template>
-  <div class="list-container"
-    v-d-sortable="{
-      list: list,
-      handle: '.drag-handle',
-      drop: onDrop,
-      dragClass: 'my-list-drag-item'
-    }"
-  >
-    <div class="list-item" v-for="item in list" :key="item.id" >
-      <i class="icon icon-drag drag-handle"></i>
-      <d-input v-model="item.value" :placeholder="item.placeholder"></d-input>
-    </div>
-  </div>
-  <d-button variant="solid" class="submit-btn" @click="onSubmit">Submit</d-button>
+  <d-input v-model="valueBasic1" autofocus></d-input>
 </template>
-
 <script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const list = ref([
-      { id: '1', placeholder: 'Project1', value: '' },
-      { id: '2', placeholder: 'Project2', value: '' },
-      { id: '3', placeholder: 'Project3', value: '' },
-      { id: '4', placeholder: 'Project4', value: '' },
-      { id: '5', placeholder: 'Project5', value: '' },
-      { id: '6', placeholder: 'Project6', value: '' },
-    ]);
-
-    const onDrop = (event) => {
-      console.log(event);
-    };
-
-    const onSubmit = () => {
-      console.log(list.value);
+  export default {
+    data () {
+      return {
+        valueBasic1: '你     好吗'
+      }
     }
-
-    return {
-      list,
-      onDrop,
-      onSubmit,
-      msg: 'Dragdrop 拖拽 组件文档示例'
-    }
-  }
-})
-</script>
-
-<style>
-  .list-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .list-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 40px;
-    margin: 4px 0;
-    padding: 4px 8px;
-    background-color: var(--devui-global-bg, #f3f6f8);
-    border: 1px solid transparent;
-    border-radius: 4px;
-  }
-
-  .list-item .drag-handle {
-    cursor: grab;
-  }
-
-  .list-item > i {
-    margin-right: 4px;
-  }
-
-  .list-item.my-list-drag-item {
-    border: 1px solid var(--devui-primary, #5e7ce0);
-  }
-
-  .submit-btn {
-    margin-top: 8px;
   }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file