1.1.9 • Published 4 years ago
jm-plug v1.1.9
jm-ui
An ui project base on Vue.js
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
用法
main.js
import JmPlug from 'jm-plug'
Vue.use(JmPlug)
页面引入comfirm组件
this.confirmOptions = {
type: "warning",//warning
title: "提示",//提示
message: "are you ok?",//""
color: '#66b1ff',
btnCancelText: "取消",//取消
btnSubmitText: "确定",//确定
btnSubmitFunction: function () {
console.log('ok')
},
btnCancelFunction: function () {
console.log('no')
}
}
<Jm-comfirm :confirmModalOptions="confirmOptions" ref="myConfirm"></Jm-comfirm>
页面引入scoll组件
<jm-scoll
:on-refresh="onRefresh"
:on-infinite="onInfinite"
:dataList="scrollData"
:marginTop="marginTop">
<ul
ref="scoll">
<li v-for="(item,index) in listdata">{{item.name}}</li>
</ul>
</jm-scoll>
data() {
return {
marginTop:'margin-top:50px;',
pageStart: 0, // 开始页数
pageEnd: 0, // 结束页数
listdata: [], // 数据列表
scrollData:{
noFlag: false //暂无更多数据显示
},
data:[
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
],
data1:[
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
{name: '23424'},
],
}
},
mounted: function() {
// 首次请求数据
this.fetchData();
},
methods: {
fetchData() {
let that = this
// this.axios.get('/api/testData').then((response) => {
// this.listdata = response.data.data.list;
// this.pageEnd = response.data.data.totalPage;
this.listdata = this.data;
// 获取总页数
this.pageEnd = 2;
// 还原
this.pageStart = 0;
// })
},
// 下拉刷新
onRefresh(done) {
this.fetchData();
done(); // call done
},
// 上拉加载更多
onInfinite(done) {
this.pageStart++;
// 加载条
let more = this.$el.querySelector('.load-more');
// 判断是否显示加载条
if(this.pageStart > this.pageEnd){
//走完数据调用方法
this.scrollData.noFlag = true;
}else{
let _this = this;
// this.axios.get('/api/testData').then((response) => {
// _this.listdata = _this.listdata.concat(response.data.data.list);
// 获取总页数
// _this.pageEnd = response.data.data.totalPage;
// })
setTimeout(() => {
_this.listdata = _this.listdata.concat(this.data1);
// 获取总页数
_this.pageEnd = 2;
// 隐藏加载条
more.style.display = 'none';
done();
},3000)
}
}
}
消息滚动组件
<Jm-marquee :marqueeList="marqueeList">消息滚动</Jm-marquee>
data() {
return {
marqueeList: [ //消息滚动
{
name: '军电视剧烦恼是的空间开发'
},
{
name: '军水电费了羧甲淀粉钠盛开'
},
{
name: '军第三方库收到货否'
},
{
name: '军杜师傅iOS'
}
]
}
}
1.1.9
4 years ago
1.1.8
4 years ago
1.1.7
4 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago