首页 > 编程语言 >直播软件源码,vue 自定义指令过滤特殊字符

直播软件源码,vue 自定义指令过滤特殊字符

时间:2023-02-28 14:12:20浏览次数:45  
标签:el vue target 自定义 value 源码 emoji

直播软件源码,vue 自定义指令过滤特殊字符

 

/**
 * @tags input 只可以輸入数字、字母、汉字
 * @example v-emoji
 */
export default (app) => {
  app.directive('emoji', {
    mounted(el, binding) {
      // console.log(binding)
      el.oninput = (e) => {
        if (e.target.value != '') {
          const pattern = new RegExp(/[^a-zA-Z0-9_\u4e00-\u9fa5]+$/gi);
          e.target.value = e.target.value.replace(pattern, '');
        }
        // el.blur();
        el.focus();
      };
      // el.onchange = (e) => {
      //   e.target.value = e.target.value.trim();
      // };
      el.onblur = (e) => {
        // console.log(e.target.value)
        e.target.value = e.target.value.trim();
      };
      el.onfocus = (e) => {
        // console.log(e.target.value)
        e.target.value = e.target.value.trim();
      };
    },
  });
};

使用

 


import { createApp } from 'vue';
import emoji from '/@/emoji';
const app = createApp({});
emoji(app); 

 

以上就是直播软件源码,vue 自定义指令过滤特殊字符, 更多内容欢迎关注之后的文章

 

标签:el,vue,target,自定义,value,源码,emoji
From: https://www.cnblogs.com/yunbaomengnan/p/17164050.html

相关文章

  • vue3中style标签内的一些样式使用
    /*vue3中style标签内的一些样式使用1、使用变量作为css的属性值例如:设置元素的字体大小及字体颜色<scriptsetup>constdata=reactive({fontSize:12,color:"......
  • Apache Maven Assembly自定义打包插件的使用
    前言本文主要记录在SpringBoot项目中使用ApacheMavenAssembly插件进行打包的相关内容;官网说明:https://maven.apache.org/plugins/maven-assembly-plugin/概述是什......
  • vue使用纯CSS实现多行文本的“展开”与“收起”功能
    //创建组件<template><!--文档搜索列表展开/收起组件实现了文档搜索列表页文档超过5行会显示展开/收起的功能--><divclass="mj-text-hide"><......
  • 基于jeecgboot复杂sql查询的列表自定义列实现
        一般简单的sql列表实现,可以通过系统自带的在线开发里的online表单开发实现,但一些复杂的混合多表的实现,同时对需要查询出来的结果进行数据更新,这种复杂的数据列表......
  • 通过使用online表单的获取使用,了解vue.js数组的常用操作
        在开发项目中,经常会遇到对数组的操作,比如对数组的数据进行删减或增加,同时也会对每个数组里的数据进行删减,下面就举个例子说明一下。   直接给一段代码getO......
  • vue中的几个高级概念
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0NEJeurD-1677552905427)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf111c39bc87422......
  • 滴滴前端常考vue面试题
    Computed和Methods的区别可以将同一函数定义为一个method或者一个计算属性。对于最终的结果,两种方式是相同的不同点:computed:计算属性是基于它们的依赖进行缓存......
  • day80-todolist组件自定义事件改进
    todolist-自定义组件通过自定义组件改进todolist案例,不全使用prop方式header组件<template><divclass="todo-header"><inputtype="text"placeholder="请输......
  • 美团前端常见vue面试题(必备)
    v-model是如何实现的,语法糖实际是什么?(1)作用在表单元素上动态绑定了input的value指向了messgae变量,并且在触发input事件的时候去动态把message设置为目标值:<in......
  • vue源码分析-响应式系统(三)
    上一节,我们深入分析了以data,computed为数据创建响应式系统的过程,并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题,这......