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

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

一、介绍

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

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

二、下载与使用

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

npm install

cnpm i element-ui -S

npm run dev

代码引入

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

点击按钮弹出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

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：决定了按钮是不是圆角展示。

Element-ui radio单选框label布尔/数值的一个坑    

如果需要绑定数值或者布尔类型的值，需要在label前加上:，像这样：

<el-radio v-model="" :label="true">0</el-radio>

绑定还可以写：             

:disabled="radio !== true"