<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>