代码拉取完成,页面将自动刷新
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础使用</text>
<view class="u-demo-block__content">
<u--input
placeholder="请输入内容"
border="surround"
v-model="value"
@change="change"
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">可清空内容</text>
<view class="u-demo-block__content">
<u--input
placeholder="请输入内容"
border="surround"
clearable
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">数字键盘</text>
<view class="u-demo-block__content">
<u--input
placeholder="请输入内容"
border="surround"
type="number"
clearable
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">密码类型</text>
<view class="u-demo-block__content">
<u--input
placeholder="请输入内容"
border="surround"
password
clearable
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">显示下划线</text>
<view class="u-demo-block__content">
<u--input
placeholder="请输入内容"
border="bottom"
clearable
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">禁用状态</text>
<view class="u-demo-block__content">
<u--input
placeholder="禁用状态"
border="surround"
disabled
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">圆形</text>
<view class="u-demo-block__content">
<u--input
placeholder="请输入内容"
border="surround"
shape="circle"
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">前后图标</text>
<view class="u-demo-block__content">
<u--input
placeholder="前置图标"
prefixIcon="search"
prefixIconStyle="font-size: 22px;color: #909399"
></u--input>
</view>
<view
class="u-demo-block__content"
style="margin-top: 15px;"
>
<u--input
placeholder="后置图标"
suffixIcon="map-fill"
suffixIconStyle="color: #909399"
></u--input>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">前后插槽</text>
<view class="u-demo-block__content">
<!-- 注意:由于兼容性差异,如果需要使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->
<!-- #ifndef APP-NVUE -->
<u-input placeholder="前置插槽">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<u--input placeholder="前置插槽">
<!-- #endif -->
<u--text
text="http://"
slot="prefix"
margin="0 3px 0 0"
type="tips"
></u--text>
<!-- #ifndef APP-NVUE -->
</u-input>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</u--input>
<!-- #endif -->
</view>
<view
class="u-demo-block__content"
style="margin-top: 15px;"
>
<!-- 注意:由于兼容性差异,如果需要使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->
<!-- #ifndef APP-NVUE -->
<u-input placeholder="后置插槽">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<u--input placeholder="后置插槽">
<!-- #endif -->
<template slot="suffix">
<u-code
ref="uCode"
@change="codeChange"
seconds="20"
changeText="X秒重新获取哈哈哈"
></u-code>
<u-button
@tap="getCode"
:text="tips"
type="success"
size="mini"
></u-button>
</template>
<!-- #ifndef APP-NVUE -->
</u-input>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</u--input>
<!-- #endif -->
</view>
</view>
<u-gap
bgColor="#fff"
height="50"
></u-gap>
</view>
</template>
<script>
export default {
data() {
return {
tips: '',
value: ''
}
},
watch: {
value(newValue, oldValue) {
// console.log('v-model', newValue);
}
},
methods: {
codeChange(text) {
this.tips = text;
},
getCode() {
if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
uni.$u.toast('倒计时结束后再发送');
}
},
change(e) {
console.log('change', e);
}
}
}
</script>
<style lang="scss">
</style>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。