颜色变量

admall-ui中使用了一下颜色变量, 请在项目中提前设置

$main-color: #ff7e12; // 主色
$main-color2: #3d7fff; // 辅助色

$border-color: #dadada; // 边框主色
$border-color2: #f0f2f5; // 边框辅助色

$font-color: #333; // 文字主色
$font-color2: #666; // 文字辅助色
$font-color3: #999; // 文字辅助色

$primary-color: #ff7e12; // 主色
$success-color: #38bd0e; // 成功
$warning-color: #ffa217; // 警告
$error-color: #ff2200; // 错误
$tips-color: #909399; // 提示

$link-color: #3d7fff;

Alert

该组件引入后可以通过自定义方法显示一个弹出确认框, 返回 Promise 对象

this.$alert(options)             默认显示不带图标的弹窗
this.$alert.success(options)     带有成功图标的弹窗
this.$alert.error(options)       带有错误图标的弹窗
this.$alert.warning(options)     带有警告图标的弹窗
this.$alert.tips(options)        带有提示图标的弹窗

options

{
  title:'', // 弹窗标题,
  content:'',//弹窗内容,
  confirmText:''// 确认按钮文字
  cancelText:''// 取消按钮文字
}

案例:

async function alert() {
  try {
    await this.$alert({
      title: '删除提示',
      content: '确定要删除该文件吗',
      confirmText: '确定删除',
      cancelText: '我再想想',
    });
    console.log('confirm');
  } catch (e) {
    console.log('cancel');
  }
}

Avatar

头像展示组件

| props | 类型 | 描述 | | ----- | ------ | -------------------------------------------------- | | src | String | 头像路径,如果路径对应的资源加载失败,会显示默认头像 | | size | String | 头像尺寸 |

Button

按钮, 支持防抖功能

| props | 类型 | 描述 | | ----------- | --------------- | --------------------------------------------------------------------------------------------------------- | | wait | [String,Number] | 设置防抖功能, 如果添加了这个属性, 默认防抖间隔为 1000 毫秒, 可以使用wait=200的格式重新设置防抖间隔 | | w,width | [String,Number] | 按钮宽度 | | prefix-icon | String | 前置 icon | | primary | Boolean | 主色调按钮 | | error | Boolean | 错误样式按钮 | | warning | Boolean | 警告样式按钮 | | success | Boolean | 成功样式按钮 | | border | Boolean | 线框型按钮 | | disabled | Boolean | 禁用按钮钮 | | auto | Boolean | 默认情况下,按钮宽度为父级元素的 100%, 设置auto为true的时候, 按钮元素会添加width:auto属性 |

| slots | 作用 | | ------- | ---- | | default | 内容 |

<adm-button>普通按钮</adm-button> <adm-button wait>防抖按钮</adm-button>

Card

卡片组件

| props | 类型 | 描述 | | ----- | ------ | ------------------------------------------ | | title | String | 卡片标题, 如果设置为空字符串, 会隐藏标题栏 |

| slots | 作用 | | -------- | ---------- | | default | 内容 | | subtitle | 副标题部分 |

Checkbox

复选框组件

| props | 类型 | 描述 | | -------- | ---------------- | --------------------------------------------------------- | | v-model | [Boolean, Array] | 必须是布尔值或者数组 | | label | [String,Number] | 如果 v-model 是数组,label 将作为判断是否被选中的条件,必传 | | disabled | Boolean | 是否禁用组件 | | readonly | readonly | 限制组件只读 |

DatetimePicker

日历组件,暂时仅支持年月日

| props | 类型 | 描述 | | ----------- | ---------------- | ---------------- | | v-model | [Boolean, Array] | 绑定值 | | placeholder | String | 提示语 | | clearable | Boolean | 是否显示清空按钮 | | year | Boolean | 年份选择器 | | month | Boolean | 年月选择器 | | date | Boolean | 年月日选择器 | | width,w | String | 组件宽度 | | Picker Options | Object | 组件宽度 | Picker Options说明

| props | 类型 | 描述 | | ----------- | ---------------- | ---------------- | | disabledDate| Function | 设置禁用状态，参数为当前日期，要求返回 Boolean |

| event | 作用 | | ------- | ---------- | | @change | 值改变事件 |

Dialog

弹出框组件

| props | 类型 | 描述 | | ------------ | ------- | -------------- | | visible.sync | Boolean | 是否显示弹出框 | | title | String | 标题 |

| slot | 作用 | | ------- | ---------------- | | header | 自定义头部内容 | | default | 自定义弹出框内容 |

| methods | 作用 | | -------- | -------------- | | vm.close | 弹出框关闭事件 |

Field

表单字段组件,支持 v-model

