🔨 weView

Input 输入框

通过键盘输入内容

基础样式

 输入的内容：
<template>
  <w-input v-model="inputText1" placeholder="请输入..." />&emsp;输入的内容：{{ inputText1 }}
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputText1 = ref('');

    return {
      inputText1
    }
  },
}
</script>

禁用状态 

<template>
  <w-input v-model="inputText1" placeholder="请输入..." disabled/>
</template>
<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputText1 = ref('');

    return {
      inputText1
    }
  },
}
</script>

可清空 

<template>
 <w-input v-model="inputText2" placeholder="请输入..." clearable/>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputText2 = ref('');

    return {
      inputText2
    }
  },
}
</script>

密码框 

<template>
  <form>
    <w-input v-model="inputText3" placeholder="请输入密码" show-password/>
  </form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputText3 = ref('');

    return {
      inputText3
    }
  },
}
</script>

输入长度限制

10/10
<template>
   <w-input v-model="inputText4" placeholder="请输入..." :maxlength="10"/>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputText4 = ref('');

    return {
      inputText4
    }
  },
}
</script>

设置尺寸

使用width和fontSize设置输入框宽度和字体大小，单位可以是任意CSS单位，默认值分别为 180px 和 12px
<template>
  <w-input v-model="inputText" placeholder="请输入..." width="14rem" font-size="16px"/>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputText = ref('');

    return {
      inputText
    }
  },
}
</script>

边框颜色激活 

<template>
  <w-input v-model="inputText" placeholder="请输入..." activeColor="#490ca5"/>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputText = ref('');

    return {
      inputText
    }
  },
}
</script>

属性

属性类型可选值默认值含义
modelValuestring-''绑定值
placeholderstring-'请输入...'输入框占位文本
disabledbooleantrue\falsefalse禁用
clearablebooleantrue\falsefalse是否可清空
show-passwordbooleantrue\falsefalse是否显示切换密码图标
maxlengthnumber--最大输入长度
widthstring-180px输入框width属性
font-sizestring-12px字体大小
active-colorstring(16进制颜色)-#000聚焦时的边框颜色