npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-components-wangyan

v0.1.4

Published

## Project setup ``` npm install ```

Downloads

2

Readme

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>