mirrors/vue-tribute
2
0
Fork 0
mirror of https://github.com/tenrok/vue-tribute.git synced 2026-06-24 13:20:35 +03:00
Code Activity

Updating readme

Browse Source
This commit is contained in:
syropian
2016-07-26 13:46:36 -04:00
parent 71b225dd72
commit 87178e20dc
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+23 -12
View File
@@ -1,36 +1,47 @@
# vue-input-autosize # vue-tribute
[![Build Status](https://travis-ci.org/syropian/vue-input-autosize.svg?branch=master)](https://travis-ci.org/syropian/vue-input-autosize) [![Build Status](https://travis-ci.org/syropian/vue-tribute.svg?branch=master)](https://travis-ci.org/syropian/vue-tribute)
> A simple Vue.js directive for autosizing a text input based on its content. > A Vue.js wrapper for Zurb's Tribute library for native @mentions.
## Install ## Install
```js ```js
$ npm install vue-input-autosize --save $ npm install vue-tribute --save
``` ```
**or** include the UMD build, hosted by [npmcdn](https://npmcdn.com) in a `<script>` tag: **or** include the UMD build, hosted by [npmcdn](https://npmcdn.com) in a `<script>` tag. You will also need to include the main Zurb Tribute library:
```js ```js
<script src="//npmcdn.com/vue-input-autosize"></script> <script src="js/tribute.js"></script>
<script src="//npmcdn.com/vue-tribute"></script>
``` ```
## Usage ## Usage
```js ```js
import Vue from "vue"; import Vue from "vue";
import VueInputAutosize from "vue-input-autosize"; import VueTribute from "vue-tribute";
Vue.use(VueInputAutosize, { maxWidth: 500, minWidth: 20, comfortZone: 0 }); Vue.use(VueTribute, options);
``` ```
...and inside your template: > The `options` parameter is optional.
`<input type='text' :value='msg' v-input-autosize />` ...and inside your template, bind a dynamic `values` parameter to some data:
### Why bind to `value` instead of using `v-model`? `<input type='text' :values='items' v-tribute />`
Currently, there's no easy way to track changes to a `v-model` value from a directive. However, since the `value` property of a text field controls its content, and is also a valid parameter to watch for updates from the directive, we can dynamically bind to that instead.
The `values` array should be an array of objects that contain a key and value like so:
```
[
{key: "Phil Heartman", value: "pheartman"},
{key: "Gordon Ramsey", value: "gramsey"}
]
```
You can modify this structure using the built-in [Tribute options](https://github.com/zurb/tribute#a-collection).
## License ## License