input | wl-element

# 基础用法

<template>
  <wl-input v-model="text" @change="handleChange"></wl-input>
</template>

<script>
export default {
  name: 'input-demo-01',
  data () {
    return {
      text: ''
    }
  },
  methods: {
    handleChange (val) {
      console.log(val)
    }
  }
}
</script>

支持el-input的其他任何属性

# icon

与 el-input 一致

属性方式：

slot 方式：

<template>
  <div class="demo-input02-suffix">
    <div class="demo-input-suffix">
      属性方式：
      <wl-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="input1">
      </wl-input>
      <wl-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2">
      </wl-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式：
      <el-input
        placeholder="请选择日期"
        v-model="input3">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <wl-input
        placeholder="请输入内容"
        v-model="input4">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </wl-input>
    </div>
  </div>
</template>
<script>
export default {
  name: 'input-demo-02',
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>
<style >
  .demo-input02-suffix .el-input{
    width:210px;
    margin-right: 15px;
    margin-bottom: 10px;
  }
</style>

# 金额输入

后端一般传入前端的值为分前端需做一些金钱转换传给后端分为单位

元

传入后台金额：1231分

实际金额：12.31元

<template>
  <div>
    <wl-input cent v-model="amt" @change="change">
      <template #append>元</template>
    </wl-input>
    <p>传入后台金额：{{ amt }}分</p>
    <p>实际金额：{{ realMoney }}元</p>
  </div>
</template>

<script>
export default {
  name: 'input-demo-03',
  data () {
    return {
      amt: '1231',
      realMoney: '12.31'
    }
  },
  methods: {
    change (val) {
      this.realMoney = val
    }
  }
}
</script>

# textarea

与el-input渲染textarea一致,添加type属性即可

<template>
  <wl-input v-model="textarea" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></wl-input>
</template>

<script>
export default {
  name: 'input-demo-04',
  data () {
    return {
      textarea: ''
    }
  }
}
</script>

<style scoped>

</style>

# 复合型输入框

与 el-input 一致

Http://

.com

<template>
  <div>
    <div>
      <wl-input placeholder="请输入内容" v-model="input1">
        <template slot="prepend">Http://</template>
      </wl-input>
    </div>
    <div style="margin-top: 15px;">
      <wl-input placeholder="请输入内容" v-model="input2">
        <template slot="append">.com</template>
      </wl-input>
    </div>
    <div style="margin-top: 15px;">
      <wl-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <template slot="prepend">
          <el-select v-model="select" placeholder="请选择" style="width:100px">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
        </template>
        <wl-button slot="append" icon="el-icon-search"></wl-button>
      </wl-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'input-demo-05',
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: ''
    }
  }
}
</script>

<style scoped>

</style>

# 值转化

有时会需要需要转化输入值的情况,比如用户输入小写,将其转化为大写.此例展示了将用户输入转化成大写,配置tranfer属性即可

<template>
  <div>
    <wl-input v-model="input1" :transfer="upperCase"></wl-input>
  </div>
</template>

<script>
export default {
  name: 'input-demo-06',
  data () {
    return {
      input1: '',
      input2: ''
    }
  },
  methods: {
    upperCase (val) {
      return val.toUpperCase()
    }
  }
}
</script>

<style scoped>

</style>

除以上列出的demo外,其他el-input支持的属性均保持一致

# Attributes

参数	说明	类型	可选值	默认值
cent	金额输入元,返回分	boolean	—	false
transfer	值转化	function(val)	—	-

← button select →