cbvirtua 1.0.61 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "description": "",
   "main": "index.js",
   "scripts": {

package//346/226/260/345/273/272 /346/226/207/346/234/254/346/226/207/346/241/243 (2).txt"

@@ -0,0 +1,272 @@
+vue自定义指令v-input：限制输入框只能输入数字、字母、中文等规则【附源码】
+指令封装
+directives/input/index.js
+
+/*
+  限制输入框只能输入数字、字母、中文等规则
+
+  使用指令：v-input
+
+  修饰符参数说明：
+    v-input.num 只能输入数字，默认不传修饰符，会自动限制只能输入数字
+    v-input.intp 只能输入正整数
+    v-input.num_alp 只能输入数字和字母
+    v-input.num_alp_blank 只能输入数字、字母、空格
+    v-input.num_alp_sym 只能输入数字和字母、英文符号、空格
+    v-input.float 只能输入数字和小数点  v-input.float="2" 表示小数位数为2，默认小数位数为2，v-input.float="2"可以简写为v-input.float
+    v-input.no_emoji 不能输入表情符号
+
+*/
+// 只能输入数字
+function num(el) {
+  el.value = el.value.replace(/\D+/g, '')
+}
+
+// 只能输入正整数
+function intp(el) {
+  const value = el.value.replace(/\D+/g, '') // 去掉非数字字符
+  el.value = /^[1-9][0-9]*$/.test(value) ? value : value.replace(/^0+/, '') // 确保为正整数，去掉前导零
+}
+
+// 只能输入数字和字母
+function num_alp(el) {
+  el.value = el.value.replace(/[^A-Za-z0-9]/g, '')
+}
+
+// 只能输入数字、字母、空格
+function num_alp_blank(el) {
+  const regex = /[^a-zA-Z0-9 ]/g
+  el.value = el.value.replace(regex, '')
+}
+
+// 只能输入数字、字母、英文符号、空格
+function num_alp_sym(el) {
+  const regex = /[^a-zA-Z0-9`~!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/? ]/g
+  el.value = el.value.replace(regex, '')
+}
+
+// 只能输入数字和小数点，n表示小数位数
+function float(el, n) {
+  let value = el.value
+  value = value.replace(/[^\d.]/g, '') // 能数字和小数点
+  value = value.replace(/^\./g, '') // 去掉开头的点
+  value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 处理多个点的情况
+  if (n && Number(n) > 0) {
+    const d = new Array(Number(n)).fill('\\d').join('') // 构建正则表达式
+    const reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig')
+    value = value.replace(reg, '$1$2.$3') // 限制小数位数
+  }
+  // if (value && !value.includes('.')) {
+  //   value = Number(value).toString() // 去掉开头多个0
+  // }
+  el.value = value
+}
+
+// 限制表情：😀😂❤️🌟🎉🌍🐶☺
+function no_emoji(el) {
+  const regex =
+    /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E6}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{263A}]+/gu
+  el.value = el.value.replace(regex, '')
+}
+
+// 这里扩展限制的类型
+const map = { num, intp, num_alp, num_alp_blank, num_alp_sym, float, no_emoji }
+
+export default {
+  bind(el, binding, vnode) {
+    el = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el
+    let lock = false // 标记是否需要锁定输入框
+    let isHandling = false // 标记是否正在处理
+    let lastValue = null
+    // input事件处理函数
+    const handler = () => {
+      if (lock) return // 如果当前为锁定状态，则不进行处理
+      if (isHandling) return // 如果已经在处理中，则不进行处理
+      if (el.value === lastValue) return // 输入内容没有变化，则不进行处理
+      isHandling = true // 设置标记为处理中
+      const modifiers = Object.keys(binding.modifiers)
+      const newModifier = modifiers[0] || 'num'
+      map[newModifier](el, binding.value || 2)
+      lastValue = el.value // 记录当前输入框的值
+      Promise.resolve().then(() => {
+        // 异步处理，场景：火狐浏览器中，需要在最后派发input事件
+        el.dispatchEvent(new Event('input'))
+      })
+      isHandling = false // 处理完毕后设置标记为非处理状态
+    }
+    el.addEventListener('input', handler)
+    // compositionstart和compositionend事件解决的bug场景：限制只能输入数字的输入框，先输入数字，再切换为中文输入法，输入字母时，会将原来的数字删掉
+    el.addEventListener('compositionstart', () => {
+      lock = true
+    })
+    el.addEventListener('compositionend', () => {
+      lock = false
+      el.dispatchEvent(new Event('input'))
+    })
+    // 当指令与元素解绑时，移除事件监听器
+    vnode.context.$once('hook:destroyed', () => {
+      el.removeEventListener('input', handler)
+    })
+  }
+}
+
+directives/index.js
+
+import input from './input'
+
+const directives = { input }
+
+Object.keys(directives).forEach(key => {
+  Vue.directive(key, directives[key])
+})
+main.js
+
+import './directives'
+注意事项：
+指令的封装不要用keyup事件，当限制只能输入数字时，中文输入法下，输入字母，鼠标点击输入法提示的中文，会将中文输入至文本框中，原因是鼠标点击事件不会触发keyup，用input事件会规避掉这个问题
+使用input事件时，控制台会提示堆栈溢出，需要借助isHandling，执行handler时，先判断是否需要处理
+当限制只能输入数字时，先输入数字，在切换为中文输入法，输入字母时，会将原来的数字删掉，这个问题可以借助compositionstart和compositionend事件解决
+使用
+image.png
+
+组件封装
+CustomInput/index.vue
+
+<!--
+  使用时，直接用 <CustomInput /> 替代 <el-input />
+
+  limit：限制输入类型，可选值：num、intp、numAlp、numAlpBlank、numAlpSym、float、noEmoji，默认为num
+  decimals：当limit为float类型时，限制小数位数
+
+  支持插槽：
+    <CustomInput v-model="subItem.regionHigh" limit="float" maxlength="12" placeholder="请输入" clearable>
+      <template slot="prepend">H</template>
+      <template slot="append">cm</template>
+    </CustomInput>
+
+  支持拓展：
+    1. 定义限制类型的函数
+    2. 在map对象中添加此类型
+    3. 完善新类型的注释
+-->
+
+<template>
+  <el-input v-model="inputValue" v-bind="$attrs" v-on="$listeners" @input="handleInput">
+    <span v-for="{ name, text } of slotList" :slot="name" :key="text">{{ text }}</span>
+  </el-input>
+</template>
+
+<script>
+const map = {
+  num,
+  intp,
+  numAlp,
+  numAlpBlank,
+  numAlpSym,
+  float,
+  noEmoji
+}
+export default {
+  name: 'CustomInput',
+  model: { prop: 'value', event: 'changeValue' },
+  props: {
+    value: { type: [String, Number], default: '' },
+    limit: { type: String, default: 'num' }, // 限制输入类型，可选值：num、intp、numAlp、numAlpBlank、numAlpSym、float、noEmoji，默认为num
+    decimals: { type: Number, default: 2 } // float类型限制小数位数
+  },
+  data() {
+    const { value } = this
+    return { inputValue: value || value === 0 ? String(value) : '', slotList: [] }
+  },
+  watch: {
+    // 手动设置value时，触发handleInput，将不符合限制的字符过滤掉
+    value: {
+      handler(val) {
+        this.handleInput(String(val))
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.initSlot()
+  },
+  methods: {
+    handleInput(val) {
+      if (!this.limit) return
+      const filteredInput = map[this.limit](val, this.decimals)
+      this.$emit('changeValue', filteredInput)
+      this.inputValue = filteredInput
+    },
+    initSlot() {
+      this.$nextTick(() => {
+        const { prepend = [], append = [] } = this.$slots
+        const prependList = prepend.map((item) => ({ name: 'prepend', text: item.text }))
+        const appendList = append.map((item) => ({ name: 'append', text: item.text }))
+        const slotList = prependList.concat(appendList)
+        this.slotList = slotList
+      })
+    }
+  }
+}
+// 只能输入数字
+function num(val) {
+  const newVal = val.replace(/[^0-9]/g, '')
+  return newVal
+}
+// 只能输入正整数
+function intp(val) {
+  let newVal = val.replace(/[^0-9]/g, '') // 去掉非数字字符
+  newVal = /^[1-9][0-9]*$/.test(newVal) ? newVal : newVal.replace(/^0+/, '') // 确保为正整数，去掉前导零
+  return newVal
+}
+// 只能输入数字和字母
+function numAlp(val) {
+  const newVal = val.replace(/[^A-Za-z0-9]/g, '')
+  return newVal
+}
+// 只能输入数字、字母、空格
+function numAlpBlank(val) {
+  const newVal = val.replace(/[^a-zA-Z0-9 ]/g, '')
+  return newVal
+}
+// 只能输入数字、字母、英文符号、空格
+function numAlpSym(val) {
+  const regex = /[^a-zA-Z0-9`~!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/? ]/g
+  const newVal = val.replace(regex, '')
+  return newVal
+}
+// 只能输入数字和小数点，n表示小数位数
+function float(val, n) {
+  let newVal = val.replace(/[^\d.]/g, '') // 能数字和小数点
+  newVal = newVal.replace(/^\./g, '') // 去掉开头的点
+  newVal = newVal.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 处理多个点的情况
+  if (n && Number(n) > 0) {
+    const d = new Array(Number(n)).fill('\\d').join('') // 构建正则表达式
+    const reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig')
+    newVal = newVal.replace(reg, '$1$2.$3') // 限制小数位数
+  }
+  if (newVal && !newVal.includes('.')) {
+    // value = value.replace(/^0+/, '')
+    // value = Number(value).toString() // 去掉开头多个0
+  }
+  return newVal
+}
+// 限制不可输入表情
+function noEmoji(val) {
+  // 限制表情：😀😂❤️🌟🎉🌍🐶☺
+  const regex = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E6}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{263A}]+/gu
+  const newVal = val.replace(regex, '')
+  return newVal
+}
+</script>
+
+注意事项
+使用时需要传入limit，限制类型；当limit为float时，需要传入decimals，限制小数位数
+支持插槽
+使用
+image.png
+
+源码
+www.npmjs.com/package/xtt…
+
+/xtt-tools/directives-v2/input/index.js

