fritx / vue-at

At.js for Vue.
https://fritx.github.io/vue-at/
MIT License
529 stars 114 forks source link

Does not work with el-input text #112

Open hok-wtag opened 4 years ago

hok-wtag commented 4 years ago

is it possible to work with el-input type text? when I use type="text", it throws error. how to use with text input?

<at-ta :members="members">
  <!-- slots -->
  <el-input v-model="text" type="text"></el-input>
</at-ta>
raind33 commented 4 years ago

Me too!

fritx commented 4 years ago

Thanks for using this library. 🍻 Related issue: https://github.com/fritx/vue-at/issues/96

Tested in Element-ui 1.x & 2.x, and seems it is okay to use with vue-at. Pls checkout the umd demo below: - https://coldemo.github.io/#/playground/vue-at-element-1.x-input.js - https://coldemo.github.io/#/playground/vue-at-element-2.x-input.js (Source-code here)

It's recommended to use like

<el-input type="textarea" v-model="input">

Or if you need one-line input-box, try

<el-input type="textarea" :rows="1" resize="none" v-model="input">

(Adding resize=none can disable user-resizing as default behavior)

1. for module usage

npm install --save vue-at textarea-caret
<at :members="members">
  <el-input type="textarea" v-model="input"></el-input>
</at>

<script>
import VueAtTextarea from 'vue-at'
export default {
  components: { At: VueAtTextarea }
}
</script>

2. for umd usage

await loadCss('https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css')
await loadJs('https://unpkg.com/element-ui@2.13.1/lib/index.js')

await loadJs('https://unpkg.com/textarea-caret@3.1.0/index.js')
// await loadJs('https://unpkg.com/vue-at')
await loadJsForceUmd({
  url: 'https://unpkg.com/vue-at@2.5.0-beta.2/dist/vue-at-textarea.js',
  name: 'VueAtTextarea',
  deps: { 'textarea-caret': 'getCaretCoordinates' }
})

App = {
  components: { At: VueAtTextarea },
  template: `
    <at :members="members">
      <el-input class="editor" v-model="input"></el-input>
    </at>
  `
}
fritx commented 4 years ago

@hok-wtag @raind33 for <el-input type="text"> , it might be included in the future, thanks.

But for now, we've got only <el-input type="textarea"> as workaround.