Destiny ui

作者： @曾小杰

时间： 2020/12/16

介绍

Destiny-ui

• Vue3

• Typescript

• 项目必须有 vue-router 支持(创建vue项目时选择 ‘vue-router’)

• 仅支持按需引用

安装使用

yarn add des-ui
yarn add vue-router

项目目录-->main.ts

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

// ------*一般组件(见下表)
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 | | | 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

登录模块

登录成功后会存储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

顶部导航栏

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

DesRegist

注册模块

| 属性 | 说明 | 值 | | ----------- | --------------------------------- | --------------------- | | 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 // 请求数据

DesTmap

地图选点组件

| 属性 | 说明 | 值 | | -------- | ------------------ | ---- | | ttmapKey | 腾讯地图开发者密钥 | | | ggmapKey | 谷歌地图开发者密钥 | |

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