package//346/226/260/345/273/272 /346/226/207/346/234/254/346/226/207/346/241/24311.txt"

@@ -0,0 +1,113 @@
+最近开发小程序期间，有一个较大的表单页面，用户编辑期间若误触返回键或误触发滑动返回，再次进入页面表单数据会丢失，当然可以实现记住表单状态，但会增加代码复杂度，感觉不够优雅。遂去搜索小程序返回拦截的实现，大部分文章并没有很好的达到效果，找到了一个个人感觉还较好的实现，微信小程序 / UNIAPP --- 阻止小程序返回（顶部导航栏返回、左 / 右滑手势、安卓物理返回键和调用 navigateBack 接口） - 简书，但感觉还是不符合我的需求，我想要实现类似我们在退出一些app首页时会弹出一个toast那种效果，于是我参考以上代码做了如下实现，也是封装为了一个组件。
+代码实现
+html 代码解读复制代码<!--components/back-confirmation/back-confirmation.wxml-->
+<page-container show="{{show}}" overlay="{{false}}" bind:leave="leave" message="{{message}}"> </page-container>
+
+首先页面代码就是一个无显示无遮罩的page-container，这样我们把这个组件引入到页面中时对显示没有任何影响。新加了一个message属性用于自定义toast消息。
+javascript 代码解读复制代码// components/back-confirmation/back-confirmation.js
+let interval = null
+
+Component({
+    properties: {
+        show: {
+            type: Boolean,
+            value: false
+        },
+        message: {
+            type: String,
+            value: '再按一次退出编辑'
+        }
+    },
+
+    data: {},
+
+    lifetimes: {
+        detached() {
+            if (interval) {
+                clearInterval(interval)
+            }
+        }
+    },
+
+    observers: {
+        'show': function (show) {
+            if (!show) {
+                if (interval) {
+                    clearInterval(interval)
+                }
+            }
+        }
+    },
+
+    methods: {
+        async leave() {
+            if (interval) {
+                clearInterval(interval)
+            }
+
+            if (this.data.show) {
+                await wx.showToast({
+                    title: this.data.message,
+                    icon: 'none',
+                })
+                interval = setInterval(() => {
+                    this.setData({
+                        show: true
+                    })
+                }, 2000)
+            } else {
+                await wx.navigateBack()
+            }
+        },
+    }
+})
+
+对比参考文章，js代码的主要区别就是弹窗改为了toast，另外加了一个interval，如果用户只是误触，不进行二次确认则会在一定时长后重新恢复为需要二次确认。另外我对取消show加了一个observer，有什么作用在后面应用时再讲。
+使用方法
+html 代码解读复制代码<back-confirmation show="{{useBackConfirmation}}"/>
+
+把useBackConfirmation的值设为true，一个退出页面的二次确认就实现了，使用效果如下，在第一下滑动返回时弹出toast消息，2秒内再次滑动才会退出页面，超过两秒则会恢复原状态，需要重新二次确认。
+
+滑动返回是一个比较容易误触发的操作，但若我们的程序有顶部导航栏，顶部导航栏则相对很少误触，那我们希望若是点击导航栏就直接退出。但是我们在代码调用wx.navigateBack()时还是会被我们的二次确认拦截，这就需要先手动把组件的show值关闭，然后在调用wx.navigateBack()，也就是如下代码
+javascript 代码解读复制代码async goBack() {
+    this.setData({
+        useBackConfirmation: false,
+    })
+    // 立即退出无效
+    setTimeout(() => {
+        wx.navigateBack()
+    }, 10)
+},
+
+在返回按钮上绑定该方法，改变show值时前面提到的observer会把interval关掉，避免手动改变后马上又被恢复的情况出现，另外set值后等一定时间再调用wx.navigateBack()，不然可能会有bug。
+需要注意不要在小程序首页使用该封装后的组件，不符合小程序开发规范，另外因为首页本身是无法调用wx.navigateBack()的，我也没有测试到底可不可用。
+理解page-container的原理
+page-container组件的所有属性，最重要的是show值。在页面上引入这个组件后，若show值为true，页面上所有各种方式触发的返回操作都会被这个组件所拦截，然后自动将值置为false。当值为false后，这个组件就没有作用了，但是我们可以重新赋值，就能让它重新恢复拦截。
+在官方文档中，示例代码在page-container中是有具体组件的，这可能误导我们忽略了让它去实现返回二次确认这种无任何显示的最纯粹的功能。当然，基于page-container其实还能实现各种复杂的覆盖在页面之上的组件。
+写在最后
+以上是我在互联网发布的第一个技术分享，其实比较简单，但因为在网上没能找到比较好的方案，所以选择了发布出来。最近开发中其实还遇到了很多问题，本来还想自己建个博客的，但是实在是没有时间，就先写这一篇发布在掘金上了，希望能帮助到一些人。  标签： 微信小程序   评论 0           0 / 1000 
+        标点符号、链接等不计算在有效字数内
+       
+        Ctrl + Enter
+      
+              发送
+                   暂无评论数据      
+                3
+                评论  
+            收藏
+            加个关注，精彩更新不错过~   
+                关注
+                  
+    雨润田上
+          
+        1
+       文章 
+        821
+       阅读 
+        0
+       粉丝 加个关注，精彩更新不错过~  
+
+作者：雨润田上
+链接：https://juejin.cn/post/7456058116972478474
+来源：稀土掘金
+著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。