ZXUI

<template>
  <zx-input
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @change="change"
  ></zx-input>
</template>

<script>
	export default {
      data() {
        return {
          value: ''
        }
      },
      methods: {
        change(e) {
          console.log('change', e);
        }
      }
	}
</script>

<template>
  <zx-input
    placeholder="请输入内容"
    border="surround"
    clearable
  ></zx-input>
</template>

<template>
  <zx-input
    placeholder="请输入内容"
    border="bottom"
    clearable
  ></zx-input>
</template>

<template>
	<zx-input
	    placeholder="前置图标"
	    prefixIcon="search"
	    prefixIconStyle="font-size: 22px;color: #909399"
	></zx-input>
	<zx-input
	    placeholder="后置图标"
	    suffixIcon="map-fill"
	    suffixIconStyle="color: #909399"
	></zx-input>
</template>

<script>
</script>

<template>
	<view class="zx-demo-block">
		<text class="zx-demo-block__title">前后插槽</text>
		<view class="zx-demo-block__content">
			<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用zx-input，非nvue下需使用zx-input -->
			<!-- #ifndef APP-NVUE -->
			<zx-input placeholder="前置插槽">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<zx-input placeholder="前置插槽">
			<!-- #endif -->
				<zx-text
					text="http://"
					slot="prefix"
					margin="0 3px 0 0"
					type="tips"
				></zx-text>
			<!-- #ifndef APP-NVUE -->
			</zx-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</zx-input>
			<!-- #endif -->
		</view>
		<view
			class="zx-demo-block__content"
			style="margin-top: 15px;"
		>
			<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用zx-input，非nvue下需使用zx-input -->
			<!-- #ifndef APP-NVUE -->
			<zx-input placeholder="后置插槽">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<zx-input placeholder="后置插槽">
			<!-- #endif -->
				<template slot="suffix">
					<zx-code
						ref="uCode"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取哈哈哈"
					></zx-code>
					<zx-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></zx-button>
				</template>
			<!-- #ifndef APP-NVUE -->
			</zx-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</zx-input>
			<!-- #endif -->
		</view>
	</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>