<template>
   <div :id="id">
      <ul>
         <li>
            <span>原生方式(双向绑定测试) </span>
            <input type="text"  v-model="input">
         </li>
         <li>
            <span>默认方式 </span>
            <poi-input class="disib" @change="changeInput" v-model="input" placeholder="请输入内容Test"></poi-input>
         </li>
         <li>
            <span>默认方式-不可输入 </span>
            <poi-input class="disib" v-model="input1" placeholder="请输入内容" disabled></poi-input>
         </li>
         <li>
            <span>可清空 </span>
            <poi-input class="disib" v-model="input" placeholder="可清空内容" clearable></poi-input>
         </li>
         <li>
            <span>尺寸 </span>
            <poi-input class="disib" v-model="input1" size="medium"></poi-input>
            <poi-input class="disib" v-model="input1" placeholder="请输入内容" size="small"></poi-input>
            <poi-input class="disib" v-model="input1" placeholder="请输入内容" size="mini"></poi-input>
         </li>
         <li>
            <div>
            <span>密码框1 </span>
            <poi-input class="disib" v-model="input" placeholder="请输入密码" password></poi-input>
            </div>
            <div class="mt10">
               <span>密码框2 </span>
               <poi-input class="disib" v-model="input1" placeholder="请输入密码" password></poi-input>
            </div>
         </li>
         <li><p style="margin-top:30px">============================</p><p>icon 图片需在class上加 'iconfont'，才能生效</p>
            <div>
               <span>带icon的输入框(属性方式) </span>
               <poi-input class="disib" v-model="input1" placeholder="请输入内容" suffix-icon="poi-icon-shujuji"></poi-input>
               <poi-input class="disib" v-model="input1" placeholder="请输入内容" prefix-icon="poi-icon-chaxun"></poi-input>
            </div>            
            <div class="mt10">
               <span>带icon的输入框(slot 方式) </span>
               <poi-input class="disib" v-model="input1" placeholder="请输入内容">
                  <i slot="prefix" class="iconfont poi-input__icon poi-icon-chaxun"></i>
               </poi-input>
               <poi-input class="disib" v-model="input1" placeholder="请输入内容">
                  <i slot="suffix" class="iconfont poi-input__icon poi-icon-shujuji"></i>
               </poi-input>           
            </div>
         </li>
         <li>
            <span>文本域 </span>
            <poi-input class="disib" type="textarea" v-model="textarea" placeholder="请输入内容" :rows="4"></poi-input>
            
            <div class="mt10">
               <span>文本域(双向绑定测试) </span>
               <input v-model="textarea">
            </div>
         </li>
         <li>
            <span>输入长度限制 </span>
            <poi-input class="disib" v-model="textarea" maxlength="10" placeholder="请输入内容" show-word-limit></poi-input>
            <poi-input class="disib" type="textarea" v-model="textarea1" maxlength="30" :autosize="{ minRows: 5, maxRows: 6}" placeholder="请输入内容" show-word-limit></poi-input>
         </li>
      </ul>
      
   </div>
</template>
<script>
export default {
   name: 'form_input',
   data(){
      return{
         id:'inputTest',

         input:'',
         input1:"",
         textarea:"",
         textarea1:"",
      }
   },   
   methods:{
		changeInput(){
			// this.com.debounce(false,5000, () => {
			// 	console.log('防抖-立即执行-5s间隔')
			// });
		}
   },
}
</script>

<style scoped>
#inputTest{
}

#inputTest .poi-input {
    width: 180px;
}
#inputTest .poi-textarea {
    width: 414px;
}

.disib{
   display: inline-block;
}
ul>li{
   margin-bottom: 20px;
}
.mt10{
   margin-top:10px;
}
</style>
