123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <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>
|