cbvirtua 1.0.122 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.122",
+  "version": "2.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -8,7 +8,5 @@
   },
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "cbvirtua": "^1.0.0"
-  }
+  "dependencies": {}
 }

package/valid.txt

@@ -0,0 +1,468 @@
+简介
+这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。本文是以ts为基础开发的，如果同学们需要js版的只需要把ts语法转为js即可。
+
+#1. vue插件开发
+关于vue的插件开发，官方文档里有很清晰的说明，详情可以去阅读开发文档 (opens new window)。这次开发的表单验证插件validate.ts就是利用了这种方式。
+
+vue全局指令
+// myPlugin.js
+export default {
+  install: (Vue, options) => {
+    // 注册一个my-directive指令
+    Vue.directive('my-directive', {
+      bind(el, binding, vnode, oldVnode) {
+        // 逻辑
+      }
+      ...
+    })
+  }
+}
+// main.js
+import Vue from 'vue';
+import myPlugin from 'myPlugin';
+Vue.use(myPlugin);
+
+上面是注册一个vue自定义指令 (opens new window)的写法，注册的时候，bind()函数为指令的钩子函数，其中的参数el表示指令绑定的元素，可以直接操作DOM。binding为一个对象，包括指令名称，绑定值等信息。vnode和oldVnode表示Vue编译生成的虚拟节点。
+
+我们通过注册一个全局指令v-validateParams指令，绑定到输入表单的input标签上来校验当前输入值是否符合要求。
+
+#2. v-validateParams指令
+最开始我参考了网上的一些代码，思路如下：
+
+整体思路
+import Vue from 'vue'
+export default {
+  install: (Vue, options) => {
+    // 注册一个全局自定义指令 `v-validateParams`
+    Vue.directive('validateParams', {
+      // 当被绑定的元素插入到 DOM 中时
+      inserted: function (el, binding, vNode) {
+        // 给指令绑定的Dom元素添加事件监听，监测输入框失焦事件
+        // 每次当表单中的输入框失焦时执行函数
+        el.addEventListener('blur', function (event) {
+          // 1.首先重置所有错误提示
+          // 2.获取自定义指令中传入的校验规则参数和表单输入的值
+          // 3.依次判断当前输入的值是否符合校验规则
+        })
+      }
+    })
+
+    // 注册一个全局自定义指令 `v-validateSubmit`，这个指令绑定到表单的提交button上
+    Vue.directive('validateSubmit', {
+      // 当被绑定的元素插入到 DOM 中时
+      inserted: function (el, binding, vNode) {
+        // 给提交button添加事件监听
+        el.addEventListener('click', function (event) {
+          // 获取当前组件内所有含有v-check类名的元素
+          let elements = vNode.context.$el.getElementsByClassName('v-check')
+          var evObj = vNode.context.$el.createEvent('Event')
+          evObj.initEvent('blur', true, true)
+          for (let element of elements) {
+            // 给所有v-check元素绑定blur事件
+            element.dispatchEvent(evObj);
+          }
+          // 获取当前组件下的所有错误提示元素
+          let errorInputs = vNode.context.$el.getElementsByClassName('input-error');
+          // 如果组件中没有错误提示元素，则执行当前组件实例中的submit()函数
+          if(errorInputs.length === 0){
+            vNode.context.submit();
+          }
+        })
+      }
+    })
+  }
+}
+
+这里需要说明一下validateSubmit指令，这个指令绑定到提交按钮上，在点击的时候执行校验，校验通过之后执行提交操作。但是这里的实现方式不是特别友好:
+
+需要获取当前组件中的所有input元素，给他们绑定并执行blur事件，以此来执行validateParams指令中的校验逻辑。
+获取当前组件中的所有错误提示元素，如果他们存在就表示没有通过校验，不能继续执行后面的逻辑。
+当组件内不含任何错误提示元素时，表示校验通过，执行当前组件内的submit函数，所以每个表单组件的提交函数都只能命名为submit
+我们再看下指令validateParams的内部实现。该指令需要绑定到表单input元素上，并把校验规则当作参数传入。当该input元素失焦时，会执行指令中给当前元素绑定的事件中的逻辑。这些逻辑分为三个步骤，我已经写在注释里了，现在我们来看下具体实现。
+
+重置所有错误提示
+/**
+ * 重置当前节点样式
+ * @param el: HTMLElement，传入当前绑定的input元素
+ */
+const resetError = (el: HTMLElement) => {
+  el.className = el.className.replace('input-error', '').trim();
+  if ( el.parentNode ) {
+    const ErrorNode = el.parentNode.querySelector('.error-tips');
+    if (ErrorNode) {
+      el.parentNode.removeChild(ErrorNode);
+    }
+  }
+};
+获取自定义指令中传入的校验规则参数和表单输入的值
+// binding.value是传入自定义指令的参数，以数组的形式
+for (const rule of binding.value) {
+  // 分别获取到自己定义的校验规则并执行
+  const { min, max, message, required, pattern } = rule;
+  if ( !!required && !InputEl.value ) {
+    // 如果不符合校验，执行报错函数
+    validateError(InputEl, message);
+    break;
+  }
+  if ( min && InputEl.value.length < min ) {
+    validateError(InputEl, message);
+    break;
+  }
+  if ( max && InputEl.value.length > max ) {
+    validateError(InputEl, message);
+    break;
+  }
+  if ( pattern && !pattern.test(InputEl.value) ) {
+    validateError(InputEl, message);
+    break;
+  }
+  if ( rule && typeof rule === 'function' ) {
+    rule(vNode.context, InputEl.value, validateError, InputEl);
+    break;
+  }
+}
+校验不符合，执行报错函数
+/**
+ * 执行错误提示函数，用input-error 类名和含有错误信息的p元素表示未通过校验
+ * @param el: HTMLElement，传入当前绑定的input元素
+ * @param errorMsg: string，传入错误提示信息
+ */
+const validateError = (el: HTMLElement, errorMsg: string) => {
+  if (Array.prototype.includes.call(el.classList, 'input-error')) {
+    //如果当前组件里已经有了错误提示信息，什么也不做
+    return;
+  } else {
+    const errorNode = document.createElement('p');
+    errorNode.className = 'error-tips';
+    errorNode.textContent = errorMsg;
+    if (el.parentNode) {
+      // 在当前input 元素后追加一个p元素，内容为错误提示
+      el.parentNode.appendChild(errorNode);
+    }
+    // 在当前input 元素上添加一个input-error类名
+    el.className += ' input-error';
+  }
+};
+现在我就把自己实现的这个表单校验插件大致说完了，下面我们看下具体使用。
+
+#3. 表单插件的使用
+首先新建校验规则文件：
+
+// rules.ts
+export const required = (message) => ({
+  message,
+  required: true
+});
+export const min = (message, length=3) => ({
+  message,
+  min: length
+})
+export const max = (message, length=15) => ({
+  message,
+  max: length
+})
+export const pattern = (message, reg) => ({
+  message,
+  pattern: reg
+})
+
+// form.vue
+<template>
+  <div>
+    <div class="form-item">
+      <label for="userEmail">用户名：</label>
+      <input id="userEmail" class='v-check' type="text" v-model="userName"
+        v-validateParams="[inputNameRequired, inputNameMin, inputNameMax, inputNamePattern]">
+    </div>
+    <button class="btn" type="success" v-checkSubmit>确认</button>
+  </div>
+</template>
+<script lang='ts'>
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { max, min, required, name, pattern} from 'rules';
+
+@Component({})
+export default class Auth extends Vue {
+  private userName: string = '';
+  private inputNameMax = max('请不要超过20个字符');
+  private inputNameMin = min('请不要小于3个字符');
+  private inputNameRequired = required('请输入用户名');
+  private inputNamePattern  = pattern('请输入符合要求的用户名', /^[a-zA-Z0-9_-]{4,16}$/);
+  private submit() {
+    alert('通过校验');
+  }
+}
+</script>
+通过这个例子我们可以看到，使用时需要将校验规则引入并赋给vue实例中的数据。然后在模板中，需要给input标签添加v-check类名，再使用v-validateParams指令，并传入参数。提交按钮需要调用v-checkSubmit指令。按照这种方式就能够使用自己开发的这个表单校验插件。
+
+#4. 当前方式存在的问题
+虽然表单校验可以使用了，但是存在一些显而易见的问题：
+
+js和html耦合度较高，插件还需要获取dom元素，组件的html模板中还需要添加制定类名。
+在vue中使用dom操作，不符合vue的设计思路，实现方式也不优雅。
+校验规则的校验逻辑在指令定义时写定了，添加或删除都需要改动插件代码。
+提交指令根据当前组件内的是否含有特定dom来判断当前校验状态，且执行提交的函数名称也在指令逻辑中写定了。
+我根据现有一个demo结合着自己的需求来实现的这个表单校验插件，开发的过程中我已经知道这么写问题很多，同时也清楚的认识到自己的javascript水平还很初级，需要继续努力学习。
+
+当前开发的表单插件的主要问题在于如何将插件中的校验状态返回到组件内。我们可以在插件内维护一个事件处理函数，将校验规则传入并校验，再将校验结果直接传给组件内。这样就可以避免大量的dom操作。之后我需要尽快对这个插件进行更科学合理的重构。
+
+#更新：对表单插件的优化(opens new window)
+#参考文章
+vue插件(opens new window)
+
+vue自定义指令(opens new window)
+
+vue使用自定义指令实现表单校验(opens new window)
+
+重构：从 0.1 构建一个 Vue 表单验证插件(opens new window)
+
+va.js——Vue 表单验证插件的写作过程
+
+
+
+Vue3自定义指令实现输入框全局禁止空格输入方案
+avatar
+2026-02-12 12:05:13
+在Web开发中，输入框禁止空格输入是常见的表单验证需求。本文基于Vue3的自定义指令机制，提供了一套完整的全局解决方案，可有效拦截所有形式的空格输入（包括键盘输入、粘贴内容等）。
+
+核心实现方案
+自定义指令封装
+通过封装v-no-space自定义指令，实现输入框空格的实时过滤：
+
+JavaScript
+复制
+export default {
+  mounted(el) {
+    const handler = (e) => {
+      // 实时替换所有空格（包括粘贴内容）
+      const newValue = e.target.value.replace(/\s+/g, '')
+      if (e.target.value !== newValue) {
+        e.target.value = newValue
+        // 触发v-model更新
+        el.dispatchEvent(new Event('input'))
+      }
+    }
+    el._noSpaceHandler = handler
+    el.addEventListener('input', handler)
+  },
+  unmounted(el) {
+    el.removeEventListener('input', el._noSpaceHandler)
+  }
+}
+关键点说明：
+
+使用正则表达式/\s+/g匹配所有空白字符
+通过监听input事件实现实时过滤
+手动触发input事件确保v-model同步
+组件卸载时自动移除事件监听
+全局指令注册
+在应用入口文件注册全局指令：
+
+JavaScript
+复制
+import { createApp } from 'vue'
+import App from './App.vue'
+import noSpace from './directives/noSpace'
+
+const app = createApp(App)
+app.directive('no-space', noSpace)
+app.mount('#app')
+组件使用示例
+在任意组件中通过v-no-space指令快速应用：
+
+Vue
+复制
+<template>
+  <div class="container">
+    <h1>禁止空格输入演示</h1>
+    <input 
+      v-model="textValue" 
+      v-no-space
+      placeholder="尝试输入或粘贴带空格的内容"
+      class="input-field"
+    >
+    <p>当前值: "{{ textValue }}"</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      textValue: ''
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  max-width: 600px;
+  margin: 2rem auto;
+  padding: 1rem;
+  font-family: Arial, sans-serif;
+}
+.input-field {
+  width: 100%;
+  padding: 0.5rem;
+  border: 2px solid #3498db;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+</style>
+方案优势对比
+实现方式	适用范围	过滤范围	维护成本
+v-model.trim	仅首尾空格	有限	低
+keydown事件	键盘输入	有限	中
+自定义指令	所有输入场景	全面	低
+常见问题处理
+粘贴空格内容：通过监听input事件可拦截粘贴操作
+中文输入法：不会影响正常中文输入（仅过滤空白字符）
+内存泄漏：通过unmounted钩子确保事件监听器正确移除
+
+
+vue3自定义指令验证输入
+当我简单写几个带输入验证的input时，比如必填和邮件格式等，又不想引入antd那种大型库，就想试一下用vue的自定义指令来验证，确实效果嘎嘎好。
+自定义指令
+先来看一下自定义指令的基本语法。
+一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
+一个指令的定义对象可以提供几种钩子函数 (都是可选的)：
+js 体验AI代码助手 代码解读复制代码const myDirective = {
+  // 在绑定元素的父组件
+  // 及他自己的所有子节点都挂载完成后调用
+  mounted(el, binding, vnode, prevVnode) {},
+  // 在绑定元素的父组件
+  // 及他自己的所有子节点都更新后调用
+  updated(el, binding, vnode, prevVnode) {},
+}
+
+主要会用到的参数是el和binding，el是指令绑定到的元素，可以直接操作DOM，bingding是一个对象，包含value属性，是传递给指令的值。
+实现
+最终效果是这样
+
+模版
+先简单写个模版，也不是那么简单，看input和hint就好了。
+html 体验AI代码助手 代码解读复制代码      <div class="form_field">
+        <div class="field">
+          <div class="field_label">email:</div>
+          <input
+            id="email"
+            data-rules="required|email"
+            v-validate="displayErrors"
+            type="text"
+          />
+        </div>
+        <div class="hint">{{ state.errors['email'] }}</div>
+      </div>
+      <div class="form_field">
+        <div class="field">
+          <div class="field_label">password:</div>
+          <input
+            id="password"
+            data-rules="required|minLength:8"
+            v-validate="displayErrors"
+            type="password"
+          />
+        </div>
+        <div class="hint">{{ state.errors['password'] }}</div>
+      </div>
+
+在data-rules中写上需要哪些验证，email是必填和邮箱格式，password是必填和长度至少为8。
+自定义指令是v-validate，需要传递displayErrors函数过去，在这个函数里面可以拿到输入验证的结果，有error的话展现到页面上。hint就是展示错误的地方，需要拿到对应的error，这里的关键字要和input的id属性对应。
+setup
+setup部分比较简单，定义一个state，包含errors对象。displayErrors函数就是拿到验证结果，把错误放入erros中。
+js 体验AI代码助手 代码解读复制代码<script setup>
+import { reactive } from 'vue';
+
+const state = reactive({
+  errors: {},
+});
+function displayErrors(errors) {
+  if (errors) {
+    state.errors[errors.name] = errors.error;
+  }
+}
+</script>
+
+自定义指令实现
+接下来是重头戏了。在元素mounted了后，拿到rules。如果有rules，就监听元素的input事件，并验证每一条rule是不是符合，不符合的就给出error，并调用组件传过来displayErrors函数。
+js 体验AI代码助手 代码解读复制代码const validateDirective = {
+  mounted(el, binding, vnode, prevVnode) {
+    // 获取定义在dataset.rules的规则
+    const rules = el.dataset['rules'];
+    // 获取组件传递的displayErrors函数
+    const displayErrors = binding.value;
+    if (!rules) return;
+    // 解析rules
+    const specRules = getRules(rules);
+    el.addEventListener('input', (e) => {
+      // input的值
+      const value = e.target.value;
+      let error;
+      if ('email' in specRules) {
+        const emailRegex =
+          /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+        if (!emailRegex.test(value)) {
+          error = `字符串不符合邮件格式`;
+        }
+      }
+      if ('minLength' in specRules) {
+        if (value.length < specRules['minLength']) {
+          error = `字符串长度至少为${specRules['minLength']}`;
+        }
+      }
+      if ('required' in specRules) {
+        if (!value) {
+          error = '字符串不能为空';
+        }
+      }
+      displayErrors({
+        name: el.id,
+        error: error,
+      });
+    });
+  },
+};
+
+rules和getRules这里都是简单的实现。
+js 体验AI代码助手 代码解读复制代码function getRules(rules) {
+  // rules用|分隔
+  const validateRules = rules.split('|');
+  const rulesObj = {};
+  validateRules.forEach((rule) => {
+    // rule参数用:分隔
+    const specRule = rule.split(':');
+    if (specRule.length > 1) {
+      rulesObj[specRule[0]] = specRule[1];
+    } else {
+      // 没有参数的rule用true代表
+      rulesObj[specRule[0]] = true;
+    }
+  });
+  return rulesObj;
+}
+
+注册自定义指令
+可以在main.js中全局注册自定义指令
+js 体验AI代码助手 代码解读复制代码import validateDirective from './directives/validate';
+const app = createApp(App);
+app.directive('validate', validateDirective);
+app.mount('#app');
+
+也可以通过directives选项注册
+js 体验AI代码助手 代码解读复制代码import validateDirective from './directives/validate';
+
+export default {
+  directives: {
+    // 在模板中启用 v-validate
+    validate: validateDirective
+  }
+}
+
+总结
+以上就是通过自定义指令验证输入的全部内容了。除了这个，自定义指令还有更多有趣又有用的功能，如v-copy, v-lazy-img,v-emoji,v-longpress等，可以参考这篇文章。当遇到需要通用的操作原生DOM的情况时，除了$refs，试试看自定义指令吧！
+
+作者：叶之
+链接：https://juejin.cn/post/7250382724879122489
+来源：稀土掘金
+著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

package/_/345/217/267 (1).svg"

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746628146445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1642" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M422.4 128h115.2l-12.8 294.4 268.8-102.4 38.4 102.4-281.6 89.6 192 217.6-89.6 76.8-179.2-243.2-166.4 243.2-89.6-76.8L409.6 512 128 422.4l38.4-102.4 268.8 102.4z" fill="#F34861" p-id="1643"></path></svg>

package/_/345/217/267.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746628146445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1642" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M422.4 128h115.2l-12.8 294.4 268.8-102.4 38.4 102.4-281.6 89.6 192 217.6-89.6 76.8-179.2-243.2-166.4 243.2-89.6-76.8L409.6 512 128 422.4l38.4-102.4 268.8 102.4z" fill="#F34861" p-id="1643"></path></svg>

package/check_box.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749568783409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4227" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M426.005333 725.994667l384-384-60.010667-61.994667-324.010667 324.010667-152-152-60.010667 60.010667zM810.005333 128q36.010667 0 60.992 26.005333t25.002667 60.010667l0 596.010667q0 34.005333-25.002667 60.010667t-60.992 26.005333l-596.010667 0q-36.010667 0-60.992-26.005333t-25.002667-60.010667l0-596.010667q0-34.005333 25.002667-60.010667t60.992-26.005333l596.010667 0z" fill="#222222" p-id="4228"></path></svg>

package/check_box_outline_blank.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749569004781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1551" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M810.005333 128q34.005333 0 60.010667 26.005333t26.005333 60.010667l0 596.010667q0 34.005333-26.005333 60.010667t-60.010667 26.005333l-596.010667 0q-34.005333 0-60.010667-26.005333t-26.005333-60.010667l0-596.010667q0-34.005333 26.005333-60.010667t60.010667-26.005333l596.010667 0zM810.005333 213.994667l-596.010667 0 0 596.010667 596.010667 0 0-596.010667z" fill="#222222" p-id="1552"></path></svg>

package/checkbox_unchecked.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749568817715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4450" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M245.333333 128h533.333334A117.333333 117.333333 0 0 1 896 245.333333v533.333334A117.333333 117.333333 0 0 1 778.666667 896H245.333333A117.333333 117.333333 0 0 1 128 778.666667V245.333333A117.333333 117.333333 0 0 1 245.333333 128z m0 64c-29.44 0-53.333333 23.893333-53.333333 53.333333v533.333334c0 29.44 23.893333 53.333333 53.333333 53.333333h533.333334c29.44 0 53.333333-23.893333 53.333333-53.333333V245.333333c0-29.44-23.893333-53.333333-53.333333-53.333333H245.333333z" p-id="4451"></path></svg>