vue-input-effects

---

Install

    npm install --save vue-input-effects
    
    yarn add vue-input-effects

---

Basic use

    全局
    
    import iput from 'vue-input-effects'
    Vue.use(iput)
    
    局部
    import {Input, Shy, Dird, Duck, Fish, Goose, Panda, Pig} from 'vue-input-effects'
    export default {
        components: {Input, Shy, Dird, Duck, Fish, Goose, Panda, Pig}
    }
    

example

---

全局属性方法

属性	类型	默认值	说明
height	string/number	35
width	string/number	260
input-style	string		输入框样式 宽高不管用
disabled	boolean	false	是否可点击使用
autofocus	boolean	false	是否自动聚焦
full-width	boolean	false	是否沾满父盒子
help-text	string		提示文字
focus	function		输入框聚焦事件
blur	function		输入框失焦事件
change	function		输入框改变事件

全局插槽

<slot name="header"></slot>
<slot name="footer"></slot>

使用

<div slot="header"></div>
<div slot="footer"></div>

---

组件

效果

---

所有组件默认插槽无样式需要自定义样式后可见效果

---

Input

<Input v-model="input0" />

---

Shy

属性	类型	默认值	说明	取值
location	String	left	下划线滚动开始位置	left/right/center
underlineColor	String		下划线颜色
defaultUnderlineColor	String	默认下划线颜色
underlineShow	Boolean	true	下划线是否出现
iconShow	Boolean	true	插槽是否出现

<template>
  <Shy v-model="input1">
    <div slot="icon-slot" class="input1"></div>
  </Shy>
</template>

<style>
  .input1 {
    height: 100%;
    width: 100%;
    background: #CE02E8
  }
</style>

---

Dird

属性	类型	默认值	说明	取值
underlineColor	String		下划线颜色

<Dird v-model="input2" />

---

Duck

<template>
  <Duck v-model="input3">
    <div slot="icon-slot" class="input3"></div>
  </Duck>
</template>

<style>
  .input3 {
    height: 100%;
    width: 100%;
    background: #8D6BFF
  }
</style>

---

Fish

属性	类型	默认值	说明	取值
underlineColor	String		下划线颜色
defaultUnderlineColor	String	默认下划线颜色
underlineShow	Boolean	true	下划线是否出现

<template>
  <Fish v-model="input4">
    <div slot="icon-slot" class="input4">阳光网站</div>
  </Fish>
</template>

<style>
  .input4 {
    height: 100%;
    width: 100%;
    background: #8D6BFF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    padding: 0 10px;
  }
</style>

---

Goose

<template>
  <Goose v-model="input5">
    <div slot="icon-slot-one" class="input5-one"></div>
    <div slot="icon-slot-two" class="input5-two"></div>
  </Goose>
</template>

<style>
  .input5-one {
    height: 100%;
    width: 100%;
    background: black;
  }
  .input5-two {
    height: 100%;
    width: 100%;
    background: #8D6BFF;
  }
</style>

---

Panda

<template>
  <Panda v-model="input6">
    <div slot="icon-slot-two" class="input6">阳光网站</div>
  </Panda>
</template>

<style>
  .input6 {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: white;
    padding-left: 10px;
    background: #8D6BFF;
  }
</style>

---

Pig

属性	类型	默认值	说明	取值
underlineColor	String		下划线颜色
underlineShow	Boolean	true	下划线是否出现

<template>
  <Pig v-model="input7"/>
</template>

---

欢迎 pr issues star