// 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 loadJs('https://unpkg.com/vue-at')

await loadJsForceUmd({

url: 'https://unpkg.com/[email protected]/dist/vue-at.js',

name: 'VueAt',

})

appendCss(`

.container { padding: 20px }

.editor { margin-top:20px; padding:4px 8px; height:120px; border:solid 1px gray; white-space:pre-wrap }

`)

let App = {

components: { At: VueAt },

template: `

<div class="container">

<h1>Vue At</h1>

<a target="_blank" href="https://github.com/fritx/vue-at">

https://github.com/fritx/vue-at

</a>

<at :members="members" v-model="input">

<div class="editor" contenteditable></div>

</at>

</div>

`,

data() {

return {

members: [

'fritx', 'linguokang', 'huangruichang'

],

input: '@fritx @huangruichang '

}

}

}