Input 输入框

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Input输入框">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<view class="demo-content">
				<zk-input v-model="value1" placeholder="请输入内容" />
			</view>
		</zk-theme>

		<!-- 自定义样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义样式" />
			<view class="demo-content">
				<zk-input v-model="value2" placeholder="圆角输入框" shape="circle" border="surround" />
				<view style="height: 20rpx;"></view>
				<zk-input v-model="value3" placeholder="底部边框" border="bottom" />
			</view>
		</zk-theme>

		<!-- 带图标 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="带图标的输入框" />
			<view class="demo-content">
				<zk-input v-model="value4" placeholder="搜索关键词" prefix-icon="search-line" border="surround"
					shape="circle" />
				<view style="height: 20rpx;"></view>
				<zk-input v-model="value5" placeholder="选择日期" suffix-icon="calendar-check-line" border="surround" />
			</view>
		</zk-theme>

		<!-- 可清除内容 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="可清除内容" />
			<view class="demo-content">
				<zk-input v-model="value6" placeholder="输入后显示清除图标" clearable border="surround" />
			</view>
		</zk-theme>

		<!-- 密码输入框 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="密码输入框" />
			<view class="demo-content">
				<zk-input v-model="value7" type="password" placeholder="请输入密码" border="surround"
					:show-password="showPassword">
					<template #suffix>
						<view class="password-icon" @tap.stop="togglePassword">
							<zk-icon :name="showPassword ? 'eye-line' : 'eye-off-line'" :size="36"
								:color="themeColors.textSecondary" />
						</view>
					</template>
				</zk-input>
			</view>
		</zk-theme>

		<!-- 禁用状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" />
			<view class="demo-content">
				<zk-input v-model="value8" placeholder="禁用状态" disabled border="surround" />
			</view>
		</zk-theme>

		<!-- 只读状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="只读状态" />
			<view class="demo-content">
				<zk-input v-model="value9" placeholder="只读状态" readonly border="surround" />
			</view>
		</zk-theme>

		<!-- 最大长度 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="最大长度" />
			<view class="demo-content">
				<zk-input v-model="value10" placeholder="最多输入10个字符" :maxlength="10" border="surround" show-word-limit />
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				value5: '',
				value6: '',
				value7: '',
				value8: '禁用状态',
				value9: '只读状态',
				value10: '',
				showPassword: true
			}
		},

		computed: {
			themeColors() {
				return uni.$store.state['zk-global'].theme.current
			}
		},

		methods: {
			togglePassword() {
				this.showPassword = !this.showPassword
			}
		}
	}
</script>

<style lang="scss">
	.demo-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.password-icon {
		padding: 0 20rpx;
	}
</style>