SOURCE

var delayHiddenInput = {
	template: '<div class="delay-hidden-input"><i-input v-model="inputValue" @on-change="hideValue" placeholder="延迟500ms隐藏..."></i-input><p>输入的真实值：{{realValue}}</p></div>',
  props: ['delay', 'stuntman'],
  data () {
  	return {
    	inputValue: '',
      realValue: '',
      delayTimer: null
    }
  },
  methods: {
  	hideValue (e) {
      if (e.data) {
        if (e.target.value.length <= this.realValue.length) {
          this.realValue = this.realValue.substring(0, e.target.value.length - 1) + e.data
        } else {
          this.realValue += e.data
        }
      } else {
        this.realValue = this.realValue.substring(0, e.target.value.length)
      }
      this.handlechange(this.realValue)
      clearTimeout(this.delayTimer)
      this.delayTimer = setTimeout(() => {
        this.inputValue = this.inputValue.replace(/[\s\S]/g, this.stuntman)
      }, this.delay)
    },
    handlechange (v) {
      this.$emit('handlechange', v)
    }
  }
}
var Main = {
	components: {
  	delayHiddenInput: delayHiddenInput
  },
  data () {
    return {
    }
  },
  methods: {
    getValue (v) {
      console.log('获取的真实值', v)
    }
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <h3>#prop</h3>
  <ul>
    <li>1. delay[string]: 延迟的毫秒数</li>
    <li>2. stuntman[string]: 替身字符</li>
    <li>3. handlechange[function]: 获取真实输入值回调方法</li>
  </ul>
  <delay-hidden-input :delay="100" stuntman="❤" @handlechange="getValue"/>
</div>

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}