Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not work with el-input text #112

Open
hok-wtag opened this issue Nov 24, 2019 · 3 comments
Open

Does not work with el-input text #112

hok-wtag opened this issue Nov 24, 2019 · 3 comments

Comments

@hok-wtag
Copy link

hok-wtag commented Nov 24, 2019

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
Copy link

raind33 commented Mar 7, 2020

Me too!

@fritx
Copy link
Owner

fritx commented Apr 19, 2020

Thanks for using this library. 🍻
Related issue: #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
Copy link
Owner

fritx commented Apr 19, 2020

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants