** loading，toast，confirm组件的js调用 ****
import LoadingComponent from './Loading.vue'
import ToastComponent from './Toast.vue'
import ConfirmComponent from './Confirm.vue'
--------------js部分-----------------
const Loading = {
install:function(Vue,options){
let toastTpl = Vue.extend(LoadingComponent) // 创建vue构造器
let $vm = new toastTpl();//实例化vue实例
document.body.appendChild(mount().$el);
Vue.prototype.$loading = {//在Vue原型上添加方法，以全局调用
show(options) { // 控制toast显示的方法
if (typeof options === 'string') { // 对参数进行判断
$vm.text = options // 传入props
}
else if (typeof options === 'object') {
Object.assign($vm, options) // 合并参数与实例
}
$vm.show = true // 显示toast
},
hide() { // 控制toast隐藏的方法
$vm.show = false
}
}
}
}
const Toast = {
install:function(Vue,options){
let toastTpl = Vue.extend(ToastComponent) // 创建vue构造器
let $vm = new toastTpl();//实例化vue实例
document.body.appendChild(mount().$el);
Vue.prototype.$toast = function(options){
if (typeof options === 'string') { // 对参数进行判断
$vm.text = options // 传入props
}
else if (typeof options === 'object') {
Object.assign($vm, options) // 合并参数与实例
}
$vm.show = true
}
}
}
const Confirm = {
install:function(Vue,options){
let comfirmTpl = Vue.extend(ConfirmComponent) // 创建vue构造器
let $vm = new comfirmTpl();//实例化vue实例
document.body.appendChild(mount().$el);
// 阻止遮罩滑动
document.querySelector('#vueConfirm').addEventListener('touchmove', function (e) {
e.stopPropagation()
e.preventDefault()
})
Vue.prototype.$confirm = function(options){
if (typeof options === 'string') { // 对参数进行判断
$vm.text = options // 传入props
}
else if (typeof options === 'object') {
Object.assign($vm, options) // 合并参数与实例
}
$vm.show = true;
}
Vue.prototype.$confirmHide = function(options){
$vm.show = false
}
}
}
export {Loading,Toast,Confirm}
以上三个统一称为dialog组件，使用时需要在main.js中引入并且use
import {Loading,Toast,Confirm} from 'xxx‘
Vue.use(Toast)
Vue.use(Loading)
Vue.use(Confirm)
//js动态调用loading
this.$loading.show({
text:'努力加载中',//默认不填是“加载中”
})
this.$loading.hide()
//js动态调用toast
this.$toast({
text:'请填写正确的手机号码',
duration:2000,//默认2000
callback:function(){
alert('我是回调函数')
}
})
//js动态调用confirm
this.$confirm({
title:'提示',
text:'您确定要取消订单吗？',
cancelTxt:'取消',//默认
confirmTxt:'确定',//默认
okTxt:'知道了',//如果设置该值，弹窗就只有这一个按钮，cancelTxt和confirm隐藏
onConfirm:function(){
alert('点击了确定')
},
onCancel:function(){
alert('取消了操作')
}
})
** pullDown组件（实现的功能是下拉加载更多分页的效果）**
<template>
<div>
<slot></slot>
<div class="load-tips" id="loadTips" v-if="totalCount > 0 && totalCount >= pageSize">{{loadTips}}</div>
<div class="no-data" v-if="hasData">
<img src="@/assets/img/no_data.png"><--暂无数据的图片-->
<p>{{tips}}</p>
</div>
</div>
</template>
<script>
export default {
props: {
pageIndex: {
type: [Number, String],
default: "1"
},
pageSize: {
type: [Number, String],
default: "10"
},
totalCount: {
type: [Number, String],
default: "0"
},
tips: {
type: [String],
default: "暂无记录"
},
callback: {
type: Function,
default() {
return function() {};
}
}
},
data() {
return {
hasData: false,
loadTips: "加载中..."
};
},
watch: {
pageIndex() {
this.pullDown();
},
totalCount(val, oldval) {
this.hasData = false
if (val > 0) {
this.pullDown();
} else if (val == 0) {
this.hasData = true;
}
}
},
methods: {
pullDown() {
var scope = this
let flag = true
let pageSize = this.pageSize
let pageIndex = this.pageIndex
let totalCount = this.totalCount
return new Promise(function(resolve, reject) {
window.addEventListener("scroll", () => {
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight =
document.documentElement.clientHeight || document.body.clientHeight;
if (!document.getElementById("loadTips")) {
return;
}
let rectBottom = document.getElementById("loadTips").getBoundingClientRect().bottom | 0;
//if (scrollTop + clientHeight >= scrollHeight - 25) {
if (rectBottom < clientHeight + 25) {
if (flag) {
flag = false;
setTimeout(function() {
var size = totalCount - pageIndex * pageSize;
if (size > 0 ) {
let newPageIndex = pageIndex;
newPageIndex = newPageIndex + 1;
scope.callback(newPageIndex);
scope.loadTips = "加载中...";
resolve(true);
} else {
scope.loadTips = "已加载全部数据!";
resolve(false);
}
}, 200);
}
}
});
});
}
}
};
</script>
<style lang="less" scoped>
.load-tips{
height:1rem;
line-height:1rem;
text-align:center;
color:#999;
font-size:0.28rem;
}
.no-data{
text-align: center;
margin-top:3rem;
padding-bottom:1rem;
}
.no-data p{
font-size:0.28rem;
color:#999;
line-height: normal;
}
</style>
//调用的方法(页面先import该组件)
<pull-down :pageIndex="pageIndex" :pageSize="pageSize" :totalCount="totalCount" :callback="loadMore">
//列表循环的代码
说明：
pageIndex：页码，
pageSize页的大小，
totalCount数据总数，默认值给-1
loadMore是回调函数，并且含有pageIndex为下一页参数
loadMore(pageIndex){
this.pageIndex = pageIndex
this.getList();
}
