mintUI中Popup的使用
1.index.html<!-- 引入mint-ui --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><script src="https://unpkg.com/mint-ui/lib/index.js"></script>2.vue....
·
1.index.html
<!-- 引入mint-ui -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
2.vue.config.js
configureWebpack: {
externals: {
'mint-ui': 'MINT',
}
}
3.使用PopupDemo.vue
<style lang="scss" scoped>
.infiniteScrollDemo {
text-align: center;
.loading {
display: flex;
.loading-icon {
padding-top: 10px;
margin: 0 auto;
}
}
.market-money {
color: blue;
padding: 15px;
width: 200px;
border-radius: 8px;
padding: 10px;
-webkit-transform: translate(-50%);
transform: translate(-50%);
left: 50%;
position: fixed;
background: #fff;
font-size: 20px;
color: #26a2ff;
}
}
</style>
<template>
<div class="infiniteScrollDemo">
<ul v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
class="page-infinite-list">
<li v-for="item in list"
class="page-infinite-listitem"
@click="testPopup">{{ item }}</li>
<mt-popup v-model="popupVisible"
popup-transition="popup-fade">
<div class="market-money">股市基金</div>
</mt-popup>
</ul>
<div v-if="loading"
class="loading">
<div class="loading-icon">
<mt-spinner type="fading-circle"
color="#26a2ff"
class="loading-icon"></mt-spinner>
<div>加载中</div>
</div>
</div>
<div v-if="showEnd">我是有底线的</div>
</div>
</template>
<script>
import { InfiniteScroll, Spinner, Popup } from 'mint-ui';
export default {
data() {
return {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
loading: false,
showEnd: false,
popupVisible: false
};
},
name: 'infiniteScrollDemo',
methods: {
loadMore() {
this.loading = true;
if (this.list.length < 50) {
setTimeout(() => {
let last = this.list[this.list.length - 1];
for (let i = 1; i <= 10; i++) {
this.list.push(last + i);
}
this.loading = false;
}, 1000);
} else {
this.loading = false;
this.showEnd = true;
}
},
testPopup() {
this.popupVisible = true
}
}
}
</script>
更多推荐
已为社区贡献71条内容
所有评论(0)