element-ui loading加载组件的使用与样式配色

loading：用于加载数据时显示的动效

调用方法分为指令与服务，由于服务并不常用故主要讲解通过指令调用加载组件的方法

loading组件的官方网址：https://element.eleme.cn/#/zh-CN/component/loading

指令

自定义指令为v-loading，只需要绑定Boolean即可。

v-loading="loading"		loading为true则显示加载动效，为false则不显示加载动效
自定义加载文案，图表，背景色
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
当需要全屏加载则添加fullscreen修饰符
v-loading.fullscreen="loading" 
若需要锁定屏幕的滚动，可以使用lock修饰符
v-loading.lock="loading"

实例

<template>
  <div class="app-container">
    <div class="the-container">
      <el-table
        ref="multipleTable"
        v-loading.fullscreen.lock="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        height="100%"
      >
        <el-table-column
          prop="date"
          label="日期"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="checkRow(scope)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      loading: false
    }
  },
  created() {
    this.getTableList()
  },
  mounted() {
    this.loading = true
  },
  methods: {
    checkRow(scope) {
      console.log(scope)
      console.log(scope.row)
    },
    // 用于测试加载组件的方法，延迟一秒后加载消失
    getTableList() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        console.log(this)
      }, 1000)
    }
    // 正常开发调用的方法，待数据传入后加载组件消失。
    // getTableList1() {
    //   this.loading = true
    //   Api.getTable()
    //     .then((data) => {
    //       this.tableData = data
    //     })
    //     .catch((error) => {
    //       console.log(error)
    //     })
    //     .then(() => {
    //       this.loading = false
    //     })
    // }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    height: 100%;
    background-color: #fff;
    padding: 20px;
  }

</style>

样式配色

配色的方式有三种：十六进制色，rgb(),rgba()

十六进制色

格式为： #_ _ _
分为3组6位十六进制数       
三组分别代码red、green、blue
每一组的数值 00-ff  代表由浅到深
eg:#ffffff 是白色因为红绿蓝三种纯色混合为白色

rgb()与rgba()

由于rgba()其各个字母表示的意思与rgb()一致，这里就只讲rgba()。
R -red红色     0-255之间的整数  表示颜色中红色的成分
G -green绿色   0-255之间的整数  表示颜色中绿色的成分
B -blue蓝色    0-255之间的整数  表示颜色中蓝色的成分
A -alpha透明度 0-1之间的数值    数值越小，透明度越高

标签：loading,name,王小虎,普陀区,element,ui,2016,05
来源： https://www.cnblogs.com/shenStudy/p/15403877.html