Vue 组件库

基于 Vue 版本：3

配置

部分组件需要通过全局的配置来使用一些项目的本地变量，比如 APP 桥。组件库提供了工具函数 config。

import '@wings-j/vue-component/dist/index.css'
import { config } from '@wings-j/vue-component'
import Router from 'router'

config({
  router: Router
})

选项

| 名称 | 说明 | 类型 | 默认值 | | ------ | --------------- | ------ | --------- | | router | vue-router 实例 | Router | undefined |

主题

部分样式通过 CSS 变量的方式设置，所以通过变更 CSS 变量可修改组件主题，组件库提供了工具函数 theme。

import { theme } from '@wings-j/vue-component'

theme({
  'gray-normal': '#cccccc'
})

选项

| 名称 | 说明 | 默认值 | | --------------- | ---------- | ------- | | gray-normal | 灰色-普通 | #cccccc | | gray-border | 灰色-边框 | #f2f2f2 | | gray-background | 灰色-背景 | #f7f7f7 | | mask-opacity | 遮罩透明度 | 0.7 |

模块

组件

Markdown

Markdown 渲染。

| 名称 | 说明 | 类型 | 默认值 | | ----- | ---------------- | ------------------ | ------ | | src | markdown 源码 | string | | | image | 图片地址转换函数 | (v:string)=>string | |

指令

指令使用大驼峰引入，使用连字符调用。

示例：

import { BodyScrollBody } from '@wings-j/vue-component'

<div v-body-scroll-lock></div>

back

点击后退。

需要配置：

• router

body-scroll-lock

Body 滚动锁定。

keyboard-hide-blur

软键盘隐藏时失焦。

keyboard-show-hide

软键盘出现时隐藏。

safe-distance

顶部和底部安全距离。

默认在顶部使用padding添加安全距离。

选项：

| 名称 | 说明 | 类型 | | -------- | ------------------------- | ------ | | value | 间距。CSS 字符串 | string | | bottom | 底部 | | | position | 使用 CSS 的 position 属性 | |

原型

dialog

打开对话框。

async function dialog(component: any, props?: Record<string, any>, { cancelable = true, router, store }: Option = {}): Promise<any>

open

打开页面。

function open(this: { $router: Router }, route: RouteLocationNormalized): void

reset

重置组件数据。

function reset(this: any): void

wait

等待。

async function wait(this: ComponentPublicInstance, time: number): Promise<void>