vue--vant组件库field输入框

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

field 输入框

安装vant UI框架：

cnpm install vant –-save-dev

导入组件-在main.js里：

import Vant from \'vant\';
import\'vant/lib/vant-css/index.css\';
Vue.use(\'Vant\')

Field输入框是一个高频组件

完全支持Input 标签所有的原生属性，比如 maxlength、placeholder、autofocus 等

准备工作：

创建一个页面: Field.vue

在router.js里配置Field页面的路由

{
  path: \'/field\',
  name: \'field\',
  component: () => import(\'./views/Field.vue\')
}

在index.vue里添加一项

代码演示Field输入框：

基础用法：

普通的一个小示例，只有一个label标签，和一个输入框：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="请输入用户名" 
         label="用户名" 
       />
</van-cell-group>

我们还可以给他们增加些修饰，比如在label前面加个icon，在输入框尾部加个icon，还可以点击右侧的icon做一个交互

通常项目里点击icon会弹出一个弹出框，这里我们暂且就toast一个轻提示：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="请输入用户名" 
         label="用户名" 
         left-icon="contact"
         icon="question"
         @click-icon="$toast(\'question\')"
       />
</van-cell-group>

错误提示一共有两种，一种是在输入框里显示错误提示，另一种是在输入框下方显示错误提示

在输入框里显示错误提示如下：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="请输入用户名" 
         label="用户名" 
         left-icon="contact"
         icon="question"
         @click-icon="$toast(\'question\')"
         error
       />
</van-cell-group>

错误提示在输入框下面展示如下：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="请输入用户名" 
         label="用户名" 
         left-icon="contact"
         icon="question"
         @click-icon="$toast(\'question\')"
         error-message="输入不正确噢"
       />
</van-cell-group>

还有一个高频用法，就是发送验证码的用法

这就用到了组件的扩展-slot

slot的值有4个，label，left-icon，icon，button

相当于是代表在4个位置上进行自定义

在DOM里完整的代码如下：

<van-cell-group style="line-height: 60px;">
       <van-field 
         v-model="value"
         placeholder="请输入用户名" 
         label="用户名" 
         left-icon="contact"
       >
          <van-button slot="button" type="primary" size="small">发送验证码</van-button>
       </van-field>
</van-cell-group>

如果有对不齐的情况，可以在浏览器里查看Elements找对应的class，在css样式里进行修改即可

原文链接：https://mp.weixin.qq.com/s/qOPlNWfWWBWeaaCX6oeZNw

以上是 vue--vant组件库field输入框 的全部内容， 来源链接： utcz.com/z/374640.html

回到顶部