input.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="nvue-page-root">
      <page-head :title="title"></page-head>
      <view class="uni-common-mt">
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title">可自动聚焦的 input</text></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              :focus="true"
              placeholder="自动获得焦点"
              ref="input"
            />
          </view>
        </view>
        <!-- #ifdef APP-PLUS -->
        <!-- <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" />
                </view>
            </view> -->
        <!-- #endif -->
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title"
              >键盘右下角按钮显示为搜索</text
            ></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              confirmType="search"
              placeholder="键盘右下角按钮显示为搜索"
            />
          </view>
        </view>
        <!-- #ifndef H5 -->
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title"
              >键盘右下角按钮显示为发送</text
            ></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              confirmType="send"
              placeholder="键盘右下角按钮显示为发送"
            />
          </view>
        </view>
        <!-- #endif -->
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title"
              >控制最大输入长度的 input</text
            ></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              :maxlength="10"
              placeholder="最大输入长度为10"
            />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title"
              >实时获取输入值：{{ inputValue }}</text
            ></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              @input="onKeyInput"
              placeholder="输入同步到view中"
            />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title">控制输入的 input</text></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              @input="replaceInput"
              :value="changeValue"
              placeholder="连续的两个1会变成2"
            />
          </view>
        </view>
        <!-- #ifndef MP-BAIDU -->
        <!-- <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
                </view>
            </view> -->
        <!-- #endif -->
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title">数字输入的 input</text></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              type="number"
              placeholder="这是一个数字输入框"
            />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title">密码输入的 input</text></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              :password="true"
              type="text"
              placeholder="这是一个密码输入框"
            />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title">带小数点的 input</text></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              type="digit"
              placeholder="带小数点的数字键盘"
            />
          </view>
        </view>
        <!-- <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view>
            </view> -->
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title"
              >控制占位符颜色的 input</text
            ></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              placeholder-style="color:#F76260"
              placeholder="占位符字体是红色的"
            />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title">带清除按钮的输入框</text></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              placeholder="带清除按钮的输入框"
              :value="inputClearValue"
              @input="clearInput"
            />
            <image
              class="uni-icon"
              src="/static/icons/clear.png"
              v-if="showClearIcon"
              @click="clearIcon"
            ></image>
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title"
            ><text class="uni-form-item__title">可查看密码的输入框</text></view
          >
          <view class="uni-input-wrapper">
            <input
              class="uni-input"
              placeholder="请输入密码"
              :password="showPassword"
            />
            <image
              class="uni-icon"
              :src="
                !showPassword
                  ? '/static/icons/eye-active.png'
                  : '/static/icons/eye.png'
              "
              @click="changePassword"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="ts">
export default {
  data() {
    return {
      title: 'input',
      focus: false,
      inputValue: '',
      showClearIcon: false,
      inputClearValue: '',
      changeValue: '',
      showPassword: true,
    }
  },
  onReady() {
    // TODO auto focus
    // (this.$refs['input'] as INode).focus();
  },
  methods: {
    onKeyInput: function (event: InputEvent) {
      this.inputValue = event.detail.value
    },
    replaceInput: function (event: InputEvent) {
      var value = event.detail.value
      if (value == '11') {
        this.changeValue = '2'
      }
    },
    clearInput: function (event: InputEvent) {
      this.inputClearValue = event.detail.value
      if (event.detail.value.length > 0) {
        this.showClearIcon = true
      } else {
        this.showClearIcon = false
      }
    },
    clearIcon: function () {
      this.inputClearValue = ''
      this.showClearIcon = false
    },
    changePassword: function () {
      this.showPassword = !this.showPassword
    },
    // hideKeyboard: function(event: InputEvent) {
    //     if (event.detail.value === '123') {
    //         uni.hideKeyboard();
    //     }
    // },
    // onFocus() {
    //     this.$mp.page.$getAppWebview().setStyle({
    //         softinputNavBar: 'none'
    //     })
    // },
    // onBlur() {
    //     this.$mp.page.$getAppWebview().setStyle({
    //         softinputNavBar: 'auto'
    //     })
    // }
  },
}
</script>

<style scoped>
.nvue-page-root {
  background-color: #f8f8f8;
  padding-bottom: 20px;
}

.title {
  padding: 5px 13px;
}

.uni-form-item__title {
  font-size: 16px;
  line-height: 24px;
}

.uni-input-wrapper {
  display: flex;
  padding: 8px 13px;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #ffffff;
}

.uni-input {
  height: 28px;
  line-height: 28px;
  font-size: 15px;
  padding: 0px;
  flex: 1;
  background-color: #ffffff;
}

.uni-icon {
  width: 24px;
  height: 24px;
}
</style>