vue-input-effects v1.0.1

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

全局属性方法

全局插槽

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

使用

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

组件

效果

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

Input

<Input v-model="input0" />

Shy

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

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

Dird

<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

<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

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

欢迎 pr issues star