# vue-easy-used-components

vue-easy-used-components主要是为了解决一些常用功能场景、服务于vue系列框架开发的组件升级库

目前组件很少，后续慢慢增加迭代

# 安装及使用

node version >= 12;
npm i vue-easy-used-components

1
2

# main.js配置

import VueEasyUsedComponents from 'vue-easy-used-components';

//引入css
import 'vue-easy-used-components/lib/vue-easy-used-components.css';


Vue.use(VueEasyUsedComponents);

支持treeshaking 
import { EasyUsedCollapseTransition, PerfectCollapseTransition } from 'vue-easy-used-components'
Vue.use(EasyUsedCollapseTransition);
Vue.use(PerfectCollapseTransition);

1
2
3
4
5
6
7
8
9
10
11
12

# Transition组件

    <easy-used-collapse-transition
      @beforeEnter="handleBeforeEnter"
      @afterEnter="handleAfterEnter"
      @beforeLeave="handleBeforeLeave"
      direction="horizon"
      :duration="5000"
      :easing="cubic"
    >
      <div v-show="isShow" class="list">
        <div v-for="i in 8" :key="i" class="list-item">{{ i }}</div>
      </div>
    </easy-used-collapse-transition>

    <!--  cubic: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)' -->

    <!-- handleAfterEnter(el) {
      //默认会在transition组件afterEnter钩子执行后执行
    }

    handleBeforeEnter() {
     //默认会在transition组件beforeEnter钩子执行后前执行
    }

    handleBeforeLeave(el) {
      //默认会在transition组件beforeLeave钩子执行后前执行
    } -->

    <!-- 总结：钩子中带有before字样的，会在默认钩子前执行，带有after字样的会在默认钩子后执行 -->

    <perfect-collapse-transition dimension="width" :duration="1000">
      <div v-show="isShow" class="list">
        <div v-for="i in 8" :key="i" class="list-item">{{ i }}</div>
      </div>
    </perfect-collapse-transition>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 配置说明

参照vue中transition组件、支持 props传递

EasyUsedCollapseTransition组件

字段	属性	默认值	说明
direction	string	(vertical、horizon)	展开方向
duration	number	300	动画时常
easing	string	ease-in-out	动画效果

PerfectCollapseTransition组件

字段	属性	默认值	说明
dimension	string	(height、width)	展开方向
duration	number	300	动画时常
easing	string	ease-in-out	动画效果

# 事件

参照vue中transition组件钩子函数支持钩子函数

字段	属性	默认值	说明
beforeEnter	function	-	参照文档
enter	function	-	参照文档
afterEnter	function	-	参照文档
beforeLeave	function	-	参照文档
leave	function	-	参照文档
afterLeave	function	-	参照文档

# Throttle组件

主要为了解决按钮等频繁点击，页面滚动等防抖节流等

# 页面配置

    <easy-used-throttle :events="baseConfig">
      <!-- 默认是500ms -->
      <!-- 没有配置 blur事件 无效的 -->
      <input type="text" @blur="handleBlur" />
      <!-- 有效的 -->
      <button @click="handleClick">点击</button>
    </easy-used-throttle>
    <hr />
    <easy-used-throttle :time="3000" :events="config">
      <!-- 默认全局配置为3s -->
      <!-- 可以额外给特定事件配置时间 -->
      <input type="text" @blur="handleBlur" @change="handleChange" />
      <!-- 2s 的时间间隔 -->
      <button @click="handleClick">点击</button>
    </easy-used-throttle>

    <!-- methods: {
      handleBlur() {
        //TODO:
      },
      handleClick() {
        //TODO:
      },
      handleChange(e) {
        //TODO:
      }
    } -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# throttle配置说明

注意参考上述案例使用

demo地址 (opens new window)

EasyUsedThrottle组件

字段	属性	默认值	说明
time	number	500(ms)	间隔时间
events	[String, Object]	null	控制被包裹元素是否可以点击

← 前言 vue@2.x →