bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsC/input/input.nvue
+202
View File
@@ -0,0 +1,202 @@
<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>