<template>
  <un-input
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @change="change"
  ></un-input>
</template>

<script setup lang="uts">
import { ref } from 'vue'

// 定义响应式数据
const value = ref('')

// 定义方法
const change = (e: string) => {
  console.log('change', e)
}
</script>
✅ Copy success!
copy

<template>
  <un-input
    placeholder="请输入内容"
    border="surround"
    clearable
  ></un-input>
</template>
✅ Copy success!
copy

<template>
  <un-input
    placeholder="请输入内容"
    border="bottom"
    clearable
  ></un-input>
</template>
✅ Copy success!
copy

<template>
	<un-input
	    placeholder="前置图标"
	    prefixIcon="search"
	    prefixIconStyle="font-size: 22px;color: #909399"
	></un-input>
	<un-input
	    placeholder="后置图标"
	    suffixIcon="map-fill"
	    suffixIconStyle="color: #909399"
	></un-input>
</template>
✅ Copy success!
copy

<template>
	<view class="u-demo-block">
		<text class="u-demo-block__title">前后插槽</text>
		<view class="u-demo-block__content">
			<un-input placeholder="前置插槽">
				<template #prefix>
					<un-text
						text="http://"
						margin="0 3px 0 0"
						type="tips"
					></un-text>
				</template>
			</un-input>
		</view>
		<view
			class="u-demo-block__content"
			style="margin-top: 15px;"
		>
			<un-input placeholder="后置插槽">
				<template #suffix>
					<un-code
						ref="uCodeRef"
						@change="codeChange"
						:seconds="20"
						change-text="X秒重新获取哈哈哈"
					></un-code>
					<un-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></un-button>
				</template>
			</un-input>
		</view>
	</view>
</template>

<script setup lang="uts">
import { ref, watch } from 'vue'

// 定义响应式数据
const tips = ref('')
const value = ref('')
const uCodeRef = ref(null)

// 监听value变化
watch(value, (newValue: string, oldValue: string) => {
  // console.log('v-model', newValue)
})

// 定义方法
const codeChange = (text: string) => {
  tips.value = text
}

const getCode = () => {
  if (uCodeRef.value != null && uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码'
    })
    setTimeout(() => {
      uni.hideLoading()
      // 这里此提示会被start()方法中的提示覆盖
      uni.showToast({title: '验证码已发送'})
      // 通知验证码组件内部开始倒计时
      uCodeRef.value!.start()
    }, 2000)
  } else {
    uni.showToast({title: '倒计时结束后再发送'})
  }
}

const change = (e: string) => {
  console.log('change', e)
}
</script>
✅ Copy success!
copy