| props | 类型 | 描述 | | ---------- | ---------------- | ------------------------------------ | | required | Boolean | 是否显示星号 | | inline | Boolean | 默认 false, label 与表单内容水平布局 | | vertical | Boolean | 默认 false, label 与表单内容垂直布局 | | label | String | 字段名称 | | labelWidth | [String, Number] | 字段名称占用的宽度, 数字或者百分比 | | left | Boolean | 默认属性, label 内的文字靠左对齐 | | center | Boolean | label 内的文字居中对齐 | | right | Boolean | label 内的文字靠右对齐 | | top | Boolean | label 内的文字靠顶部对齐 | | msg | String | 字段提示内容 | | err | String | 字段错误警告内容 |

| slots | 作用 | | ------- | ---- | | default | 内容 |

Input

输入框组件

| props | 类型 | 描述 | | ----------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | | format | String | 限制输入框类型, 4表示仅允许 4 位整数,4.2表示仅允 许 4 位整数和 2 位小数, .3表示整数不限制,小数限制 3 位 | | prefix-icon | String | 前置 icon | | left | Boolean | 文本内容左对齐 | | center | Boolean | 文本内容居中对齐 | | right | Boolean | 文本内容右对齐 | | label | String | 输入框内左侧提示语 | | right | Boolean | 文本内容右对齐 | | readonly | Boolean | 只读输入框 | | disabled | Boolean | 被禁用输入框 | | clearable | Boolean | 显示清空按钮 | | mini | Boolean | 小型输入框,高度 22px | | w,width | [String,Number] | 数字类型字符串或数字,定义输入框宽度 | | data | Array[String] | 如果提供了这个属性,且属性值 length 大于 0, 会在获取焦点的时候,打开被备选框 |

| event | 描述 | | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @input | - | | @enter | 回车事件 | | @change | 输入框的值发生改变事件, fn(v,isSelectedOption=false), v: 当前值, isSelectedOption:当点击备选值得时候,该参数值为 true, 主要是为了避免change事件恶性循环, 使用者可以根据这个参数来判断是否执行真正的change事件 |

<!-- 只能输入4位整数 -->
<adm-input format="4" />

<!-- 只能输入4位整数和2位小数 -->
<adm-input format="4.2" />

<!-- 限制2位小数 -->
<adm-input format=".2" />

插槽

| event | 描述 | | ------- | ------------------------------------------------- | | default | 默认插槽, 会显示在真实输入框右侧,一般用来显示单位 |

<adm-input label="年龄" format="4.2">岁</adm-input>

Link

| props | 类型 | 描述 | | ----------- | --------------- | --------------------------------------------------------------------------------------------------------- | | wait | [String,Number] | 设置防抖功能, 如果添加了这个属性, 默认防抖间隔为 1000 毫秒, 可以使用wait=200的格式重新设置防抖间隔 | | prefix-icon | String | 前置 icon | | primary | Boolean | 主色调文本 | | error | Boolean | 错误样式文本 | | warning | Boolean | 警告样式文本 | | success | Boolean | 成功样式文本 |

| slots | 作用 | | ------- | ---- | | default | 内容 |

Message

该组件引入后可以通过自定义方法显示一个消息提示窗, 有三种类型, 例子

this.$message(msg text)             默认是成功弹窗
this.$message.success(msg text)     成功弹窗
this.$message.error(msg text)       错误弹窗
this.$message.warning(msg text)     警告弹窗
this.$message.tips(msg text)        提示弹窗

Notify

该组件引入后可以通过自定义方法显示一个通知提示框, 通知框没有数量限制, 但是在超出当前屏幕可是高度时, 会自动缓存起来, 随着关闭通知框的操作再依次展示

this.$notify(options)             默认是成功弹窗
this.$notify.success(options)     成功弹窗
this.$notify.error(options)       错误弹窗
this.$notify.warning(options)     警告弹窗
this.$notify.tips(options)        提示弹窗

options

{
  title:'', // 通知标题,
  content:'',//通知内容,
  buttonText:''// 按钮文字
  buttonCallback:''// 按钮事件, 按钮文字和按钮事件同时存在时, 才会显示按钮
  meta:{}// 其他数据, 这里的数据会当做参数传递给buttonCallback事件
}

案例:

this.$notify({
  title: '通知',
  content: '您的剩余时间已不多, 请及时充值',
  buttonText: '我知道了',
  buttonCallback: (data) => {
    console.log(data); // data内容与meta相同
  },
  meta: {
    name: 'zhangsan',
  },
});

Pager

页码组件

| props | 类型 | 描述 | | -------- | ------ | ------------ | | pageSize | Number | 每页展示数量 | | pageNo | Number | 当前页码 | | total | Number | 总数量 | | pageSizes| [Number] | 每页显示个数选择器 | | jumper | Boolean| 是否显示前往*页组件 |

| event | 描述 | | ------------- | ------------ | | pageNoChanged | 页码改变事件 | | pageSizeChanged | pageSize 改变时会触发 |

