Vue.js进阶【5-1】element-ui入门

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ClamReason/article/details/82733681

一、介绍

element提供了按钮、单选、日期、下拉、文本框等各种UI界面控件。

该库可以很好的和Vue结合起来用。

二、下载与使用

官方下载地址：https://github.com/ElementUI/element-starter

下载到本地目录之后安装运行即可看到一个按钮的Demo

npm install

npm run dev

点击按钮弹出dialog

Demo代码

<template>
  <div id="app">
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    startHacking () {
      alert('hello button!');
    }
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

按钮的响应事件执行体被我改成了alert。

三、详细介绍

一个全面介绍element-ui的博客：https://blog.csdn.net/mapbar_front/article/details/79102167

扫描二维码关注公众号，回复： 3359779 查看本文章

1 按钮Button

各种按钮展示

<template>
  <div id="app">
    <div>
      <div class="flex-box">
      <h2>各种button</h2>
      <el-row class="flex1 margin-left10">
        <el-col :span="3"><el-button>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
        <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
        <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
        <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
      </el-row>
    </div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    startHacking () {
      alert('hello button!');
    }
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

按钮是el-button来表示的

按钮是分类的，每一种类型就对应不同的button。

按钮的类型type可取值：’primary’、’success’、’warning’、’info’、’danger’

plain：决定了按钮是否使用素色系列。

round：决定了按钮是不是圆角展示。