基本操作

Element UI是一款非常优秀的UI组件库，但是在实际项目中，我们可能需要对其进行二次封装，以便更好地满足项目需求。下面是一个简单的Element UI二次封装示例：

1. 创建一个element.js文件，用于封装Element UI组件：

import Vue from 'vue'
import {
  Button,
  Input,
  Form,
  FormItem,
  Message,
  MessageBox
} from 'element-ui'

Vue.use(Button)
Vue.use(Input)
Vue.use(Form)
Vue.use(FormItem)

Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

上述代码中，我们引入了Element UI中常用的组件，并将其注册到Vue实例中。同时，我们还将Message和MessageBox挂载到Vue原型上，以便在组件中使用。

2. 在main.js文件中引入element.js文件：

import Vue from 'vue'
import App from './App.vue'
import './element.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在组件中使用封装后的Element UI组件：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></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>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$message.success('登录成功')
        } else {
          this.$message.error('登录失败')
        }
      })
    }
  }
}
</script>

上述代码中，我们可以看到，在组件中使用了封装后的el-form、el-input、el-button等组件，同时也使用了封装后的$message方法。

通过以上步骤，我们就可以对Element UI进行二次封装，以便更好地满足项目需求。

下面我们通过做一个小案例实现具有loading效果的el-button按钮

要实现el-button具有loading效果的按钮，可以通过二次封装来实现。下面是一个简单的示例：

1. 创建一个LoadingButton.vue组件，用于封装具有loading效果的按钮：

<template>
  <el-button :loading="loading" :disabled="loading" @click="handleClick">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

上述代码中，我们创建了一个LoadingButton组件，它接受一个loading属性，用于控制按钮的loading状态。在组件中，我们使用了el-button组件，并将loading属性和disabled属性绑定到了loading属性上，以便在loading状态下禁用按钮。同时，我们还使用了<slot>插槽，以便在组件中使用按钮的文本内容。在点击按钮时，我们通过$emit方法触发了click事件。

2. 在main.js文件中注册LoadingButton组件：

import Vue from 'vue'
import App from './App.vue'
import LoadingButton from './components/LoadingButton.vue'

Vue.component('LoadingButton', LoadingButton)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

上述代码中，我们将LoadingButton组件注册到了Vue实例中，以便在其他组件中使用。

3. 在其他组件中使用LoadingButton组件：

<template>
  <div>
    <loading-button :loading="loading" @click="handleClick">登录</loading-button>
  </div>
</template>

<script>
import LoadingButton from '@/components/LoadingButton.vue'

export default {
  components: {
    LoadingButton
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleClick() {
      this.loading = true
      // 模拟异步请求
      setTimeout(() => {
        this.loading = false
      }, 2000)
    }
  }
}
</script>

上述代码中，我们在组件中使用了LoadingButton组件，并将loading属性绑定到了组件的loading属性上。在点击按钮时，我们将loading属性设置为true，以便显示loading状态。在模拟异步请求完成后，我们将loading属性设置为false，以便隐藏loading状态。

通过以上步骤，我们就可以实现具有loading效果的el-button按钮的二次封装。