<template>
	<ciy-header ref="header" title="ciy-textmore组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">内容部分隐藏/点击显示</view>
			<view class="content">
				<view class="tip">
					只显示内容头部部分，点击底部全部显示。<br />
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">效果演示</view>
			<view class="content">
				<ciy-textmore :height="props.height" :maskbg="props.maskbg" @change="chglog('change', $event)">
					<view v-for="n in 100" :key="n"> 占位 {{n}}</view>
				</ciy-textmore>
			</view>
		</view>

		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">height</view>
				<view class="tip">
					高度设定。<br />
					默认: 10em
				</view>
				<ciy-input bb v-model="props.height"></ciy-input>
				<view class="hr"></view>
				<view class="prp">maskbg</view>
				<view class="tip">
					底部半透明过渡背景色，格式#rgba。<br />
				</view>
				<ciy-input bb v-model="props.maskbg"></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 class="evt">@change</view>
				<view class="tip">
					点击更多事件<br />
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</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: {
					height: '10em',
					maskbg: 'var(--bg2)'
				}
			}
		},
		onLoad() {},
		methods: {}
	}
</script>