vue-img-loader
Version:
this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded
105 lines (102 loc) • 3.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueImgLoader Demo</title>
<script src="//qiniu.jackyang.me/fm/0.3/fm.min.js"></script>
<script>FM.init({ projectId: '59842b5d9a85353d3ce52c82' })</script>
<style>
html, body {
font-family: arial;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .3s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
.my-preview {
position: relative;
width: 100px;
text-align: center;
background-color: black;
color: white;
margin: 0 auto;
top: 30%;
}
button {
display: block;
}
</style>
</head>
<body>
<div id="mountNode">
<p>This is vue-img-loader demo. Please set Network as Good 3G in devTools and refresh the page.</p>
<p>preview (cover center)</p>
<button @click="changeImage('cover')">CHANGE IMAGE</button>
<vue-img-loader :src="'assets/images/img_0' + (coverIndex + 1) + '.jpg?cover'"
:preview="'assets/images/img_0' + (coverIndex + 1) + '_preview.jpg'"
:blur-preview="false"></vue-img-loader>
<p>preview (contain center)</p>
<button @click="changeImage('contain')">CHANGE IMAGE</button>
<vue-img-loader :src="'assets/images/img_0' + (containIndex + 1) + '.jpg?contain'"
:preview="'assets/images/img_0' + (containIndex + 1) + '_preview.jpg'"
:blur-preview="false"
center-type="contain"></vue-img-loader>
<p>blur preview</p>
<button @click="changeImage('blur')">CHANGE IMAGE</button>
<vue-img-loader :src="'assets/images/img_0' + (blurIndex + 1) + '.jpg?blur'"
:preview="'assets/images/img_0' + (blurIndex + 1) + '_preview.jpg'"></vue-img-loader>
<p>transition</p>
<button @click="changeImage('transition')">CHANGE IMAGE</button>
<vue-img-loader :src="'assets/images/img_0' + (transitionIndex + 1) + '.jpg?transition'"
:preview="'assets/images/img_0' + (transitionIndex + 1) + '_preview.jpg'"
transition="fade"></vue-img-loader>
<p>background color</p>
<button @click="changeImage('background')">CHANGE IMAGE</button>
<vue-img-loader :src="'assets/images/img_0' + (backgroundIndex + 1) + '.jpg?background'"
background-color="lightgrey"></vue-img-loader>
<p>customize preview content</p>
<button @click="changeImage('customize')">CHANGE IMAGE</button>
<vue-img-loader :src="'assets/images/img_0' + (customizeIndex + 1) + '.jpg?customize'">
<div class="my-preview">loading...</div>
</vue-img-loader>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
<script src="vue-img-loader.min.js"></script>
<script>
VueImgLoader.config.width = 400
VueImgLoader.config.height = 400
new Vue({
el: '#mountNode',
data: {
coverIndex: 0,
containIndex: 0,
blurIndex: 0,
transitionIndex: 0,
backgroundIndex: 0,
customizeIndex: 0,
images: [
'assets/images/img_01', // img_01_preview.jpg
'assets/images/img_02',
'assets/images/img_03'
]
},
components: {
'vue-img-loader': VueImgLoader
},
methods: {
changeImage: function (type) {
this[type + 'Index'] = (this[type + 'Index'] + 1) % 3
},
getImage: function (type) {
return this.images[this[type + 'Index']] + '.jpg?' + type
},
getPreview: function (type) {
return this.images[this[type + 'Index']] + '_preview.jpg?' + type
}
}
})
</script>
</body>
</html>