elementUI使用

按需使用

下载element-ui

yarn add element-ui

• 引入
  下载为vue-cli提供的包

vue create my-app
cd my-app
// 最后一步即可
vue add element

vue add element

There are uncommitted changes in the current repository, it’s recommended to commit or stash them first.
当前存储库中有未提交的更改，建议先提交或存储它们。

• 会覆盖掉你git上面的仓库修改
  
• How do you want to import Element? (Use arrow keys)
  您希望如何导入元素?(用箭头键)
  
• Do you wish to overwrite Element’s SCSS variables?
  您希望重写元素的SCSS变量吗? no

plugins

import Vue from "vue";
import { Button, Message } from "element-ui";

// 安装插件 --->全局注册组件,按需加载自己需要什么就引入什么,会自动为你添加样式
Vue.use(Button);

// 看文档
Vue.prototype.$message = Message;

main.js

import Vue from "vue";
import App from "./App.vue";

// 只需要引入他即可,内部就会安装一些插件,安装几个就用几个
import "./plugins/element.js";

Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <el-button type="primary" @click="open">el-button</el-button>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    open() {
      this.$message('需要引入message');
    },
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  // 自动添加的,做按需加载element-ui的组件的样式
  // 本来在main文件引入的组件需要样式,但是这里就帮你自动引入组件样式了
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

完整用法

yarn add element-ui

yarn add element-ui

引入

import Vue from "vue";
import App from "./App.vue";

// 引入这个库
import ElementUI from "element-ui";
// 引入样式文件
import "element-ui/lib/theme-chalk/index.css";
Vue.config.productionTip = false;

// 使用elementUI,等于注册全部组件,体积庞大
Vue.use(ElementUI);

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

使用

<template>
  <div id="app">
    app.....
    <!-- 组件的使用,element -->
    <el-button type="danger" @click="open">主要按钮</el-button>

    <el-carousel height="150px" trigger="click" arrow="never">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    open() {
      this.$message('你好啊,提示信息');
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.el-carousel__item h3 {
  background-color: green;
  height: 600px;
}
</style>

信息提示

一定套先备份App.vue

否则elementUI会发生重写

vue add element

vue add element

按需加载

单独引入组件

Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 Message。

• 在一些没有vue实例的地方使用很是方便,比如封装的axios,不再需要this操作

// 引入elementUi消息提示
import { Message } from "element-ui";

此时调用方法为 Message(options)。我们也为每个 type 定义了各自的方法，如 Message.success(options)。并且可以调用 Message.closeAll() 手动关闭所有实例。

使用

 const { message } = response.data;
  // 错误提示
  Message.error(message);
  // 功能失败,返回失败的Promise
  return Promise.reject(message);

<el-button type="danger" @click="handleLogin">发送请求</el-button>

分页器

分页器

引入

import Vue from "vue";
import { Button, Pagination } from "element-ui";

Vue.use(Button);
Vue.use(Pagination);

使用

<div class="block">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background
    :current-page="options.pageNo"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</div>

配置

// 当每页条数发生变化触发
handleSizeChange(SizeChange) {
  this.options.pageSize = SizeChange;
  this.updataProductList();
},
// 当页码发生变化触发
handleCurrentChange(CurrentChange) {
  this.options.pageNo = CurrentChange;
  this.updataProductList();
},

全局message

// plugins
import { Button, Pagination, InputNumber, Message } from "element-ui";

Vue.prototype.$message = Message;

this.$message.error("客官,请同意我们的霸王条约");

MessageBox 弹框

快速上手

import { MessageBox } from "element-ui";
Vue.prototype.$confirm = MessageBox.confirm;

   openPay() {
      this.$confirm("二维码", "请示用微信扫码支", {
        confirmButtonText: "支付成功",
        cancelButtonText: "支付遇到问题",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "支付成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消支付",
          });
        });
    },

      this.$confirm(`<img src=${QRcode.codeUrl}/>`, "请示用微信扫码支", {
        confirmButtonText: "支付成功",
        cancelButtonText: "支付遇到问题",
        dangerouslyUseHTMLString: true,
        center: true,
      })