yt-Windows 使用说明

点此跳转 DCloud 插件市场

〇、简介

• 这是杭州云童智能科技有限公司使用的 H5 端、小程序端的弹窗组件

一、使用说明

• 点击DCloud 插件市场中右侧的 HBuilderX 导入插件

• 引用组件

<yt-Windows title="你好" :show-input_1="true"" ref="demoWindow"></yt-Windows>

• 触发组件

testFunction () {
	this.$refs.demoWindow.show();
}

• Demo体验 ：微信/支付宝小程序搜索：云童健康

• 如果这个插件帮到了您的项目，请麻烦来给个评分谢谢。提出宝贵的意见当然更好！

• 本插件的设计归杭州云童智能科技有限公司所有

二、参数说明

• props

参数名	类型	说明	必填	默认值
confirm	String	确定按钮按下后的点击事件回调的方法 ，点击后会默认执行hide事件	否	null
cencel	String	取消按钮按下后的点击事件回调的方法	否	null
showCencel	Function	是否展示取消按钮	否	false
title	String	弹窗的标题文字	否	标题
showInput_1	Function	弹窗组件要传出的输入值1	否	""
showInput_2	Function	弹窗组件要传出的输入值2	否	""
confirmText	String	确认按钮文字	否	确定
cencelText	String	取消按钮文字	否	取消
placehoderText_1	String	输入框未输入文字时的提示文字	否	请输入数据1
placehoderText_2	String	输入框未输入文字时的提示文字	否	请输入数据2

三、事件说明

• events

事件名称	说明	传参	说明	回调参数
show	显示弹窗	/	无	见其他说明[1]
hide	显示弹窗	Boolean	传true则清空input中的值，否则不清空	无

四、其他说明

• [1]：若showInput_1为true则返回String，若showInput_1和showInput_2都为true则返回Array，否则将返回null

五、示例代码

<template>
	<view class="content">
		<yt-Windows title="你好云童" confirm="windowConfirm" cencel="windowCencel" :placehoderText_1="testPlacehoder" :show-input_1="true"
			:show-input_2="true" ref="demoWindow">
			如下内容请如实填写
		</yt-Windows>
		<text @click="handleShowWindow" style="margin-top: 30%;">点击此处显示弹窗</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testPlacehoder: ""
			}
		},
		methods: {
			// 点击按钮后显示弹窗
			handleShowWindow() {
				this.$refs.demoWindow.show();
			},
			// 确认后组件回调的方法
			windowConfirm(val) {
				// 可自定义 placehoder 文案
				this.testPlacehoder = "变更placehoder";
				console.log("父组件确认", val, this.aa);
			},
			windowCencel(){
				console.log("父组件取消");
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>