crm-mobile/pages/login/components/loginForm.vue

<template>
  <view class="login-form">
    <view class="form-item">
      <view class="form-label">
        手机号
      </view>
      <view class="form-body">
        <image :src="$static('images/icon/username.png')" class="icon" />
        <input
          v-model="form.username"
          placeholder="请输入账号"
          placeholder-class="wk-placeholder placehoder"
          maxlength="11"
          class="input-core"
          @input="handleChange">
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">
        密码
      </view>
      <view class="form-body">
        <image :src="$static('images/icon/password.png')" class="icon" />
        <input
          v-model="form.password"
          password
          placeholder="请输入密码"
          placeholder-class="wk-placeholder placehoder"
          maxlength="20"
          class="input-core"
          @input="handleChange">
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'LoginForm',
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        form: {
          username: '',
          password: ''
        }
      }
    },
    watch: {
      value: {
        handler() {
          this.form = this.value || {username: '', password: ''}
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleChange() {
        this.$emit('input', this.form)
      }
    }
  }
</script>

<style scoped lang="scss">
	@import '../style/formItem.scss';
	
	.login-form {
		width: 100%;
		margin-top: 50rpx;
	}
</style>