arco design vue

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-input v-model="value" placeholder="Input something..." />
    <a-button type="primary" @click="handleSubmit">Submit</a-button>
  </a-space>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    handleSubmit() {
      if (this.value) {
        alert(`You entered: ${this.value}`);
      } else {
        alert('Please input something!');
      }
    }
  }
};
</script>

<style>
/* Add some basic styles */
</style>

解释说明

• 模板部分 (<template>):

  • 使用了 a-space 组件来创建一个垂直排列的空间，确保输入框和按钮之间有足够的间距。
  • a-input 是 Arco Design 的输入框组件，绑定了 v-model 来实现双向数据绑定，用户输入的内容会实时反映在 value 变量中。
  • a-button 是 Arco Design 的按钮组件，点击按钮时会触发 handleSubmit 方法。

• 脚本部分 (<script>):

  • 定义了一个 data 函数，返回一个包含 value 属性的对象，用于存储输入框中的内容。
  • handleSubmit 方法检查 value 是否为空，如果不为空则弹出提示框显示用户输入的内容，否则提示用户输入内容。

• 样式部分 (<style>):

  • 这里可以添加一些自定义样式，但当前示例中没有具体样式。

如果你需要更多关于 Arco Design Vue 的信息或更复杂的示例，请查阅 Arco Design Vue 官方文档。