限制 el-input 输入 emoji

1. 电脑如何输入 emoji 表情 ?

快捷键 win+; 或 win+.

2. 代码实现

<template>
  <el-input v-model="input" placeholder="请输入内容" @input="inputChange"></el-input>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      input: ''
    }
  },
  methods: {
    inputChange (value) {
      this.input = value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '')
    }
  }
}
</script>

3. 效果图

请添加图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一段 Vue.js 的代码,用于显示电梯监控的界面,其中使用了 Element UI 组件库。 翻译如下: div.elevator-monitor // 电梯监控界面 el-tabs( // Element UI 的 Tabs 标签页组件,用于切换不同的电梯列表 v-model="tabActive", // 绑定选中的标签页 @tab-click="tabRefresh", // 标签页被点击时触发刷新事件 ref="tabs" // 组件的引用,便于在代码中操作组件 ) el-tab-pane( // 标签页的内容,包括电梯列表和详情信息 lazy, // 延迟加载标签页内容 ref="", // 引用标签页内容,便于在代码中操作 :label="$t(`message.menu.ElevatorIOT`)", // 标签页的名称,使用国际化语言 name="ElevatorIOT" // 标签页的唯一标识 ) div.content(:style="{height:contentHeight - 32 + 'px'}") // 标签页的内容区域,包括电梯列表和详情信息 div.top-part // 电梯列表的顶部区域,包括搜索框和搜索按钮 div.elevator-list // 电梯列表的区域 .list-btnAndInput // 搜索框和搜索按钮 el-input( // Element UI 的 Input 输入框组件 v-clear-emoji="true", // 清除表情符号 :placeholder="$t(`message.searchPlaceholder.search`, {name: ''})", // 搜索框的占位符,使用国际化语言 v-model="listKeyword", // 绑定搜索关键字 size="small", // 输入框的尺寸 @keyup.enter.native="searchList" // 监听 Enter 键的按下事件,触发搜索功能 ) el-button( // Element UI 的 Button 按钮组件 slot="append", // 将按钮放到输入框的右侧 icon="el-icon-search", // 按钮的图标 @click="searchList" // 点击按钮触发搜索功能 ) .list-content // 电梯列表的内容区域 .item // 每一个电梯列表项 img(src="~@/assets/elevatorImg/door.png") // 电梯图片 .right // 电梯信息 .title Building 4,Lift1 // 电梯名称 .desc 31104414002022050101 // 电梯编号 .desc 2 Hangleton Way, Hove BN3 8AG // 电梯地址 div.elevator-info // 电梯详情信息的区域 elevator-status // 电梯状态 elevator-alarm(slot="alarm") // 电梯报警信息 // - div.inner-status div.elevator-card-box // 电梯详情信息的卡片区域

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值