https://github.com/cybernika/effect-input

🎊 优雅而绚丽的适用于 Vue 2.0 的 input 组件。极大提高交互效果和输入愉悦性。
https://github.com/cybernika/effect-input

component effects input vue-components

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/cybernika/effect-input
• Owner: CyberNika
• Created: 2017-12-06T11:31:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-22T09:53:38.000Z (about 7 years ago)
• Last Synced: 2025-03-15T02:26:00.942Z (4 months ago)
• Topics: component, effects, input, vue-components
• Language: CSS
• Homepage: https://cybernika.github.io/effect-input/
• Size: 887 KB
• Stars: 72
• Watchers: 1
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# effect-input

[![NPM version][badge-npm-version]][url-npm]

[![Node version][badge-node-version]][url-npm]

[![NPM download][badge-npm-download]][url-npm]

![Dependencies][badge-dependencies]

![License][badge-license]

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

[![NPM][image-npm]][url-npm]

> 深受 [TextInputEffects][url-TextInputEffects] 的启发。

## 概览

[访问在线示例](https://xbt1.github.io/effect-input)

## 安装

```bash

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

```

## 使用

一个简单的例子

```javascript

import EffectInput from 'effect-input'

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

Vue.use(EffectInput)

```

```html

  

```

## 主题

`effect-input` 的 `type` 属性为主题名，目前有如下主题：

### `haruki`

![haruki](./docs/images/haruki.gif)

### `hoshi`

![hoshi](./docs/images/hoshi.gif)

### `kuro`

![kuro](./docs/images/kuro.gif)

### `jiro`

![jiro](./docs/images/jiro.gif)

### `minoru`

![minoru](./docs/images/minoru.gif)

### `yoko`

![yoko](./docs/images/yoko.gif)

### `hideo`

![hideo](./docs/images/hideo.gif)

### `kyo`

![kyo](./docs/images/kyo.gif)

### `akira`

![akira](./docs/images/akira.gif)

### `ichiro`

![ichiro](./docs/images/ichiro.gif)

### `juro`

![juro](./docs/images/juro.gif)

### `madoka`

![madoka](./docs/images/madoka.gif)

### `kaede`

![kaede](./docs/images/kaede.gif)

### `isao`

![isao](./docs/images/isao.gif)

## 开发

```bash

$ npm install

$ npm run dev

```

## 构建

```bash

$ 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][url-releases]

[badge-npm-version]: https://img.shields.io/npm/v/effect-input.svg

[badge-node-version]: https://img.shields.io/node/v/effect-input.svg

[badge-npm-download]: https://img.shields.io/npm/dt/effect-input.svg

[badge-license]: https://img.shields.io/github/license/xbt1/effect-input.svg

[badge-dependencies]: https://img.shields.io/david/dev/xbt1/effect-input.svg

[url-TextInputEffects]: https://tympanus.net/Development/TextInputEffects/index.html

[url-npm]: https://npmjs.org/package/effect-input

[url-dependencies]: https://david-dm.org/vkbansal/effect-input

[url-releases]: https://github.com/XBT1/effect-input/releases

[image-npm]: https://nodei.co/npm/effect-input.png