Radio

复选框组件

| props | 类型 | 描述 | | -------- | --------------- | ---------------------------------------------------- | | v-model | [String,Number] | | | label | [String,Number] | 当 label 严格等于 v-model 的值时, 单选框处于选中状态 | | disabled | Boolean | 是否禁用组件 | | readonly | readonly | 限制组件只读 |

Scene

场景组件, 该组件主要目的是为了减少 CSS 工作量, 和快速部署 flex/栅格化布局, 组件不支持的 CSS 属性,请在 CSS 中另行设置

| props | 类型 | 描述 | | ------ | ----------------- | -------------------------------------- | | flex | Boolean | 设置 flex 布局 | | column | Boolean | flex 垂直布局 | | wrap | Boolean | flex 内允许换行 | | grow | [Boolean, String] | 允许元素本身自动增长 | | shrink | Boolean | 允许元素本身在控件不够的情况下缩小尺寸 | | fixed | Boolean | 不允许元素本身增长或者被挤压 | | fill | Boolean | 设置所有的子元素自动按比例扩展尺寸 | | left | Boolean | flex 时设置子元素水平左对齐 | | right | Boolean | flex 时设置子元素水平右对齐 | | center | Boolean | flex 时设置子元素水平居中对齐 | | top | Boolean | flex 时设置子元素垂直左对齐 | | bottom | Boolean | flex 时设置子元素垂直左对齐 | | middle | Boolean | flex 时设置子元素垂直左对齐 | | width | [String, Number] | 设置元素宽度 | | w | [String, Number] | 设置元素宽度 | | p | [String, Number] | 设置元素 padding 值 | | pl | [String, Number] | 设置元素 padding-left 值 | | pr | [String, Number] | 设置元素 padding-right 值 | | pt | [String, Number] | 设置元素 padding-top 值 | | pb | [String, Number] | 设置元素 padding-bottom 值 |

Select

下拉框组件,支持多级下拉框

| props | 类型 | 描述 | | ------------ | --------------- | ------------------------------------------------------------------------------------------------------------------ | | data | Array | 数据来源 | | labelNode | String | 默认值name, 这个字段属性的值会显示在列表中 | | keyNode | String | 默认值id , 这个字段功能等同于 vue 的 key 属性, 不能有重复的 key 值 如果你的数据内没有id属性,需要自行定义 | | valueNode | String | 默认值id, 这个字段决定了组件的返回值 | | childrenNode | String | 默认值children, 多级联动时,这个字段决定了子级数据的来源 | | placeholder | String | 同 input 的 placeholder 属性 | | clearable | Boolean | 设置显示清空按钮 | | disabled | Boolean | 设置禁用按钮钮 | | w,width | [String,Number] | 数字类型字符串或数字,定义输入框宽度 | | range | [String,Number] | 限制用户选择层次, 比如该值为 3, 用户只点击前两层会无效 |

| event | 描述 | | ------- | ------------------------------------------------------ | | @change | 下拉框值改变事件, 返回两个参数(selectValue,selectItem) |

| methods | 描述 | | --------------- | ---------------------- | | vm.getFullValue | 获取用户选择的具体内容 |

selectValue

selectValue 表示用户当前选中项中对应value-node的属性值

selectItem

selectItem 表示用户当前选中项中所有的属性值

SmsCode

验证码组件, 全局通用

| props | 类型 | 描述 | | ------ | -------- | -------------------------------------------------- | | range | Number | 倒计时周期, 默认 60 秒 | | mobile | String | 手机号码, 必传, 如果号码格式错误, 会导致按钮被禁用 | | api | Function | 要调用的接口函数 |

| event | 描述 | | -------- | ---------------- | | @success | 接口调用成功事件 | | @error | 接口调用失败事件 |

// 注意, 这里的函数不需要处理axios的错误, 错误会抛出给smscode组件
export default {
  async getSmsCode() {
    await this.$axios.$post('/admall-user/api/login/smscode-register', {
      phone: this.smsLogin.account,
    });
  }
},

Space

占位符组件, 在不想写padding或者margin时,最为又用

| props | 类型 | 描述 | | -------- | --------------- | ------------------ | | w/width | [String,Number] | 数字, 定义组件宽度 | | h/height | [String,Number] | 数字,定义组件高度 |

Steps

步骤条 | props | 类型 | 描述 | | --------- | ----------------| ------------------------ | | data | Array | 步骤条数据来源 | | active | [String,Number] | 当前激活步骤 | | background| String | 步骤条背景颜色，默认'#fff' |

Table

表格组件

| props | 类型 | 描述 | | ------- | ----- | ------ | | data | Array | 数据源 | | columns | Array | 列数据 |

columns 属性

| props | 类型 | 描述 | | ----- | ------ | --------------------------------------------------- | | label | String | 列头文字 | | prop | String | 列 key, 自动从每行数据中获取该 key 对应的字段值展示 | | width | String | 设置列宽度, 该宽度设置后,列宽会固定 |

slot

插槽分为两种, 一种是列头的插槽, 一种是单元格插槽,

单元格插槽:

<template #prop="{row, index}">
  <!-- row 单行数据 -->
  <!-- index  行索引 -->
  <!-- data  全部数据 -->
</template>

列头插槽:

<template #prop_th="{row, index}">
  <!-- col 列信息 -->
  <!-- index 列索引 -->
  <!-- data  全部数据 -->
</template>

Tabs

tab 切换组件

| props | 类型 | 描述 | | ----------- | ---------------- | ------------------------------------------------------- | | data | Array | 标签数据来源[{name:'',label:''}] | | border | Boolean | 显示下方下划线 | | background | Boolean | 显示背景色和边框 | | background | Boolean | 显示背景色和边框 | | labelWidth | [String, Number] | 自定义标签宽度 | | defaultName | String | 默认显示的标签页,必须是 data 中某一条数据的 name 属性值 |

| event | 描述 | | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- | | change | tab 切换事件, 如果监听了该事件, tab 不会自动切换, 主动权交给使用者 使用者可以通过修改defaultName的值,来触发组件真实显示的内容 |

插槽

Tab 组件的插槽与 data 中的name 属性相关

{
  dict: [
    {
      name: 'onway',
      label: '已发货',
    },
    {
      name: 'confirmed',
      label: '已收货',
    },
  ];
}

<adm-tabs>
  <template #onway="">
    <!-- ...tab1 -->
  </template>
  <template #confirmed="">
    <!-- ...tab2 -->
  </template>
</adm-tabs>

Textarea

文本域组件

| props | 类型 | 描述 | | ----------- | ------- | ---------------------------- | | v-model | String | 双向绑定 | | height,h | String | 文本域高度 | | msg | String | 文本域下方, 额外的提示语信息 | | placeholder | String | 文本域内的提示信息 | | disabled | Boolean | 禁用文本域 |

| event | 描述 | | ------- | -------- | | @input | - | | @enter | 回车事件 | | @change | - |

Upload

上传组件, 支持进度回调, 支持整体引入和单组件引入

使用组件前, 要在use方法中,传入 OSS 参数

整体引入:

import AdmallUi from 'admall-ui'
Vue.use(AdmallUi, {
  upload:{
    prefix:  // 上传路径前缀, 组件内实际生成的fileName为`${prefix}/${path}/20210915/hash.文件后缀`
    buckets:[
        {
          region:bucket所属区域,
          bucket: bucket名称
        }
    ],
    refreshToken: { //获取OSStoken的异步函数, 必须返回以下内容
         accessKeyId:'',
        accessKeySecret:'',
        stsToken:'',
    }
  }
})

| props | 类型 | 是否必传 | 描述 | | ---------- | ------- | -------- | -------------------------------------------------------- | | accept | String | | 允许上传的文件类型默认为'*', 比如:'.jpg,.png,.gif,.mp4' | | path | String | | prefix与日期中间的路径 | | bucket | String | | bucket 名称 | | multiple | Boolean | | 设置允许选择多个文件, 必须与 maxLength 配合使用 | | maxLength | Boolean | | 最大上传文件数量 | | progress | String | | 是否显示自带的上传进度 UI | | beforeUpload|Function| | (files, next) 第一个参数表示用户选择的所有文件, 自行处理后, 需要调用next函数,并传入新的files才能继续执行

| event | 描述 | | --------- | -------------------------------------------- | | @change | 上传进度回调 (fileList) | | @progress | 上传进度回调 (progress, checkpoit, fileList) | | @error | 上传错误回调, (reuslt,fileList) |

| method | 描述 | | --------- | -------------------------------------------- | | trigger | 模拟触发上传 |

result:

{
  code, //错误码  1001=超过文件最大数量, 1002=文件已存在, 1002=单个文件上传失败, 1004=单个文件超限, 1005=总文件超限, 1006 文件格式不符合要求
  msg, //错误文字信息
}

fileList:

  hash, //hash散列值, 当前上传组件中的唯一ID, 自定义UI组件时, 推荐使用该值去对比文件是否存在,或者更新文件信息,
  file, // 实际文件内容, File对象
  fileName, // 上传的真实路径
  progress,//  0-1, 仅表示上传进度, 不能用这个值表示上传是否成功
  success, // boolean,  上传是否成功, 当success为true的时候, 才能使用fileName获取文件
  error, // 表示该文件上传出现了错误
  remove, // fn, 从组件中删除该文件
  callback,//  fn, 进度回调函数, 该函数中触发了@progress事件, 不建议对此函数进行操作