103 lines
2.9 KiB
Vue
103 lines
2.9 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-showimgs组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">多图显示</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
单图或多图显示，支持doc/pdf等文档查看。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<ciy-showimgs :src="props.src" :label="props.label" :width="props.width" :height="props.height" :type="props.type" :mode="props.mode" :whpre="props.whpre"></ciy-showimgs>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">src</view>
|
||
<view class="tip">图片地址，多个图片以~分隔。</view>
|
||
<ciy-input bb v-model="props.src"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">label</view>
|
||
<view class="tip">
|
||
左侧图片标示名称，一般4个字。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.label"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">width, height</view>
|
||
<view class="tip">
|
||
图片宽高。<br />
|
||
默认 5em
|
||
</view>
|
||
<view class="flex flex-center">
|
||
<ciy-input bb v-model="props.width" style="width:4em;"></ciy-input>
|
||
<ciy-input bb v-model="props.height" style="width:4em;"></ciy-input>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">type</view>
|
||
<view class="tip">
|
||
有间距的默认效果thumb，紧凑效果adj。<br />
|
||
默认: thumb
|
||
</view>
|
||
<ciy-radio left v-model="props.type" :range="[{id:'thumb',name:'thumb'},{id:'adj',name:'adj'}]"></ciy-radio>
|
||
<view class="hr"></view>
|
||
<view class="prp">mode</view>
|
||
<view class="tip">
|
||
图片显示方式。<br />
|
||
默认: aspectFill
|
||
</view>
|
||
<ciy-radio left v-model="props.mode" :range="[{id:'aspectFill',name:'按比例尽量显示'}
|
||
,{id:'aspectFit',name:'按比例全显示'}
|
||
,{id:'widthFix',name:'宽度自适应'}
|
||
,{id:'heightFix',name:'高度自适应'}
|
||
,{id:'scaleToFill',name:'失真全显示'}
|
||
]"></ciy-radio>
|
||
<view class="hr"></view>
|
||
<view class="prp">whpre</view>
|
||
<view class="tip">
|
||
缩略图尺寸，?开始px。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.whpre" style="width:6em;"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
props: {
|
||
src: '/img/face.png~/img/maskcamera.png',
|
||
width: '5em',
|
||
height: '5em',
|
||
type: 'thumb',
|
||
mode: 'aspectFill',
|
||
whpre: '?50',
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
}
|
||
}
|
||
</script> |