1.0.8 • Published 5 years ago
vue-picview v1.0.8
vue-picview
A Vue component to picture view
Install
通过npm install vue-picview -save
安装到相应的项目下或者yarn add vue-picview
How to use
import Picview from 'vue-picview';
import Css from 'vue-picview/dist/vue-picview.min.css'
export default {
name: 'app',
components:{
Picview
},
}
Demo
<template>
<div id="app">
<div class="a">
<Picview :imgdata="imgdata1" width="100px;" />
</div>
<div class="a">
<Picview :imgdata="imgdata2" :props="{thumbnail:'src',original:'src'}" width="200px;" />
</div>
</div>
</template>
import Picview from "vue-picview";
import Css from "vue-picview/dist/vue-picview.min.css";
export default {
name: "App",
components: {
Picview
},
data() {
return {
imgdata1: [
"https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437",
"https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437"
],
imgdata2: [
{
src:
"https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437"
},
{
src:
"https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437"
}
]
};
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Attributes
属性 | 类型 | 参数 | 说明 |
---|---|---|---|
imgdata | Array,Object | Array:'http://src','http://src';Object | |
props | Object | "thumbnail":缩略图的数据对象属性,"original":原图的数据对象属性 | 仅imgdata属性为Object可用 |
width | String | 缩略图的宽度 | |
height | String | 缩略图的高度 |