destiny-ui

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

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

DesButton

按钮

属性	说明	值
type	按钮类型	String/default、primary、info、danger、 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，是登陆成功后后端返回的数据

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

{
  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)

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])

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

地图选点组件

腾讯：用以地图选点

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

属性	说明	值
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 中文文档"

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