1.2.0 • Published 4 years ago
remax-vant v1.2.0
Remax Vant
使用 Remax
移植 vant-weapp
组件库。
Getting Start
安装依赖
yarn
调试项目
# 执行调试命令
yarn dev
使用小程序开发者工具打开项目下的 dist
目录
构建
# 执行构建命令
$ yarn compile
移植进度
基础组件
- Button
- Cell
- Icon
- Image
- Layout
- Popup
- Transition - 独立实现,与原版几乎无任何关联
表单组件
- Calendar
- Checkbox
- DatetimePicker
- Field
- Picker - 与原版差异巨大,尚未确认是否影响依赖组件使用
- Radio
- Rate
- Search
- Slider
- Stepper
- Switch
- Uploader
反馈组件
- ActionSheet
- Dialog
- DropdownMenu
- Loading
- Notify - 与原版实现有差异,参见新文档
- Overlay
- SwipeCell
- Toast - 与原版实现有差异,参见新文档
展示组件
- Circle
- Collapse
- Divider
- NoticeBar
- Panel - 实现有较大差异
- Progress
- Skeleton
- Steps
- Sticky - 暂未支持
scrollTop
属性绑定 - Tag
- TreeSelect
导航组件
- Grid - 实现有较大差异,待确认是否保持一致
- IndexBar - 暂不支持
sticky anchor
,后续处理 - Sidebar
- Navbar
- Tab
- Tabbar
业务组件
- Area
- Card
- SubmitBar
- GoodsAction
Tips
如何新建移植模块?
使用 remax-vant-cli
工具包,目前功能受限,新建模块如下:
# 创建模块
remant create radio;
# 不创建预览界面
remant create radio-group --ignore-page;
如何处理 style property
空值?
使用 pickStyle
工具函数处理,推荐使用方式如下:
const stylesheets: Record<string, CSSProperties> = {
container: pickStyle({
maxWidth: maxWidth,
minWidth: minWidth,
}),
};
如何处理默认值填充?
类型声明分为如下部分:
// 默认值填充属性
interface NeutralSliderProps {}
// 不包含默认值属性
interface ExogenousSliderProps {}
type SliderProps = NeutralSliderProps & ExogenousSliderProps;
默认值填充使用 withDefaultProps
高阶函数进行处理,示例如下:
export default withDefaultProps<ExogenousSliderProps, NeutralSliderProps>(
DefaultSliderProps
)(Slider);
如何使用自定义 class
?
remax-vant
使用 react
进行重写,不再包含小程序自定义组件样式隔离机制,无需独立暴露 external classnames
,多数组件直接使用 className
传递类名,部分内部 class hook
类尚未实现。
如何声明 size ?
避免不必要麻烦,remax-vant
限定 size
指定使用带单位的字符串,切勿使用快捷数字:
<Icon name="chat" size="32px" color="#3489fa" />
如何暴露事件监听函数?
remax-vant
不包含小程序特定事件机制,与常规事件暴露相同,回调函数透传 event
,无需额外包装。
如何配置颜色属性?
推荐使用 css variables
传递主题色,不建议跨层级 inline style
实现。
vant-weapp
自定义组件 class
移植?
自定义组件理解为 web component
,class
会正常附着容器上,移植时,使用额外 view
包装。
待处理
id
business-id
目测与行为监控有关,后续处理wx://form-field
如何使用或者如何替换???dataset
传递使用event.currentTarget.dataset
使用,原因不明