• 一 Elementui引入
• 二 elementui使用

一 Elementui引入

Elementui官网：https://element.eleme.cn/#/zh-CN/

图标字体库和CSS框架:https://fontawesome.dashgame.com/

• Elementui是一个ui 库，控制样式的，它就是vue的一个插件

在vue项目中引入 elementui

1. 在项目中安装：

# 安装最新版本
cnpm install element-ui -S


# 降版本安装
cnpm isntall -S element-ui@2.9

加版本
2. main.js配置

import ElementUI from 'element-ui';       // 把对象引入
import 'element-ui/lib/theme-chalk/index.css';  // 把样式引入

Vue.use(ElementUI)

3. 看到好看的，直接复制
   • html
   • css
   • js

二 elementui使用

<template>
  <div>
    <h1>按钮的使用</h1>
    <el-button-group>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share" @click="handleClick"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
    <hr>

    <h1>带链接的文字</h1>
    <div>
      <el-link href="https://element.eleme.io" target="_blank" type="danger">点我看美女</el-link>
    </div>

    <h1>Radio单选</h1>
    <el-radio v-model="radio" label="1">男</el-radio>
    <el-radio v-model="radio" label="2">女</el-radio>

    <h1>input</h1>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 130px">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="handleClick2"></el-button>
      </el-input>
    </div>


    <h1>表格</h1>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <h1>message消息提示</h1>
    <el-button :plain="true" @click="open4">错误</el-button>
  </div>
</template>

<script>
export default {
  name: "ElementuiView",
  data() {
    return {
      radio: '1',
      input3: '',
      select: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleClick() {
      location.href = 'http://www.baidu.com'
    },
    handleClick2() {
      console.log(this.select)
      console.log(this.input3)
    },
    open4() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    }
  }
}
</script>

<style scoped>

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>