Skip to content

Commit

Permalink
feat: add vue-at demo with element-ui 1.x&2.x input/textarea
Browse files Browse the repository at this point in the history
  • Loading branch information
fritx committed Apr 19, 2020
1 parent ce81608 commit 3b168f2
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 0 deletions.
2 changes: 2 additions & 0 deletions public/code/index.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
- hello-world.jsx
- vue-at-element-2.x-input.js
- vue-at-element-1.x-input.js
- vue-threejs.js
- react-at.jsx
- vue-at.js
Expand Down
56 changes: 56 additions & 0 deletions public/code/vue-at-element-1.x-input.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// await loadJs('https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js')
await loadJs('https://unpkg.com/[email protected]/dist/vue.min.js')

await loadCss('https://unpkg.com/[email protected]/lib/theme-default/index.css')
await loadJs('https://unpkg.com/[email protected]/lib/index.js')

await loadJs('https://unpkg.com/[email protected]/index.js')
// await loadJs('https://unpkg.com/vue-at')
await loadJsForceUmd({
url: 'https://unpkg.com/[email protected]/dist/vue-at-textarea.js',
name: 'VueAtTextarea',
deps: { 'textarea-caret': 'getCaretCoordinates' }
})

appendCss(`
.container { padding: 20px }
.editor { margin-top:20px }
`)

// Demo for issue #112 - "Does not work with el-input text"
// https://github.com/fritx/vue-at/issues/112
let App = {
components: { At: VueAtTextarea },
template: `
<div class="container">
<h1>Vue-at with Element-ui 1.x</h1>
<div v-for="link in links">
<a target="_blank" :href="link">{{link}}</a>
</div>
<at :members="members" v-model="input1">
<el-input type="textarea" class="editor"></el-input>
</at>
<at :members="members">
<el-input type="textarea" class="editor" v-model="input2"></el-input>
</at>
<at :members="members">
<el-input type="textarea" :rows="1" resize="none" class="editor" v-model="input3"></el-input>
</at>
</div>
`,
data() {
return {
links: [
'https://github.com/fritx/vue-at',
'https://github.com/fritx/vue-at/issues/96',
'https://github.com/fritx/vue-at/issues/112',
],
members: [
'fritx', 'linguokang', 'huangruichang'
],
input1: '@fritx @huangruichang , v-model on <at> ',
input2: '@fritx @huangruichang , v-model on <el-input> ',
input3: '@fritx @huangruichang , one-line input-box ',
}
}
}
Binary file added public/code/vue-at-element-1.x-input.js.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions public/code/vue-at-element-2.x-input.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// await loadJs('https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js')
await loadJs('https://unpkg.com/[email protected]/dist/vue.min.js')

await loadCss('https://unpkg.com/[email protected]/lib/theme-chalk/index.css')
await loadJs('https://unpkg.com/[email protected]/lib/index.js')

await loadJs('https://unpkg.com/[email protected]/index.js')
// await loadJs('https://unpkg.com/vue-at')
await loadJsForceUmd({
url: 'https://unpkg.com/[email protected]/dist/vue-at-textarea.js',
name: 'VueAtTextarea',
deps: { 'textarea-caret': 'getCaretCoordinates' }
})

appendCss(`
.container { padding: 20px }
.editor { margin-top:20px }
`)

// Demo for issue #112 - "Does not work with el-input text"
// https://github.com/fritx/vue-at/issues/112
let App = {
components: { At: VueAtTextarea },
template: `
<div class="container">
<h1>Vue-at with Element-ui 2.x</h1>
<div v-for="link in links">
<a target="_blank" :href="link">{{link}}</a>
</div>
<at :members="members" v-model="input1">
<el-input type="textarea" class="editor" placeholder="This is not working.. v-model on <at>"></el-input>
</at>
<at :members="members">
<el-input type="textarea" class="editor" v-model="input2"></el-input>
</at>
<at :members="members">
<el-input type="textarea" :rows="1" resize="none" class="editor" v-model="input3"></el-input>
</at>
</div>
`,
data() {
return {
links: [
'https://github.com/fritx/vue-at',
'https://github.com/fritx/vue-at/issues/96',
'https://github.com/fritx/vue-at/issues/112',
],
members: [
'fritx', 'linguokang', 'huangruichang'
],
input1: '@fritx @huangruichang , v-model on <at> ',
input2: '@fritx @huangruichang , v-model on <el-input> ',
input3: '@fritx @huangruichang , one-line input-box ',
}
}
}
Binary file added public/code/vue-at-element-2.x-input.js.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3b168f2

Please sign in to comment.