docs: add element-ui el-input demo, and recommend v-model on textarea, ref #89 #96

Author: fritx

README.md

@@ -16,6 +16,8 @@ Live Demo & Documentation: https://fritx.github.io/vue-at
 - [x] ContentEditable/Textarea
 - [x] Avatars, custom templates
 - [x] Vue2/Vue1
+- [x] Vuetify v-textarea
+- [x] Element el-input
 
 See also: [react-at](https://github.com/fritx/react-at)
 
@@ -63,16 +65,16 @@ export default {
 
 ## Using V-Model (Recommended)
 
-Notice that `<editor v-model>` could be buggy,<br>
-and should be like `<at v-model><editor></at>` instead.
+~~Notice that `<editor v-model>` could be buggy,<br>
+and should be like `<at v-model><editor></at>` instead.~~
 
 ```vue
 <at v-model="html">
   <div contenteditable></div>
 </at>
 
-<at-ta v-model="text">
-  <textarea></textarea>
+<at-ta>
+  <textarea v-model="text"></textarea>
 </at-ta>
 ```
 
@@ -154,3 +156,21 @@ This gives you the option of changing the style of inserted tagged items. It is
   <span class="tag"><img :src="s.current.avatar">{{ s.current.name }}</span>
 </span>
 ```
+
+### Vuetify v-textarea
+
+```vue
+<at-ta :members="members">
+  <!-- slots -->
+  <v-textarea class="vuetify-editor" v-model="text"></v-textarea>
+</at-ta>
+```
+
+### Element-UI el-input
+
+```vue
+<at-ta :members="members" v-model="text">
+  <!-- slots -->
+  <el-input type="textarea" class="element-editor" v-model="text3"></el-input>
+</at-ta>
+```

package.json

@@ -22,12 +22,14 @@
     "babel-preset-stage-0": "^6.16.0",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
+    "element-ui": "^2.8.2",
     "file-loader": "^0.9.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^4.1.0",
     "style-loader": "^0.23.1",
     "textarea-caret": "^3.0.2",
     "uglifyjs-webpack-plugin": "^1.2.2",
+    "url-loader": "^1.1.2",
     "vue": "^2.1.0",
     "vue-loader": "^10.3.0",
     "vue-style-loader": "^1.0.0",

src/App.vue

@@ -48,14 +48,26 @@
       <textarea class="editor"></textarea>
     </at-ta>
 
-    <at-ta :members="members" name-key="name" v-model="text2">
+    <at-ta :members="members" name-key="name">
       <!-- custom: with avatars -->
       <template slot="item" scope="s">
         <img :src="s.item.avatar">
         <span v-text="s.item.name"></span>
       </template>
 
-      <v-textarea class="vuetify-editor"></v-textarea>
+      <v-textarea class="vuetify-editor" v-model="text2"></v-textarea>
+    </at-ta>
+
+    <br />
+
+    <at-ta :members="members" name-key="name">
+      <!-- custom: with avatars -->
+      <template slot="item" scope="s">
+        <img :src="s.item.avatar">
+        <span v-text="s.item.name"></span>
+      </template>
+
+      <el-input type="textarea" v-model="text3" class="element-editor"></el-input>
     </at-ta>
   </div>
 </template>
@@ -119,6 +131,7 @@ Playback - Video player.
       `.trim() // fix trailing abnormal nodes
     }
     data.text2 = data.text
+    data.text3 = data.text
     data.html2 = data.html
     return data
   }
@@ -147,6 +160,10 @@ Playback - Video player.
   white-space: pre-wrap;
   border: solid 2px rgba(0,0,0,.5);
 }
+textarea {
+  display: block;
+}
+
 .vuetify-editor {
   width: 400px;
   margin: 0;
@@ -155,6 +172,19 @@ Playback - Video player.
 .vuetify-editor textarea {
   height: 200px;
 }
+.v-input__slot {
+  margin: 0;
+}
+.v-text-field__details {
+  display: none;
+}
+
+.element-editor {
+  width: 400px;
+}
+.element-editor textarea {
+  height: 200px;
+}
 
 .avatar {
   max-width: 1em;

src/main.js

@@ -1,9 +1,12 @@
+import 'element-ui/lib/theme-chalk/index.css'
 import 'vuetify/dist/vuetify.min.css'
 import Vuetify from 'vuetify'
+import ElementUI from 'element-ui'
 import Vue from 'vue'
 import App from './App.vue'
 
 Vue.use(Vuetify)
+Vue.use(ElementUI)
 
 new Vue({
   el: '#app',

webpack/base.js

@@ -27,6 +27,10 @@ module.exports = {
         test: /\.css$/,
         loader: 'style-loader!css-loader'
       },
+      {
+        test: /\.(ttf|woff)$/,
+        loader: 'url-loader'
+      },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: 'file-loader',