npm install --save vue-input-effects
yarn add vue-input-effects
全局
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}
}
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 v-model="input0" />
属性 | 类型 | 默认值 | 说明 | 取值 |
---|---|---|---|---|
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>
属性 | 类型 | 默认值 | 说明 | 取值 |
---|---|---|---|---|
underlineColor | String | 下划线颜色 |
<Dird v-model="input2" />
<template>
<Duck v-model="input3">
<div slot="icon-slot" class="input3"></div>
</Duck>
</template>
<style>
.input3 {
height: 100%;
width: 100%;
background: #8D6BFF
}
</style>
属性 | 类型 | 默认值 | 说明 | 取值 |
---|---|---|---|---|
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>
<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>
<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>
属性 | 类型 | 默认值 | 说明 | 取值 |
---|---|---|---|---|
underlineColor | String | 下划线颜色 | ||
underlineShow | Boolean | true | 下划线是否出现 |
<template>
<Pig v-model="input7"/>
</template>