cloud-ui.vusion
Version:
Vusion Cloud UI
58 lines (54 loc) • 1.5 kB
Markdown
### 基本用法
#### 灯箱包含单个元素
``` vue
<template>
<div>
<u-lightbox :visible.sync="visible" :closeButton="true">
<u-lightbox-item title="图片预览"><img :src="src" /></u-lightbox-item>
</u-lightbox>
<u-linear-layout>
<u-button @click="visible = true">Open Lightbox</u-button>
</u-linear-layout>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
src: require('@/components/u-lightbox.vue/assets/2.jpg'),
};
},
};
</script>
```
#### 灯箱包含多个元素
``` vue
<template>
<div>
<u-lightbox :visible.sync="visible" :value="showItem" animation="fade">
<u-lightbox-item v-for="(image, index) in images" :key="index" :value="index" :title="image.title"><img :src="image.src" /></u-lightbox-item>
</u-lightbox>
<u-linear-layout>
<img style="height: 60px;width:60px" v-for="(image, index) in images" :src="image.src" @click="showLightbox(index)"/>
</u-linear-layout>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
images: [{src:require('@/components/u-lightbox.vue/assets/1.jpg'), title:'图片1'}, {src:require('@/components/u-lightbox.vue/assets/2.jpg'), title: '图片2'}],
showItem: 0,
};
},
methods: {
showLightbox(index) {
this.visible = true;
this.showItem = index;
},
},
};
</script>
```