admall-ui v0.1.95

颜色变量

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

头像展示组件

Button

按钮, 支持防抖功能

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

Card

卡片组件

Checkbox

复选框组件

DatetimePicker

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

Picker Options说明

Dialog

弹出框组件

Field

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

Input

输入框组件

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

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

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

插槽

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

Link

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

页码组件

Radio

复选框组件

Scene

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

Select

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

selectValue

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

selectItem

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

SmsCode

验证码组件, 全局通用

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

Space

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

Steps

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

Table

表格组件

columns 属性

slot

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

单元格插槽:

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

列头插槽:

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

Tabs

tab 切换组件

插槽

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

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

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

Textarea

文本域组件

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

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事件, 不建议对此函数进行操作