# destiny-ui

> destiny-ui, des-ui的打包版本 新增 Verify、Crypt

Latest version **1.3.2** (published 2021-01-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install destiny-ui
pnpm add destiny-ui
yarn add destiny-ui
bun add destiny-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2021-01-15 |
| First published | 2021-01-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | destiny_zxj |
| Maintainers | destiny_zxj |
| Keywords | destiny-ui |

## Links

- npm: https://www.npmjs.com/package/destiny-ui
- npm.io page: https://npm.io/package/destiny-ui

## Recent versions

- 1.3.2 (latest) — 2021-01-15
- 1.3.1 — 2021-01-15
- 1.3.0 — 2021-01-13
- 1.2.1 — 2021-01-13
- 1.2.0 — 2021-01-13
- 1.1.2 — 2021-01-13
- 1.1.1 — 2021-01-13
- 1.1.0 — 2021-01-13

## README

# Destiny ui
>作者： @曾小杰
>
>时间： 2020/12/16

## 介绍

Destiny-ui

* Vue3
* Typescript
* 样式引入：import 'destiny-ui/dist/destiny-ui.css'
* 项目必须有 vue-router 支持（有些组件用到vue-router，此时必须用未打包版本）
* 仅支持按需引用
* ui 组件库使用 element-plus，destiny-ui 仅仅是在其上提供便捷模块的解决方案

## 安装使用

```bash
yarn add des-ui
```

> 项目目录-->main.ts

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// ...省略代码
const app = createApp(App)
// ... 省略代码
app.use(router)

import 'destiny-ui/dist/destiny-ui.css'  // destiny-ui（打包版本，将以下 des-ui 替换为 destiny-ui）
// ------*一般组件(见下表)
import { DesButton } from 'des-ui'
app.use(DesButton)
// ------*Component(见下表)
import { DesButtonComponent } from 'des-ui'
app.component(DesButtonComponent.name, DesButtonComponent)
// ------*Api组件(见下表)
import { DesToast } from 'des-ui'
app.config.globalProperties.DesToast = DesToast

DesToast.show({
  msg: '这是一个Toast',
  duration: 3000,
  icon: 'info'
})
```

| 一般组件    | Component            | Api组件  |
| ----------- | :------------------- | -------- |
| DesButton   | DesButtonComponent   | DesToast |
| DesCheckBox | DesCheckBoxComponent | DesAxios |
| DesInput    | DesInputComponent    | Http     |
| DesLogin    | DesLoginComponent    |          |
| DesNavbar   | DesNavbarComponent   |          |
| DesRegist   | DesRegistComponent   |          |



### DesButton

> 按钮

| 属性    | 说明     | 值                                                           |
| ------- | -------- | ------------------------------------------------------------ |
| type    | 按钮类型 | String/default、primary、info、danger、<br />warning、disable、clickable |
| value   | 按钮文本 | String/确定                                                  |
| size    | 按钮大小 | String/default、small、medium、large、full                   |
| disable | 是否禁用 | Boolean/false、true                                          |

| 事件     | 说明         | 使用              |
| -------- | ------------ | ----------------- |
| desClick | 单击按钮事件 | @desClick="myFun" |

### DesCell

> 单元格

### DesCheckBox

> 多选框

| 属性    | 说明         | 值                  |
| ------- | ------------ | ------------------- |
| v-model | 双向数据绑定 | Boolean/false、true |
| text    | 标签文本     | String              |

### DesInput 

> 输入框

| 属性          | 说明                 | 值                                                     |
| ------------- | -------------------- | ------------------------------------------------------ |
| struct        | 左右结构或者上下结构 | String/up_down、left_right、left_right_icon            |
| type          | 输入框类型           | String/text、password、number、email、ipv4、url、phone |
| placeholder   | 同input->placeholder | String                                                 |
| maxLength     | 同input->maxLength   | Number                                                 |
| label         | 标签文本             | String                                                 |
| require       | 是否显示红星         | Boolean/false、true                                    |
| leftIcon      | 左边图标             | String                                                 |
| clearable     | 是否启用一键清除     | Boolean/false、true                                    |
| disable       | 是否禁用             | Boolean/false                                          |
| rightIcon     | 右边图标             | String                                                 |
| pattern       | 值检验正则表达式     | RegExp                                                 |
| errorTag      | 是否启用错误提示     | Boolean/false、true                                    |
| errorMsg      | 错误提示文本         | String                                                 |
| value/v-model | 值双向数据绑定       | String                                                 |

| 事件     | 说明         | 使用                |
| -------- | ------------ | ------------------- |
| desInput | 监听输入事件 | @desInput=“onInput” |
|          |              |                     |
|          |              |                     |

### DesLogin

> 登录模块(!仅 des-ui<未打包版本> 支持)
>
> 登录成功后会存储sessionStorage/localStorage——>>loginData，是登陆成功后后端返回的数据

> 后端接口返回数据格式要求
>
> ```json
> {
>   code: 0,
>   data: {},
>   msg: ''
> }
> ```
>
> // code: 0为成功，-1为失败
>
> // data:返回的数据
>
> // msg:提示文本

| 属性          | 说明                 | 值               |
| ------------- | -------------------- | ---------------- |
| title         | 显示标题             | String/欢迎登录  |
| registUrl     | 注册页面Url          | String/'/regist' |
| fogotUrl      | 重置密码Url          | String/‘/forgot’ |
| loginUserName | 登录用户名标签文本   | String/手机号码  |
| baseUrl       | 同axios的baseUrl     | String           |
| loginUrl      | 登录接口api          | String           |
| headers       | 用户自定义请求头     | Object           |
| params        | 用户自定义请求参数   | Object           |
| data          | 用户自定义请求数据   | Object           |
| username      | 登录用户名字段名     | String/username  |
| password      | 登录密码字段名       | String/password  |
| redirectUrl   | 登录成功后跳转的路由 | String/'/'       |

### DesNavbar

> 顶部导航栏(!仅 des-ui<未打包版本> 支持)

| 属性     | 说明             | 值               |
| -------- | ---------------- | ---------------- |
| backIcon | 左边返回图标     | String/icon-back |
| backText | 左边返回文字     | String/返回      |
| title    | 中间标题文字     | String           |
| menu     | 右边菜单：未开放 | Object           |

###  DesRegist

> 注册模块(!仅 des-ui<未打包版本> 支持)

| 属性        | 说明                              | 值                    |
| ----------- | --------------------------------- | --------------------- |
| type        | 页面类型                          | String/regist、forgot |
| protocol    | 服务协议                          | String                |
| baseUrl     | 同axios——>>baseUrl                | String                |
| requestUrl  | 请求api                           | String                |
| headers     | 用户自定义请求头                  | Object                |
| params      | 用户自定义请求参数                | Object                |
| data        | 用户自定义请求数据                | Object                |
| codeUrl     | 获取验证码的api                   | String                |
| codeParams  | 获取验证码api的用户自定义请求参数 | Object                |
| codeData    | 获取验证码api的用户自定义请求数据 | Object                |
| redirectUrl | 注册、重置密码成功后跳转url       | String/‘/login’       |

### DesToast

> 弹框提示
>
> DesToast

| 方法    | 说明       | 使用                      |
| ------- | ---------- | ------------------------- |
| show    | 普通展示   | DesToast.show(options)    |
| loading | 带加载图标 | DesToast.loading(options) |
| success | 带成功图标 | DesToast.success(options) |
| fail    | 带失败图标 | DesToast.fail(options)    |

```typescript
options: 
	msg?: string // 提示文本，必须
  type?: string // 类型，仅show()
  icon?: string // 图标，仅show()
  duration?: number // 显示时长，默认2000ms
```

### DesAxios

> 请求模块

| 属性    | 说明             | 值                        |
| ------- | ---------------- | ------------------------- |
| baseUrl | axios——>>baseUrl | DesAxios.baseUrl = '/api' |

| 方法    | 说明               | 使用                             |
| ------- | ------------------ | -------------------------------- |
| GET     | 发起get请求        | DesAxios.GET(url[, options])     |
| POST    | 发起post请求       | DesAxios.POST(url[, options])    |
| REQUEST | 发起请求/get、post | DesAxios.REQUEST(url[, options]) |

```typescript
url: // 请求url
options: // 选项
  method?: string // 请求方法，仅REQUEST
  headers?: object // 请求头
  params?: object // 请求参数
  data?: object // 请求数据
```

### Http

> 请求模块

> 自定义一个 utils/api.ts

```typescript
import { Request, Response, Http } from 'destiny-ui'

class Api{
  //example
  public static getUserInfo(params?: any): Promise<Response> {
    // return this.requestFailed();
    const request = new Request('/user/getUserInfo');
    if (params) request.params = params
    return Http.request(request);
  }
}
export { Api, Response}
```

> 调用 xxx.vue

```typescript
import { Api, Response } from '@/utils/api';
// ...
const params = {
  uid: 101
}
Api.getUserInfo(params).then((res: Response) => {
  console.log(res)
}).catch((err: any) => { console.error(err) })
```

### DesTmap

> 地图选点组件
>
> 腾讯：用以地图选点
>
> 高德：用以解析腾讯选点后的结果

| 属性     | 说明               | 值     |
| -------- | ------------------ | ------ |
| ttmapKey | 腾讯地图开发者密钥 | appKey |
| ggmapKey | 高德地图开发者密钥 | appKey |
| appName  | 应用名称(腾讯)     | myapp  |

| 事件       | 说明                             | 使用                                    |
| ---------- | -------------------------------- | --------------------------------------- |
| getMapData | 选择位置后回调，参数为返回的数据 | @getMapData="myGetDataCallbackFunction" |

## Element-plus

> 融合 element-plus UI组件库
>
> [DOC]: https://element-plus.gitee.io/#/zh-CN/component/button	"element-plus 中文文档"

```typescript
// main.ts
import { ElButton } from 'destiny-ui'
...
app.component('e-button', ElButton)
```

---
_Source: https://npm.io/package/destiny-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._