Elegant Input Component For Vue.js 2 – effect-input

Elegant Input Component For Vue.js 2 – effect-input

This is a Vue.js 2 component for creating the elegant, animated input fields to improve the user experience.

effect-input

NPM version Node version NPM download Dependencies License

优雅而绚丽的适用于 Vue 2.0 的 input 组件。极大提高交互效果和输入愉悦性。

NPM

深受 TextInputEffects 的启发。

概览

访问在线示例

安装

$ yarn add effect-input # npm i -S effect-input

使用

一个简单的例子

import EffectInput from 'effect-input'
import 'effect-input/dist/index.css'

Vue.use(EffectInput)
<template>
  <effect-input v-model="value" type="jiro" label="姓名"></effect-input>
</template>

主题

effect-inputtype 属性为主题名,目前有如下主题:

haruki

haruki

hoshi

hoshi

kuro

kuro

jiro

jiro

minoru

minoru

yoko

yoko

hideo

hideo

kyo

kyo

akira

akira

ichiro

ichiro

juro

juro

madoka

madoka

kaede

kaede

isao

isao

开发

$ npm install
$ npm run dev

构建

$ npm run build:package # 构建 npm 包
$ npm run build:example # 构建示例站点
$ npm run build # build:package & build:example

TODOs

  • 添加更多主题
    • SET 2
      • [x] manami
      • [x] nariko
      • [ ] nao
      • [ ] yoshiko
      • [ ] shoko
      • [ ] chisato
      • [ ] makiko
      • [ ] sae
      • [ ] kozakura
      • [ ] fumi
      • [ ] ruri
      • [ ] kohana

更新日志

详见 releases

Github Repository

Tags: #VueJs