跳到主要内容

TopView 顶层容器

TopView是作为页面的根组件使用的，在duxapp中，每个页面都需要存在这个组件，他用来实现duxapp的多项功能，例如

  • 路由跳转 和 返回数据
  • PullView 组件内容全局弹出
  • Modal 组件内容全局弹出
  • loading 加载中
  • Absolute 渲染到全局
  • wechat 分享功能
  • Agreement RN启动用户协议

示例​

在duxapp中有个示例页面，他常用的用法是作为高阶函数封装页面，并且导出

import { View } from '@tarojs/components'
import { Header, ScrollView, TopView } from '@/duxapp'

import './index.scss'

export default TopView.HOC(function Duxapp() {

  return <>
    <Header title='duxapp' titleCenter />
    <ScrollView>
      <View className='duxapp-demo__title'>欢迎使用duxapp</View>
      <View className='duxapp-demo__p'>添加模块: yarn duxapp app add app名称</View>
      <View className='duxapp-demo__p'>创建模块: yarn duxapp app create app名称</View>
    </ScrollView>
  </>
})

Props​

继承自Taro的View Props

isSafe​

是否显示安全区域，对于有下巴的机型，可以控制内容不显示在该区域

类型必填默认值
boolean否false

isForm​

是否是表单页面，如果是表单页面，建议开启这个选项

类型必填默认值
boolean否false

方法​

HOC(comp, option)​

高阶函数，用于创建页面的高阶组件，在上面的示例中有演示过，传入的option参数和组件本身的Props完全相同

add(el, option)​

向顶层容器添加元素，PullView、Modal等组件都是使用这个方案来实现的

import { TopView } from '@/duxapp'

const { update, remove } = TopView.add(<Text>添加的内容</Text>)

update(<Text>更换添加的内容</Text>) // 更新内容

remove() // 移除内容

传的el也可以是一个未实例化的组件，像下面这样用数组作为参数传入，数组的第二项将作为组件实例化的props

const Comp = ({ onSubmit }) => {
  return <Button onClick={onSubmit}>提交</Button>
}

const { remove } = TopView.add([
  Comp,
  {
    onSubmit: () => remove()
  }
])

这是一种常用的用法，用来将全局弹窗封装成Promise的方式进行调用

import { Card, Column, Form, PullView, Row, Text, TopView, UploadImages, loading, toast } from '@/duxui'
import { useCallback, useRef } from 'react'
import { request } from '@/chiananke'

export const LedgerSubmit = ({ onClose, onSubmit, id }) => {

  const pullView = useRef()

  const submit = useCallback(async data => {
    if (!data.images?.length) {
      return toast('请上传图片')
    }
    await request({
      url: `safe/risksCorrect/${id}`,
      data,
      method: 'PUT',
      loading,
      toast: true
    })
    onSubmit()
  }, [id, onSubmit])

  return <PullView ref={pullView} onClose={onClose}>
    <Form onSubmit={submit}>
      <Column className='rt-3 p-3 gap-3 bg-white'>
        <Row items='center' justify='between'>
          <Text color={3} onClick={() => pullView.current.close()}>取消</Text>
          <Text bold>整改照片</Text>
          <Form.Submit>
            <Text>确认</Text>
          </Form.Submit>
        </Row>
        <Card.Title className='mt-3'>上传附件</Card.Title>
        <Form.Item field='images'>
          <UploadImages />
        </Form.Item>
        <Column className='mt-3 pv-3' />
      </Column>
    </Form>
  </PullView>
}

LedgerSubmit.show = id => {
  return new Promise((resolve, reject) => {
    const { remove } = TopView.add([
      LedgerSubmit,
      {
        id,
        onSubmit: () => {
          remove()
          resolve()
        },
        onClose: () => {
          remove()
          reject()
        }
      }
    ])
  })
}

option参数

名称类型必填默认值说明
groupstring否分组 同一个分组内的弹窗 将会以队列的形式显示 也就是他会一个一个的展示，等上一个被移除时，才会显示下一个
pagenumber否标识，通常不需要指定 默认添加到当前页面

返回值

名称类型说明
update(el)(el: Element) => void用于更新元素
remove()() => void用于移除元素
keynumber当前添加元素的标识

removeAll()​

用于移除所有通过add()添加的内容，仅限当前页面

addContainer(comp, props)​

添加一个容器，容器可以控制页面是否显示，以及重写子元素，例如我们要给所有的页面添加一个背景图，那么就可以像下面这样

TopView.addContainer(({ children }) => {
  return <>
    <Image src={bg} className='absolute left-0 top-0 w-full' style={{ height: px(1280) }} />
    {children}
  </>
})

参数说明

名称类型必填默认值说明
compComponent是传入一个组件
propsobject否传给这个组件的props

主题配置​

weappRem​

配置 topView.weappRem

这个配置用于在小程序端开启使用rem单位的使用，可以用来更好的兼容pc端小程序，需要使用这个功能，需要配置Taro，将 targetUnit 切换为 rem

在模块中使用 taro.config.js 创建这样的内容

module.exports = {
  mini: {
    postcss: {
      pxtransform: {
        config: {
          targetUnit: 'rem'
        }
      }
    }
  }
}

同时需要在每个页面中配置 enablePageMeta: true，这个问题等待Taro处理，应该要能全局配置开启这个属性

weappRem默认未开启，可以传入true开启，或者可传入一个对象用于配置参数

配置参数说明

名称类型必填默认值说明
maxSizenumber否16最小fontSize
minSizenumber否28最大fontSize