VAN-UI

# 输入框 - Input

# 示例

# 基础用法

点击查看源码 
<template>
  <div class="container">
    <van-input  placeholder="请输入内容" v-model="content"></van-input>
  </div>
</template>
<script>
import "./fonts/font.scss";
export default {
  data(){
    return{
      content:'',
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 禁用状态

点击查看源码 
<template>
  <div class="container">
     <van-input disabled placeholder="请输入内容" v-model="content">
     </van-input>
  </div>
</template>
<script>
import "./fonts/font.scss";
export default {
  data(){
    return{
      content:'',
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 可清空

点击查看源码 
<template>
  <div class="container">
    <van-input clearable  placeholder="点击x删除内容" v-model="username">
    </van-input>
  </div>
</template>
<script>
import "./fonts/font.scss";
export default {
  data(){
    return{
      username:'',
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 密码框

点击查看源码 
<template>
  <div class="container">
    <van-input showPassword placeholder="请输入密码" v-model="password">
    </van-input>
  </div>
</template>
<script>
import "./fonts/font.scss";
export default {
  data(){
    return{
      password:'123456',
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# API

参数 说明
disabled 是否禁用
clearable 是否可清空文本框内容
showPassword 是否切换密码显示隐藏
type 文本框类型：password,text

← 按钮 - Switch →