# Loaidng 加载
# 基础用法
<vp-button @click="loadingHandle">默认 Loading</vp-button>
<script>
export default {
data() {
return {
};
},
methods: {
loadingHandle() {
let loadObj = this.$loading();
setTimeout(() => {
loadObj.close();
}, 3000);
}
}
};
</script>
# 自定义 Loading
loading...
<vp-button @click="loadingHandle1">自定义 Loading</vp-button>
<div class="loading">loading...</div>
<script>
export default {
data() {
return {
};
},
methods: {
loadingHandle1() {
let loadObj = this.$loading({
ele: document.getElementsByClassName("loading")[0],
color: "#192a56",
iconfont: "icon-redupaixu",
backgroundColor: "rgba(52, 152, 219, .7)"
});
setTimeout(() => {
loadObj.close();
}, 3000);
}
}
};
</script>
<style>
.loading {
border: 1px solid #eee;
width: 300px;
height: 300px;
}
</style>
# Loaidng
使用方法
Vue.use("loading.vue");
this.$loading(option: Object): Object -> close();
# Loading Attributes
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
ele | DOM元素 | 要添加加载的DOM元素 | document.body |
message | String | 加载显示的文本 | "loading..." |
color | String | 加载显示文本颜色 | "#000000" |
iconfont | String | 加载文本前方显示的 iconfont 类名("icon-xxx") | "" |
backgroundColor | String | 加载背景颜色(建议使用 rgba) | "rgba(44, 62, 80, .7)" |