97 Star 951 Fork 264

umicro / uView2.0

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
input.nvue 4.92 KB
一键复制 编辑 原始数据 按行查看 历史
<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>
JavaScript
1
https://gitee.com/umicro/uView2.0.git
git@gitee.com:umicro/uView2.0.git
umicro
uView2.0
uView2.0
master

搜索帮助

14c37bed 8189591 565d56ea 8189591