Vue-components-wangyan NPM

vue-components-wangyan

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

文档

日历（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>

moment velocity-animate view-design vue vue-components-wangyan

@infinitebrahmanuniverse/nolb-vue-co @everything-registry/sub-chunk-3077 vue-components-wangyan

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago