0827 今日总结
今日工作
问题1： IOS 设备键盘盖住输入框问题
这几天开发的 H5 收集表单，今天产品准备验收了，UI 反馈了一个问题，就是上面所说，IOS 设备键盘盖住输入框问题；
搜索了下这问题，有几个 特点：
- 只有在 IOS 设备才有的 bug，今天出 bug 的设备 ios 系统版本是 16.6，并不是一个很旧的版本；
- 只有在页面表单的最后一个输入框，即
input, textarea都可能出现； - 在点击 输入区域，唤醒键盘后，页面不会被顶上去，导致键盘盖住需要输入的区域；
解决办法
- 使用了这个 方案 ，修改了部分代码解决;
- 主要是利用
focusin事件，监听后滚动页面；因为在 IOS 设备中，无法判断什么时候 键盘被唤起，但是可以等同为focus和blur事件认为是 键盘唤起和收回；作者这里建议使用focusin和focusout替代上述 2 个事件
参考资料：
问题2：知识复习 position: relative | absolute
css 定位中，position: relative | absolute 这两者的区别
- relative 相对原来的位置偏移，占据实际空间，margin 也占据；
- absolute 相对原来的位置偏移，脱离文档流，不占据空间；
原本是使用 absolute 的，省心图简单，需要边距自己加就好了，事实上，多种因素下，还是 relative 占据空间，但是修改它占据的大小也是可取的；
问题3： vue3 中 defineProps 传值失去响应
我的需求是：
点击 radio 切换 class 样式，实际就是个简单的值绑定；
我的代码：
vue
// 父组件
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup, Radio } from 'vant'
import TestCom from './TestCom.vue';
const checked = ref('1')
</script>
<template>
<div class="wrapper">
<van-radio-group v-model="checked">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
</div>
<div>
<test-com :class-name="checked === '1' ? 'xxx' : 'yyy'"></test-com>
</div>
</template>以及
vue
// 子组件
<template>
<span :class="spanClass">spanClass: {{ spanClass }}</span>
</template>
<script setup lang="ts">
import { computed, toRefs } from 'vue'
const props = defineProps({
className: {
type: String,
default: ''
}
})
const { className } = props;
const spanClass = ['title', className].join(" ")
</script>我的效果是：className 在 radio 切换的时候没改变；
排除因素：不是因为取名字 className 导致；
而是因为这一行：
ts
const { className } = props; // 失去响应式参考文章：vue3 中 defineProps 传值失去响应
相似的，在 vue 的 script 代码中，响应式变量，不能简单的解构赋值，不然会脱离响应式；，从而变化的时候拿不到新值；
解决方法，有 2 种：
vue
<template>
<span>spanClass: {{ spanClass }}</span>
<br />
<span>spanClass1: {{ spanClass111 }}</span>
<br />
<span>className: {{ props.className }}</span>
</template>
<script setup lang="ts">
import { computed, toRefs } from 'vue'
const props = defineProps({
className: {
type: String,
default: ''
}
})
// 方式1，使用 computed
const spanClass = computed(() => ['title', props.className].join(" "))
// 方式2，使用 toRefs 解包而不失响应式
const { className } = toRefs(props);
const spanClass111 = ['title', className.value].join(" ")
// 方式3，使用 props.xxx 取值，但是仅限在 template 中用，在 script 模块无法拿到变化值；
</script>关于 toRefs，可参考：Vue3-toRefs
更多 vue3 使用注意事项，可参考：