<template>
	<ciy-header ref="header" title="ciy-textarea组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">多行文本框</view>
			<view class="content">
				相比传统textarea组件，可在change直接写数据变化的响应代码，无需为初始化单独处理。。<br />
				自定义样式，支持字数统计、@扩展。<br />
			</view>
		</view>
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>原生组件</label>
				<view style="text-align: left;">
					<textarea name="ori"></textarea>
				</view>
			</view>
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-textarea name="ciy1" v-model="formvalue" @change="chglog('change', $event)" @linechange="chglog('linechange', $event)" @focus="chglog('focus', $event)" @blur="chglog('blur', $event)"></ciy-textarea>
				</view>
			</view>
			<view class="ciy-form">
				<label>value绑定</label>
				<view>
					<ciy-textarea placeholder="请输入" name="ciy2" :value="formvalue" @change="chglog('change', $event)"></ciy-textarea>
				</view>
			</view>
			<view class="ciy-form">
				<label>自定义样式</label>
				<view>
					<ciy-textarea bb style="font-size:2em;color:#cc0000;text-align:center;" :value="formvalue" name="ciy3" @change="chglog('change', $event)"></ciy-textarea>
				</view>
			</view>
			<view class="ciy-form">
				<label>传统效果</label>
				<view>
					<ciy-textarea bb showtotal name="ciy4" :value="formvalue" @change="chglog('change', $event)"></ciy-textarea>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-textarea bb disabled name="ciy5" :value="formvalue" @change="chglog('change', $event)"></ciy-textarea>
				</view>
			</view>
			<view class="ciy-form v">
				<label>垂直输入</label>
				<view>
					<ciy-textarea name="ciy6" :value="formvalue" @change="chglog('change', $event)"></ciy-textarea>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue=2">改变值</button>
			</view>
			<view class="ciy-card formcard" v-if="formdata">
				<view class="content">
					<view v-html="tobr(formdata, true)" class="formdata"></view>
				</view>
			</view>
		</form>

		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">name,value,v-model</view>
				<view class="hr"></view>
				<view class="prp">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">initevent</view>
				<view class="tip">
					是否产生初始事件。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">ciystyle</view>
				<view class="tip">
					针对微信小程序等问题，传递style。
				</view>
				<view class="hr"></view>
				<view class="prp">placeholder</view>
				<view class="tip">
					占位文字。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">bb</view>
				<view class="tip">
					是否传统文本框样式。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">maxlength</view>
				<view class="tip">
					最大字符数。<br />
					默认 -1 不限制
				</view>
				<view class="hr"></view>
				<view class="prp">fixed</view>
				<view class="tip">
					绝对定位修复。<br />
					默认 false 不修复
				</view>
			</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, update:modelValue</view>
				<view class="tip">
					数值变更事件<br />
					from: init,input<br />
				</view>
				<view class="hr"></view>
				<view class="evt">@focus, blur</view>
				<view class="tip">
					聚焦、离开焦点事件<br />
				</view>
				<view class="hr"></view>
				<view class="evt">@linechange</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>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				formvalue: ''
			}
		},
		onLoad() {},
		methods: {}
	}
</script>