vue-element

### Vue.js 与 Element UI 的集成及使用示例

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库[^1]。通过将 Vue.js 与 Element UI 结合，可以快速构建美观且功能强大的 Web 应用程序。

#### 安装依赖项
为了使项目能够运行并利用 Element UI 组件，在创建新的 Vue 项目之后，需安装 Element UI：

npm install element-ui --save

#### 配置引入方式
可以在 `main.js` 文件中全局注册整个 Element UI 或者按需加载特定组件来减少打包体积：

##### 全局引入
适用于希望一次性导入所有组件的情况：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

##### 按需引入
推荐用于优化性能的方式，仅载入实际使用的部分模块：

// main.js
import Vue from 'vue';
import { Button, Select } from 'element-ui'; // 导入所需组件
import App from './App.vue';

Vue.component(Button.name, Button);         // 注册按钮组件
Vue.component(Select.name, Select);        // 注册下拉框组件
/* ... */
new Vue({
    render: h => h(App),
}).$mount('#app');

#### 使用实例
下面展示了一个简单的表单提交场景，其中包含了输入框、日期选择器以及消息提示框等功能部件的应用方法：

<template>
  <div id="example">
    <!-- 表单项 -->
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="日期时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    
    <!-- 提交成功后的弹窗 -->
    <el-dialog title="操作结果" :visible.sync="dialogVisible" width="30%">
      <span>恭喜您，数据已保存。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入活动名称'));
      }
      setTimeout(() => {
        if (value.length < 5) {
          callback(new Error('长度不少于五个字符'));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      ruleForm: {
        name: '',
        date1: '',
        date2: ''
      },
      rules: {
        name: [
          { validator: checkName, trigger: 'blur' }
        ]
      },
      dialogVisible: false,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          this.dialogVisible = true;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

此代码片段展示了如何结合 Vue.js 和 Element UI 创建一个带有验证逻辑的表单，并处理用户的交互行为，如点击按钮触发事件等。