1. 在 TSX中 获取不到 boolen 类型的值

问题描述

在使用 Element-plus 的 drawer 组件时，遇到获取不到 drawerVisible 值的问题

const drawerVisible: Ref = ref(false)

return () => (
  <el-drawer title='标题' v-model={drawerVisible.value}>
    <p>测试</p>
  </el-drawer>
)

解决方案

在return时加一个空标签 <></>

const drawerVisible: Ref = ref(false)

return () => (
  <>
    <el-drawer title="标题" v-model={drawerVisible.value}>
      <p>测试</p>
    </el-drawer>
  </>
)

2. 在 TSX 中使用 vue 动态组件 component

问题描述

在 TSX 中无法使用 vue动态组件component，故需要使用resolveComponent 手动渲染组件

import Foo from './Foo.vue'
import Bar from './Bar.vue'

const value = ref('test')

return () => <component is={Math.random() > 0.5 ? Foo : Bar} v-model={flag.value} />

解决方案

使用 resolveComponent 手动渲染组件

import Foo from './Foo.vue'
import Bar from './Bar.vue'

const components: any = {
  'foo': defineComponent(Foo),
  'bar': defineComponent(Bar)
}

const value = ref('test')

return () => (
  <>
    {h(resolveComponent(Math.random() > 0.5 ? components['foo'] : components['bar']), {
      value: flag.value
    })}
  </>
)

3. 获取 proxy 对象中的原始对象

toRaw(res.data)

4. 获取 proxy 对象中的类型

问题描述

使用 type of 获取proxy 对象的类型时，总是会返回 object ，获取不到原始对象的真实类型

解决方案

constructor

// object
{}.constructor

// array
[].constructor

instance of

// true
[] instance ofArray

// false
{} instance ofArray

Array.isArray()

只适用于 ES6

// true
Array.isArray([])

// false
Array.isArray({})

5. 在 TSX 中使用 slot 插槽

使用 vant 中的 Cell 组件做示例：

export default defineComponent({
  name: 'CellDemo',
  setup() {
    return () => (
      <van-cell>
        {{
          title: () => <div>标题</div>,
          value: () => <div>内容</div>,
          label: () => <div>描述信息</div>,
          icon: () => <van-icon name='info-o' />
        }}
      </van-cell>
    )
  }
})

6. Vant 下拉刷新与滚动冲突

问题描述

在使用 vant 组件库的 PullRefresh 下拉刷新组件时，组件内的 div 元素添加滚动条属性，导致未滚动到顶部就触发下拉刷新

问题原因

由于 css 样式错误导致

<template>
  <div class="content">
    <van-nav-bar title="标题" />
    <van-pull-refresh
      class="pull-refresh"
      v-model="refreshing"
      @refresh="onRefresh"
      success-text="刷新成功">
      <div class="list">
        <van-cell
          v-for="index in 30"
          :key="index"
          :title="`内容${index}`" />
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { useToggle } from '@vant/use'

const [refreshing, toggle] = useToggle(false)

const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功')
    toggle(false)
  }, 1000)
}
</script>

<style scoped lang="less">
.content {
  height: 100vh;

  .pull-refresh {
    background-color: whitesmoke;
  }

  .list {
    height: calc(100vh - 46px);
    overflow: auto;
  }
}
</style>

解决方案

将滚动条属性移动至 pull-refresh 下

.content {
  height: 100vh;

  .pull-refresh {
    background-color: whitesmoke;
    height: calc(100vh - 46px);
    overflow: auto;
  }

  .list {
    // height: calc(100vh - 46px);
    // overflow: auto;
  }
}

也有其他原因导致上述问题，但是未能成功复现，通过网上查阅资料，找到以下解决方案，如果上面的解决方案没能解决，可以尝试下面的解决方式：

.content {
  height: 100vh;
  flex: 1;
  overflow: hidden;

  .pull-refresh {
    background-color: whitesmoke;
    height: calc(100vh - 46px);
    overflow: auto;
  }

  .list {
    // height: calc(100vh - 46px);
    // overflow: auto;
  }
}

7. Vue 获取上一页面的路由地址

Vue2

 beforeRouteEnter(to, from, next) {
  // 这里的vm就是vue实例，可以用来当做this使用
  next(vm=>{          
    console.log(to)
    //from便是上一个路由的地址
    console.log(from) 
  })
}

Vue 3 & Nuxt 3

const router = useRouter();

console.log(router.options.history.state.back)