Ray Template4.7.x带来的新特性

前言

Ray Template 经过不断的打磨，现在已经收获了 112 个星星啦～在这里感谢给予支持的小伙伴，希望这个项目能够让新手玩家学习到新东西、搬砖人能大大的增加搬砖效率。

GitHub

v4.7.x有哪些大的变化

• 新增一些实用 hooks
• 新增检查器
• 增强自定义组件
• UI, UX 优化
• 还有一些不值一提的小东西...

这里不做铺开细说，有兴趣的小伙伴可以点击查看 CHANGELOG。

useChart, useTable, useForm

在最新版本中，实现了三个新的 hooks 方法，用来解决以前使用 ref 操作组件实例方法别扭的问题。

这三个方法使用方式都差不多，这里以 useTable 举例子。

<template>
  <RTable @register="register" />
  <button @click="getInst">获取实例</button>
</template>
<script setup lang="ts">
import { RTable } from '@/components'

import { useTable } from '@/components'

const [register, { getTableInstance, ...hooks }] = useTable()

const getInst = () => {
  const inst = getTableInstance()
  console.log(inst)
}
</script>

vitest单测框架

在经过深思熟虑的考虑后，引入了以 vite 为基座的 vitest 为模板的单测框架。并且为模板的核心方法包都已经做了单测覆盖（utils, hooks）。

components包下组件的更新

针对模板组件，做了一些升级。

RChart

RChart 组件现在支持了更多的高级特性配置：

• intersectionObserver： 配置是否启用在可视区域内才渲染图表
• intersectionObserverTarget： 手动指定视区目标元素
• intersectionOptions： 自定义触发条件
• nextTick： 强制在下一个队列渲染图表

现在 RChart 组件在针对性能优化的场景，做了一些预设的场景考虑。希望能够让你少写一些代码。

RTable

新增 useTable 方法。不仅如此，还新增 usePagination 方法结合使用，让你轻松的写表单。

usePagination 方法在 src/hooks/web 下，使用 import { usePagination } from '@/hooks'。

import { NFlex, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
import { RCollapseGrid, RTable } from '@/components'

import { useHookPlusRequest } from '@/axios'
import { getPersonList } from '@/api/demo/mock/person'
import { usePagination } from '@/hooks'

import type { Person } from '@/api/demo/mock/person'

export default defineComponent({
  name: 'RTableDemo',
  setup() {
    const columns = [
      {
        title: 'id',
        key: 'id',
      },
      {
        title: '邮箱',
        key: 'email',
      },
      {
        title: '地址',
        key: 'address',
      },
      {
        title: '姓名',
        key: 'name',
      },
      {
        title: '年龄',
        key: 'age',
      },
      {
        title: '创建时间',
        key: 'createDate',
      },
      {
        title: '操作',
        key: 'action',
        render: (row: Person) => {
          return (
            <NFlex align="center">
              <NButton
                type="primary"
                text
                onClick={() => {
                  window.$message.info('查看')
                }}
              >
                查看
              </NButton>
              <NButton
                type="primary"
                text
                onClick={() => {
                  window.$message.warning('编辑')
                }}
              >
                编辑
              </NButton>
              <NButton
                type="error"
                text
                onClick={() => {
                  window.$message.error('删除')
                }}
              >
                删除
              </NButton>
            </NFlex>
          )
        },
      },
    ]
    const condition = reactive({
      email: null,
    })

    const {
      getPagination,
      getPage,
      getPageSize,
      setItemCount,
      getCallback,
      setPage,
      setPageSize,
    } = usePagination(() => {
      personFetchRun({
        page: getPage(),
        pageSize: getPageSize(),
        email: condition.email,
      })
    })
    const paginationRef = getPagination()
    const {
      data: personData,
      loading: personLoading,
      run: personFetchRun,
    } = useHookPlusRequest(getPersonList, {
      defaultParams: [
        {
          page: getPage(),
          pageSize: getPageSize(),
          email: condition.email,
        },
      ],
      onSuccess: (res) => {
        const { total } = res

        setItemCount(total)
      },
    })

    return {
      personData,
      personLoading,
      getPagination,
      columns,
      ...toRefs(condition),
      getCallback,
      paginationRef,
    }
  },
  render() {
    return (
      <NFlex vertical>
        <NForm labelPlacement="left">
          <RCollapseGrid bordered={false} cols={3}>
            {{
              default: () => (
                <>
                  <NFormItemGi label="邮箱">
                    <NInput v-model:value={this.email} clearable />
                  </NFormItemGi>
                </>
              ),
              action: () => (
                <NButton type="primary" onClick={this.getCallback.bind(this)}>
                  搜索
                </NButton>
              ),
            }}
          </RCollapseGrid>
        </NForm>
        <RTable
          title="Mock数据表格"
          data={this.personData?.data}
          loading={this.personLoading}
          v-model:columns={this.columns}
          pagination={this.paginationRef}
          remote
        />
      </NFlex>
    )
  },
})

RForm

拓展了 useForm 方法，具体使用与 useTable 区别不大。

啰嗦一下

useForm, useTable, usePagination 三个方法，提供了最基础的封装思路与使用方法。可以在此基础按照自己的实际喜好拓展。

RModal

拓展了官方的 useModal 方法，支持配置拖拽、宽度、全屏等...

具体配置参数如下：

{
  /**
   *
   * @description
   * 是否记住上一次的位置。
   *
   * @default true
   */
  memo: {
    type: Boolean,
    default: true,
  },
  /**
   *
   * @description
   * 是否全屏。
   *
   * @default false
   */
  fullscreen: {
    type: Boolean,
    default: false,
  },
  /**
   *
   * @description
   * preset 为空时宽度设置。
   *
   * @default 600
   */
  width: {
    type: [String, Number],
    default: 600,
  },
  /**
   *
   * @description
   * preset 为 card 时宽度设置。
   *
   * @default 600
   */
  cardWidth: {
    type: [String, Number],
    default: 600,
  },
  /**
   *
   * @description
   * preset 为 dialog 时宽度设置。
   *
   * @default 446
   */
  dialogWidth: {
    type: [String, Number],
    default: 446,
  },
  /**
   *
   * @description
   * 是否启用拖拽。
   * 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
   *
   * @default false
   */
  dad: {
    type: Boolean,
    default: false,
 },

配置参数与使用 RMOdal 基本一致。

不过，useModal 不支持 memo 配置。

Hooks工具包

一些 hooks 方法封装。

UI, UX升级

对于模板的整体 ui 细节都做了一些优化，动画效果更加的丰富了；ux 参考了大量的模板，再结合自己的理解， 也做了一些升级。

保姆级注释

保姆级注释，我相信很多模板都没这么有耐心去做吧。

算是一个特点吧。

最后

这个项目核心初衷便是帮助新手前端、搬砖前端快速上手。

共勉～～～