elementui vue3

<template>
  <div>
    <!-- Element Plus 组件示例 -->
    <el-button type="primary" @click="handleClick">点击我</el-button>
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElButton, ElInput } from 'element-plus';

export default {
  components: {
    ElButton,
    ElInput
  },
  setup() {
    const inputValue = ref('');

    const handleClick = () => {
      alert('你点击了按钮！');
    };

    return {
      inputValue,
      handleClick
    };
  }
};
</script>

<style scoped>
/* 自定义样式 */
.el-button {
  margin-bottom: 10px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了 el-button 和 el-input 两个组件，分别是一个按钮和一个输入框。
   • 按钮绑定了一个点击事件 @click="handleClick"，当用户点击按钮时会触发 handleClick 方法。
   • 输入框绑定了一个 v-model，用于双向绑定输入框的值到 inputValue 变量。

2. 脚本部分 (<script>):

   • 引入了 ref 函数，用于创建响应式变量。
   • 引入了 ElButton 和 ElInput 组件。
   • 在 setup 函数中定义了 inputValue 响应式变量和 handleClick 方法。
   • handleClick 方法会在按钮点击时弹出一个提示框。

3. 样式部分 (<style scoped>):

   • 添加了一些简单的样式，给按钮添加了一个底部间距。