标签：loading name 王小虎 普陀区 element ui 2016 05
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。