cbvirtua 1.0.89 → 1.0.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.89",
+  "version": "1.0.90",
   "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,90 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import { useTestStore } from '@/store/index'
+
+// 存储高度
+let originHeight = 0
+
+// 视口变化 监听函数
+const hanlderResize = (): void => {
+  const resizeHeight =
+    document.documentElement.clientHeight || document.body.clientHeight
+  if (originHeight < resizeHeight) {
+    // 安卓机下 用户收起键盘 同时input还有焦点
+    // 执行失去焦点逻辑
+    hanlderblur()
+  } else {
+    // 安卓机下 用户展开键盘 同时input还有焦点
+    // 执行获取焦点逻辑
+    handlerfocus()
+  }
+  originHeight = resizeHeight
+}
+
+
+// pinia 存储
+const testStore = useTestStore()
+
+// 失去焦点 展示 底部按钮
+const hanlderblur = (): void => {
+  testStore.setFooterMenuType(true)
+}
+
+// 获取焦点 隐藏 底部按钮
+const handlerfocus = (): void => {
+  testStore.setFooterMenuType(false)
+}
+
+
+// 自定义指令
+const keyboardExpansion: Directive = {
+    /**
+     el：指令绑定到的元素。这可以用于直接操作 DOM。
+     binding：一个对象，包含以下属性。
+        value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
+        oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
+        arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
+        modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
+        instance：使用该指令的组件实例。
+        dir：指令的定义对象。
+    **/
+    mounted (el: Element, binding: DirectiveBinding<any>) {
+        // 查找 目标元素
+        // 这里 inputElement 指的是 input/textarea
+        const inputElement: Element | null = ['INPUT', 'TEXTAREA'].includes(el.tagName)
+        ? el
+        : el.querySelector('input') || el.querySelector('textarea')
+       // 绑定事件
+        inputElement?.addEventListener('blur', hanlderblur)
+
+        inputElement?.addEventListener('focus', handlerfocus)
+
+        // 判断 安卓机情况下 添加视口监听
+        if ((/android/i).test(navigator.userAgent)) {
+            originHeight = document.documentElement.clientHeight || document.body.clientHeight
+            window.addEventListener('resize', hanlderResize, false)
+        }
+    },
+    unmounted() {
+        if ((/android/i).test(navigator.userAgent)) {
+            // 指令元素 销毁前remove上面绑定的事件
+          window.removeEventListener('resize', hanlderResize, false)
+        }
+    }
+}bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
+
+inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
+
+update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
+
+我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
+
+componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
+
+unbind：只调用一次，指令与元素解绑时调用。
+
+@media (min-aspect-ratio: 13/20) {
+  .button {
+    display: none;
+  }
+}
+