❤ vue 使用原生组件

❤ vue 使用原生组件

1、做一个input输入框验证开始

① 想让我们的input输入框类型为时间,只需要为我们的输入框简单的加一个类型的type即可

<input type="date" id="birthday" name="birthday" placeholder="年/月/日">

我们还可以拿正则验证非空
    
var reg_birthday = /^\d{4}\/\d{2}\/\d{2}$/;

② 但是如果我们想要输入验证类型的咋办呢:

//验证用户名方法(只能是数字字母和中文,不能包括特殊字符)

js 复制代码
 var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
  
  if(regex.test(value) == true){}
  else{}

常见的属性和方法

  • 通过 disabled 属性指定是否禁用 input 组件

  • 使用clearable属性即可得到一个可清空的输入框

  • 使用show-password属性即可得到一个可切换显示隐藏的密码框

  • 通过 prefix-iconsuffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标

使用如下:

js 复制代码
<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"> </el-input>
  • 通过添加类型type="textarea" 转换为一个文本类型的输入框

  • 设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。

  • 通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 medium、small 和 mini 三种尺寸

  • maxlengthminlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 texttextarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计

  • 想要统计字数:利用show-word-limit 达到限制文字的效果

相关推荐
终将老去的穷苦程序员1 小时前
使用 IntelliJ IDEA 创建简单的 Java Web 项目
java·前端·intellij-idea
JINGWHALE12 小时前
设计模式 行为型 模板方法模式(Template Method Pattern)与 常见技术框架应用 解析
前端·人工智能·后端·设计模式·性能优化·系统架构·模板方法模式
&活在当下&3 小时前
Vue3 给 reactive 响应式对象赋值
前端·vue.js
坐公交也用券3 小时前
VUE3配置后端地址,实现前后端分离及开发、正式环境分离
前端·javascript·vue.js
独孤求败Ace4 小时前
第31天:Web开发-PHP应用&TP框架&MVC模型&路由访问&模版渲染&安全写法&版本漏洞
前端·php·mvc
吴秋霖4 小时前
某漫画网站JS逆向反混淆流程分析
开发语言·javascript·ecmascript
Elcker4 小时前
Tauri教程-基础篇-第二节 Tauri的核心概念上篇
javascript·rust
星星不闪包退换4 小时前
css面试常考布局(圣杯布局、双飞翼布局、三栏布局、两栏布局、三角形)
前端·css
书边事.4 小时前
Taro+Vue实现图片裁剪组件
javascript·vue.js·taro
疯狂的沙粒5 小时前
HTML和CSS相关的问题,如何避免 CSS 样式冲突?
前端·css·html