先下载插件。npm install zkr-drag --save
完成后可以在全局引入(main.js文件)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueTost from 'zkr-drag'
Vue.config.productionTip = false
Vue.use(vueTost)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
然后是在具体页面使用:
<test-toast></test-toast>
如果想要更改拖拽框里的内容,可以直接在里面写标签
<test-toast>
<div style="color:red;">121212121</div>
<div style="color:red;">121212121</div>
</test-toast>
就会出现:
具体效果可以访问地址https://zctt666666.github.io/demo/drag 是原生html写的,跟这个vue插件效果一样