1.3.0 • Published 1 year ago
@wings-j/vue-component v1.3.0
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): voidreset
重置组件数据。
function reset(this: any): voidwait
等待。
async function wait(this: ComponentPublicInstance, time: number): Promise<void>