vue-components-wangyan
v0.1.4
Published
## Project setup ``` npm install ```
Downloads
3
Readme
vue-components-wangyan
Project setup
npm installCompiles and hot-reloads for development
npm run serveCompiles and minifies for production
npm run buildCustomize configuration
文档
日历（wyCalendar）
日历模块，可以选择日期，禁用日期，任意切换日期
import { wyCalendar } from 'vue-components-wangyan';
基础用法
可以使用 v-model 实现数据的双向绑定。绑定的值为数组类型且其值的日期形式为YYYY-MM-DD.
<template>
<div>
<wy-Calendar v-modal="date"></wy-Calendar>
</div>
</template>
<script>
export default {
data() {
return{
date:['2021-08-01','2021-08-02','2021-08-03','2021-08-04']
}
}
}
</script>
禁用日期
可以通过属性useDate来禁用日期，当useDate的值为数组时，其中为可选择日期，当为函数时，是一个返回数组的函数，支持Promise,调用该函数的参数为当前日历的开始日期和结束日期
<template>
<div>
<wy-Calendar v-modal="date" :useDate="useDate"></wy-Calendar>
</div>
</template>
<script>
export default {
data() {
return{
date:['2021-08-01','2021-08-02','2021-08-03','2021-08-04'],
useDate: ['2021-08-01','2021-08-02','2021-08-03','2021-08-04',
'2021-08-05','2021-08-06','2021-08-07','2021-08-08''2021-08-09',
'2021-08-10','2021-08-11','2021-08-12']
}
}
}
</script><template>
<div>
<wy-Calendar v-modal="date" :useDate="useDate"></wy-Calendar>
</div>
</template>
<script>
export default {
data() {
return{
date:['2021-08-01','2021-08-02','2021-08-03','2021-08-04'],
useDate: getUseDate
}
},
methods: {
getUseDate(startDate, endDate) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(['2021-08-01','2021-08-02','2021-08-03','2021-08-04','2021-08-05','2021-08-06','2021-08-07','2021-08-08','2021-08-09'])
}, 1000)
})
}
}
}
</script>周起始日
可以通过属性firstDayOfWeek来设置一周的第一天是星期日还是星期一值为1或7，默认是1。
<template>
<div>
<wy-Calendar v-modal="date":firstDayOfWeek="firstDayOfWeek"></wy-Calendar>
</div>
</template>
<script>
export default {
data() {
return{
date:['2021-08-01','2021-08-02','2021-08-03','2021-08-04'],
firstDayOfWeek: 1
}
}
}
</script>设置被选日期的颜色
通过属性selectedColor属性来定义被选中的颜色的样式。
<template>
<div>
<wy-Calendar v-modal="date" selectedColor="yellow"></wy-Calendar>
</div>
</template>
<script>
export default {
data() {
return{
date:['2021-08-01','2021-08-02','2021-08-03','2021-08-04']
}
}
}
</script>状态加载器（wyContentLoad）
用于异步请求数据，根据请求的结果展示不同的状态
import { wyContentLoad } from 'vue-components-wangyan';基本用法
通过getData属性传入一个异步请求函数，在组件创建完成时执行函数，可以通过mountedLoad取消默认执行函数，通过其方法init来手动执行函数。
<template>
<div id="app">
<wyContentLoad :getData="getData">
<div>{{text}}</div>
</wyContentLoad>
</div>
</template>
<script>
export default {
data() {
return {
date: ["2021-05-01"],
text: null
};
},
methods: {
async getData() {
await new Promise((resolve) => setTimeout(resolve, 2000));
this.text = "hello world！";
return true;
},
}
};
</script>自定义执行请求函数
通过将属性mountedLoad置为false，可以取消在创建时执行getData函数，然后通过其方法init来手动执行getData函数。
<template>
<div id="app">
<wyContentLoad :getData="getData" :mountedLoad="false" ref="content">
<div>{{text}}</div>
</wyContentLoad>
</div>
</template>
<script>
export default {
data() {
return {
date: ["2021-05-01"],
text: null
};
},
methods: {
async getData() {
await new Promise((resolve) => setTimeout(resolve, 2000));
this.text = "hello world！";
return true;
},
},
mounted() {
this.$refs.content.init();
}
};
</script>自定义状态
支持通过slot来自定义不同状态的显示内容。
<template>
<div id="app">
<wyContentLoad :getData="getData">
<div>{{text}}</div>
<div slot="empty">自定义空状态</div>
<div slot="loading">我是loading</div>
<div slot="error">加载出差了</div>
</wyContentLoad>
</div>
</template>
<script>
export default {
data() {
return {
date: ["2021-05-01"],
text: null
};
},
methods: {
async getData() {
await new Promise((resolve) => setTimeout(resolve, 2000));
this.text = "hello world！";
return true;
},
},
};
</script>
图片加载器（wyImage）
用于加载图片，支持本地图片和网络图片，自定义加载图片的过渡状态和加载失败的状态。
import { wyImage } from 'vue-components-wangyan';基本用法
通过属性src设置图片地址加载图片。
<template>
<div id="app">
<wy-image :src="src"></wy-image>
</div>
</template>
<script>
export default {
data() {
return {
src:"http://store.webimagine.cn/uploadimg/2021/05/26/0a2a0182f287add78bfc113744b426d1.jpeg",
};
}
};
</script>
自定义加载状态
使用slot添加不同的加载状态。
<template>
<div id="app">
<wy-image :src="src">
<div slot="loading">加载中...</div>
<div slot="error">加载失败</div>
</wy-image>
</div>
</template>
<script>
export default {
data() {
return {
src:"http://store.webimagine.cn/uploadimg/2021/05/26/0a2a0182f287add78bfc113744b426d1.jpeg"
};
}
};
</script>
图片懒加载
通过把属性lazy设置为true,开启图片懒加载，同时需要用viewport指定容器，默认是document，其值类型为HTMLElement。
<template>
<div id="app">
<div class="boxList">
<div class="box" v-for="(item, index) in list" :key="index">
<wy-image :viewport="viewport" :lazy="true" :src="item"></wy-image>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
"http://store.webimagine.cn/uploadimg/2021/05/26/0a2a0182f287add78bfc113744b426d1.jpeg",
"http://store.webimagine.cn/uploadimg/2021/05/26/3774d200b4f147ff138e7c74b299dfe3.jpg",
"http://store.webimagine.cn/uploadimg/2021/05/26/dc922adff1094a91b53bb3661a41eb6a.jpg",
"http://store.webimagine.cn/uploadimg/2021/05/26/7b8ebceeb9f0d1dfdd0cd7e2c9f7b385.jpg",
],
viewport: null,
};
},
methods: {},
mounted() {
this.viewport = document.querySelector("#app");
},
};
</script>
<style lang="less">
body {
margin: 100px;
}
#app {
width: 400px;
background-color: yellow;
height: 400px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
&::-webkit-scrollbar {
display: none;
}
.boxList {
width: auto;
display: flex;
.box {
height: 400px;
width: 400px;
}
}
}
</style>