destiny-ui v1.3.2

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 仅仅是在其上提供便捷模块的解决方案

安装使用

yarn add des-ui

项目目录-->main.ts

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'
})

DesButton

按钮

DesCell

单元格

DesCheckBox

多选框

DesInput

输入框

DesLogin

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

登录成功后会存储sessionStorage/localStorage——>>loginData，是登陆成功后后端返回的数据

后端接口返回数据格式要求

{
  code: 0,
  data: {},
  msg: ''
}

// code: 0为成功，-1为失败

// data:返回的数据

// msg:提示文本

DesNavbar

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

DesRegist

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

DesToast

弹框提示

DesToast

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

DesAxios

请求模块

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

Http

请求模块

自定义一个 utils/api.ts

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

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

地图选点组件

腾讯：用以地图选点

高德：用以解析腾讯选点后的结果

Element-plus

融合 element-plus UI组件库

DOC: https://element-plus.gitee.io/#/zh-CN/component/button "element-plus 中文文档"

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