update Source code

master
git 8 years ago
parent 27dca17f14
commit 49eb5f6459

@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div class="pt-5"> <div class="pt-5">
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Avatar.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Avatar.vue</a> Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Avatar.vue">/docs/views/examples/Avatar.vue</a>
</div> </div>
</div> </div>
</template> </template>

@ -49,7 +49,7 @@
</div> </div>
<div class="pt-5"> <div class="pt-5">
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Drag.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Drag.vue</a> Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Drag.vue">/docs/views/examples/Drag.vue</a>
</div> </div>
</div> </div>
</template> </template>

@ -10,70 +10,71 @@
<h3>Drop files to upload</h3> <h3>Drop files to upload</h3>
</div> </div>
<div class="upload" v-show="!isOption"> <div class="upload" v-show="!isOption">
<table class="table table-hover"> <div class="table-responsive">
<thead> <table class="table table-hover">
<tr> <thead>
<th>#</th> <tr>
<th>Thumb</th> <th>#</th>
<th>Name</th> <th>Thumb</th>
<th>Size</th> <th>Name</th>
<th>Speed</th> <th>Size</th>
<th>Status</th> <th>Speed</th>
<th>Action</th> <th>Status</th>
</tr> <th>Action</th>
</thead> </tr>
<tbody> </thead>
<tr v-if="!files.length"> <tbody>
<td colspan="7"> <tr v-if="!files.length">
<div class="text-center p-5"> <td colspan="7">
<h4>Drop files anywhere to upload<br/>or</h4> <div class="text-center p-5">
<label :for="name" class="btn btn-lg btn-primary">Select Files</label> <h4>Drop files anywhere to upload<br/>or</h4>
</div> <label :for="name" class="btn btn-lg btn-primary">Select Files</label>
</td>
</tr>
<tr v-for="(file, index) in files" :key="file.id">
<td>{{index}}</td>
<td>
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
<span v-else>No Image</span>
</td>
<td>
<div class="filename">
{{file.name}}
</div>
<div class="progress" v-if="file.active || file.progress !== '0.00'">
<div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
</div>
</td>
<td>{{file.size | formatSize}}</td>
<td>{{file.speed | formatSize}}</td>
<td v-if="file.error">{{file.error}}</td>
<td v-else-if="file.success">success</td>
<td v-else-if="file.active">active</td>
<td v-else></td>
<td>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
Action
</button>
<div class="dropdown-menu">
<a :class="{'dropdown-item': true, disabled: file.active || file.success}" href="#" @click.prevent="file.active || file.success ? false : onEditFileShow(file)">Edit</a>
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
<a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
<a class="dropdown-item" href="#" v-else-if="file.error && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
<a :class="{'dropdown-item': true, disabled: file.success}" href="#" v-else @click.prevent="file.success ? false : $refs.upload.update(file, {active: true})">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
</div> </div>
</div> </td>
</td> </tr>
</tr> <tr v-for="(file, index) in files" :key="file.id">
</tbody> <td>{{index}}</td>
</table> <td>
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
<span v-else>No Image</span>
</td>
<td>
<div class="filename">
{{file.name}}
</div>
<div class="progress" v-if="file.active || file.progress !== '0.00'">
<div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
</div>
</td>
<td>{{file.size | formatSize}}</td>
<td>{{file.speed | formatSize}}</td>
<td v-if="file.error">{{file.error}}</td>
<td v-else-if="file.success">success</td>
<td v-else-if="file.active">active</td>
<td v-else></td>
<td>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
Action
</button>
<div class="dropdown-menu">
<a :class="{'dropdown-item': true, disabled: file.active || file.success}" href="#" @click.prevent="file.active || file.success ? false : onEditFileShow(file)">Edit</a>
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
<a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
<a class="dropdown-item" href="#" v-else-if="file.error && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
<a :class="{'dropdown-item': true, disabled: file.success}" href="#" v-else @click.prevent="file.success ? false : $refs.upload.update(file, {active: true})">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="example-foorer"> <div class="example-foorer">
<div class="footer-status float-right"> <div class="footer-status float-right">
Drop: {{$refs.upload ? $refs.upload.drop : false}}, Drop: {{$refs.upload ? $refs.upload.drop : false}},
@ -280,7 +281,7 @@
</div> </div>
<div class="pt-5"> <div class="pt-5">
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue</a> Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue">/docs/views/examples/Full.vue</a>
</div> </div>
</div> </div>

@ -70,7 +70,7 @@
</div> </div>
</div> </div>
<div class="pt-5"> <div class="pt-5">
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Multiple.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Multiple.vue</a> Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Multiple.vue">/docs/views/examples/Multiple.vue</a>
</div> </div>
</div> </div>
</template> </template>

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<div class="pt-5"> <div class="pt-5">
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Simple.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Simple.vue</a> Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Simple.vue">/docs/views/examples/Simple.vue</a>
</div> </div>
</div> </div>
</template> </template>

@ -38,8 +38,7 @@
</div> </div>
</div> </div>
<div class="pt-5"> <div class="pt-5">
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Vuex.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Vuex.vue</a><br/> Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Vuex.vue">/docs/views/examples/Vuex.vue</a>, <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/store.js">/docs/store.js</a>
<a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/store.js">https://github.com/lian-yue/vue-upload-component/blob/master/docs/store.js</a>
</div> </div>
</div> </div>
</template> </template>

Loading…
Cancel
Save