Skip to content

Commit

Permalink
docs: 更新readme和tooltip说明
Browse files Browse the repository at this point in the history
  • Loading branch information
dyggod committed Dec 15, 2022
1 parent f8e848c commit 1fb570c
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 8 deletions.
26 changes: 18 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,50 @@
<a href="https://npmcharts.com/compare/dg-design-vue?minimal=true">
<img src="https://img.shields.io/npm/dm/dg-design-vue.svg">
</a>
<a href="https://sonarcloud.io/">
<img src="https://sonarcloud.io/api/project_badges/measure?project=dyggod_dg-ui&metric=alert_status">
</a>
<br>
</p>

<p align="center">一个基于 Vue.js 3 的组件库,提供一些奇思妙想的小玩意儿</p>

## 介绍
+ 💪 Vue3 Composition API
+ 🔥 使用 TypeScript 开发
+ 😂 一些有意思的组件,那年我双手插兜...不知什么叫对手

## 介绍 📖

DG-UI 是由个人开发的 vue3 组件库,你可以在这里看到很多非严肃的、有意思的小组件,它或许不适用于企业级生产,但是你用于个人生产的绝妙宝库
DG-UI 是由个人开发的 vue3 组件库,不同于其他组件库是为了帮助开发者实现企业级生产,比如做一个后台管理系统。DG-UI 同样会提供一些常用的基础组件,但更多的是提供一些古灵精怪的想法和思路以及作者收集来的一些有意思的效果,所以你可以在这里看到很多非严肃的、趣味的小组件,它或许不适用于企业级生产,但会是你用于个人生产的绝妙宝库

## 文档 👇
[在线文档](https://dyggod.github.io/dg-ui/)

## 起步
## 起步 🚀

### 通过包管理器安装

```
# 选择一个你喜欢的包管理器
# 选择一个你喜欢的包管理器,推荐使用 pnpm
# PNPM
$ pnpm install dg-design-vue --save
# NPM
$ npm install dg-design-vue --save
# Yarn
# YARN
$ yarn add dg-design-vue
# pnpm
$ pnpm install dg-design-vue --save
```

### 使用

在项目主文件中引入

main.ts or main.js

```
// main.ts or main.js
import { createApp } from 'vue'
import DgUi from 'dg-design-vue'
import 'dg-design-vue/dist/style.css'
Expand Down
28 changes: 28 additions & 0 deletions docs/docs/components/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,34 @@

:::

## 禁用状态

通过 `disabled` 属性设置禁用状态。当是禁用状态时,不会触发提示框,即便设置 `:visible="true"` 也不会显示。

<div class="example">
<div>
<dg-tooltip content="提示文字" disabled>
<dg-button type="primary">禁用状态</dg-button>
</dg-tooltip>
</div>
</div>

::: details 显示代码

```vue
<template>
<div>
<div>
<dg-tooltip content="提示文字" disabled>
<dg-button type="primary">禁用状态</dg-button>
</dg-tooltip>
</div>
</div>
</template>
```

:::

## 触发方式

通过 `trigger` 属性设置触发方式,可选值为 `hover``click``contextmenu`, 默认为 `hover`
Expand Down

0 comments on commit 1fb570c

Please sign in to comment.