JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-upload
class="upload-demo"
drag
action="//jsonplaceholder.typicode.com/posts/"
:on-success="handleSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="restrictUpload"
:multiple="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">Dropa file here or <em>click to upload</em></div>
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload>
</div>
SCSS
@import url("//unpkg.com/element-ui/lib/theme-default/index.css");
Babel + JSX
var Main = {
methods: {
handleSuccess(v) {
console.log('success', v)
},
handlePreview(v) {
console.log('preview', v)
},
handleRemove(v) {
console.log('remove', v)
},
restrictUpload(file) {
console.log('kill')
return false
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')