Forked from
Added new feature trigger scroll down when image messages loaded.
-
Run
npm install --save vue-chat-scroll-image
, oryarn add vue-chat-scroll-image
-
// ES6 import Vue from 'vue' import VueChatScroll from 'vue-chat-scroll-image' Vue.use(VueChatScroll) // ES5 var Vue = require('vue') Vue.use(require('vue-chat-scroll-image'))
-
Just include
./dist/vue-chat-scroll-image.js
after Vue itself.
There's nothing you need to do in JavaScript except for installation. To use the plugin, simply use the v-chat-scroll
directive.
<ul class="messages" v-chat-scroll @scroll-top="loadNewData()">
<li class="message" v-for="n in messages">{{ n }}</li>
</ul>
Alternatively, you can pass a config value to the directive:
<ul class="messages" v-chat-scroll="{always: false, smooth: true, scrollonremoved:true}">
<li class="message" v-for="n in messages">{{ n }}</li>
</ul>
<ul class="messages" v-chat-scroll="{ image: true }">
<li class="message" v-for="n in messages">
<img src="IMAGE PATH" />
</li>
</ul>