Vue+ElementUI快速入门

此文章主要演示 在Vue框架中如何使用ElementUI

其主要包含步骤如下

Step1 创建Vue项目（脚手架）

vue init webpack openlayerstest

Step2 安装ElementUI框架

ElementUI官网 组件 | Element

npm安装：

npm i element-ui -S

在 main.js 中写入以下内容：

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)
});

Step3 使用方法

先选择 ElementUI中一个多选框效果

在Vue中创建一个 新的.Vue组件，并将 ElementUI中的代码 复制到.Vue中。

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    name: "ElementTest",
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  }
</script>

<style scoped>

</style>

运行Vue 查看效果

Step4 监听备选数据

通过Vue中的 watch 来完成数据监听：

// watch中的 监听数据写法 
// 被监听的数据: 当数据发生改变时运行的方法（function）
watch:{
      checkedCities:function () {
      console.log(this.checkedCities)
}

Step5 修改Element-UI的CSS样式

首先 在template中，给 div盒子一个 class

<template>
    👇👇👇
  <div class="MultipleChoice"> 
    👆👆👆
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

修改 style标签中，将其内部的 scoped 删除，然后根据下图中，我们要修改的属性获取其 class名，

举例：修改 字体大小。找到字体的标签，其class名称为 el-checkbox__label ，我们的 div标签的class名称为 MultipleChoice ，所以通过如下代码 即可修改

<style>
  .MultipleChoice .el-checkbox__label {
    font-size: 50px;
  }
</style>

下图为修改效果

注：此修改方法比较拙劣，但也能解一时之需，本人菜鸡。