# Input 输入框

<template>
  <w-input v-model="value" placeholder="请输入主诉"></w-input>
</template>
<script>
  export default {
    data () {
      return {
        value: ''
      }
    }
  }
</script>

<template>
  <w-input v-model="value" placeholder="请输入内容" disabled></w-input>
</template>
<script>
  export default {
    data () {
      return {
        value: ''
      }
    }
  }
</script>

<template>
  <w-input v-model="value" placeholder="请输入内容" clearable></w-input>
</template>
<script>
  export default {
    data () {
      return {
        value: ''
      }
    }
  }
</script>

<template>
  <section class="demo-wrapper">
    <h3 class="label">普通文本</h3>
      <w-input v-model="value1">
        <template slot="pre-append">
          <w-select v-model="value4" placeholder="请选择">
            <w-option v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </w-option>
          </w-select>
        </template>
        <template slot="suf-append"><span style="padding: 0 5px;">ml</span></template>
      </w-input>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">icon按钮</h3>
      <w-input v-model="value2" sufAppendIsButton>
        <template slot="suf-append">
          <i class="w-icon-search expand-range"></i>
        </template>
      </w-input>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">推荐输入组合</h3>
      <w-input-suggestion v-model="value3" value-key="label"
        :fetchSuggestionList="querySuggestions">
        <template slot="suf-append">
          <w-button type="primary">submit</w-button>
        </template>
      </w-input-suggestion>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        list: [{
          label: '全科诊疗科',
          value: 22
        }, {
          label: '妇产科',
          value: 18
        }, {
          label: '中医门诊',
          value: 8
        }, {
          label: '普通急诊',
          value: 10
        }, {
          label: '泌尿科',
          value: 3
        }],
      }
    },
    methods: {
      querySuggestions (query, cb) {
        let current = this.list
        let results = query ? current.filter(item => {
          return item && item.value.toLowerCase().indexOf(query.toLowerCase()) > -1
        }) : current
        cb(results)
      }
    }
  }
</script>
<style lang="scss">
// 扩展可点击区域
.expand-range {
  position: relative;
  &::after {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    content: '';
  }
}
</style>

<template>
  <w-input v-model="value" type="textarea"
    :rows="4" :maxlength="100" showCounter></w-input>
</template>
<script>
  export default {
    data () {
      return {
        value: ''
      }
    }
  }
</script>