Vue3中正确使用ElementPlus的示例代码

下面是详细讲解“Vue3中正确使用ElementPlus的示例代码”的完整攻略。

安装ElementPlus

要在Vue3中使用ElementPlus，首先需要先安装它。可以通过npm或yarn安装ElementPlus。以下是使用npm安装的示例代码：

npm install element-plus --save

或者使用yarn进行安装：

yarn add element-plus

引入ElementPlus

在Vue3中，可以使用使用按需加载的形式引用ElementPlus。可以通过按需引入来减少应用的体积，提高应用启动速度。下面是示例代码：

import { createApp } from 'vue';
import {
  ElButton,
  ElInput,
  ElForm,
  ElFormItem,
  ElMessage,
} from 'element-plus';

import 'element-theme-default/lib/button.css';
import 'element-theme-default/lib/input.css';
import 'element-theme-default/lib/form.css';
import 'element-theme-default/lib/form-item.css';
import 'element-theme-default/lib/message.css';

const app = createApp(App);

app
  .use(ElButton)
  .use(ElInput)
  .use(ElForm)
  .use(ElFormItem)

app.config.globalProperties.$message = ElMessage;

这段代码将按需引入了ElementPlus的Button、Input、Form、FormItem和Message组件，并将Message挂载到Vue3的原型链上。

使用示例1：按钮组件

下面是使用ElementPlus的Button组件的示例代码：

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button plain>朴素按钮</el-button>
    <el-button round>圆角按钮</el-button>
    <el-button circle>圆形按钮</el-button>
    <br />
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit">编辑</el-button>
    <el-button type="primary" icon="el-icon-printer">打印</el-button>
    <el-button type="primary" icon="el-icon-upload2">上传</el-button>
  </div>
</template>

这段代码展示了如何使用ElementPlus的Button组件，其中包括了默认按钮、主要按钮、成功按钮、警告按钮、危险按钮、朴素按钮、圆角按钮、圆形按钮和带图标的按钮。

使用示例2：表单组件

下面是使用ElementPlus的Form组件和Input组件的示例代码：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="form.sex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="爱好" prop="hobby">
      <el-checkbox-group v-model="form.hobby">
        <el-checkbox label="篮球"></el-checkbox>
        <el-checkbox label="足球"></el-checkbox>
        <el-checkbox label="网球"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        password: '',
        sex: '',
        hobby: [],
      },
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: 'success',
            message: '提交成功',
          });
        } else {
          this.$message({
            type: 'error',
            message: '提交失败',
          });
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

这段代码展示了如何使用ElementPlus的Form组件和Input组件，包括表单的验证和提交。其中使用了Ref将表单和组件绑定起来，使用了validate方法验证表单，使用了resetFields方法重置表单。

以上就是在Vue3中正确使用ElementPlus的示例代码的攻略。希望对你有所帮助。