<template>
	<ciy-header ref="header" title="ciy-toast组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">提示组件</view>
			<view class="content">
				一般无需在页面中添加html。<br />
				通过vite.config.js自动在每个页面添加。<br />
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				<view class="fun">(await) this.toast</view>
				<view class="tip">
					调用本弹窗组件。<br/>
					录入模式，返回json。<br/>
					按钮模式，返回按钮的btn文本。<br/>
					</view>
				<button class="btn sm" @tap="tstoast(1)">多行</button>
				<button class="btn sm" @tap="tstoast(2)">HTML</button>
				<button class="btn sm" @tap="tstoast(3)">5秒关闭</button>
				<button class="btn sm" @tap="tstoast(4)">手动关闭</button>
				<view v-html="tobr(formdata, true)" class="formdata"></view>
				<view class="hr"></view>
				<view class="fun">(await) app.toast</view>
				<view class="tip">调用系统showToast，一般在页面可能没准备好，但需要提醒用户时调用。</view>
				<button class="btn sm" @tap="apptoast">调用</button>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">Open方法</view>
			<view class="content">
				<view class="prp">content</view>
				<view class="tip">
					文本内容，支持 "|" 换行，支持html。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">sec</view>
				<view class="tip">
					延迟n秒自动关闭，如果是0则不自动关闭。<br />
					默认 2
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				无
			</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 {
				alc: '',
				aln: ''
			}
		},
		onLoad() {},
		methods: {
			async tstoast(type) {
				if (type == 1) {
					this.toast('提示内容\n第二行');
				}
				if (type == 2) {
					this.toast('<b>加粗</b><div style="text-align:center;color:#ffff00;">自定义html</div>');
				}
				if (type == 3) {
					this.toast({
						content: '提示内容\n第二行\n5秒关闭',
						sec: 5
					});
				}
				if (type == 4) {
					this.toast({
						content: '提示内容\n第二行\n手动点击关闭',
						sec: 0
					});
				}
			},
			apptoast() {
				var app = getApp();
				app.toast('提示内容\n第二行');
			}
		}
	}
</script>

<style>
</style>
