des-ui

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"