@wings-j/vue-component

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>