MineAdmin

内置组件

提示

目前我们封装了一些常用组件，以后也会增加更多的组件提供大家使用，我们也支持独家组件开发定制。

上传组件 MaUpload

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString, Array, Object上传数据，双向绑定是
titleString上传按钮显示文案'文件上传'
iconString上传按钮显示图标'iconPlus'
roundedBoolean是否为圆角样式false
multipleBoolean是否可以多选上传false
disabledBoolean是否为禁用状态false
sizeNumber上传大小限制（分块上传无效）4 * 1024 * 1024
chunkBoolean是否为分块上传false
chunkSizeNumber每次分块上传大小1 * 1024 * 1024
limitNumber多选上传最多限制最大数量，0为不限制0
tipString提示文案-
type'image', 'file'上传类型'image'
acceptStringmimeType类型'*'
onlyUrlBoolean是否只返回urltrue
fileType'drag', 'button'上传文件显示方式'button'
showListBoolean是否显示已上传文件列表（type为image生效）true

组件使用

<template>
    <ma-upload v-model="images" />
    <div>图片：{{ images }}</div>
</template>

<script setup>
import { ref } from 'vue'
const images = ref()
</script>

图表组件 MaCharts

提示

组件依赖于 echarts 目前只引入了 柱状图、折线图、饼图、仪表盘 组件

如需使用 echarts 其他组件模块，需要修改 @/components/index.js 引入 echarts 其他组件模块

组件参数

参数名参数类型参数说明是否必填/默认值
optionsObjectecharts Option配置属性是
autoresizeBoolean是否为自适应大小true
widthString宽度'100%'
heightString高度'100%'

组件使用

<template>
    <ma-charts :options="options" />
</template>

<script setup>
import { reactive } from 'vue'
const options = reactive({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }
    ]
})
</script>

省市选择器组件 MaCityLinkage

提示

省市数据全部在前端 @/components/ma-cityLinkage/lib/city.json 保存

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelNumber, String, Object绑定数据是
autoresizeBoolean是否为自适应大小true
type'select', 'cascader'组件类型：下拉联动和级联选择器'select'
mode'name', 'code'返回数据格式：省市名称、省市代码'name'

组件使用

注意

组件类型不同，返回的数据类型也不同：

  • 级联选择器返回数据格式为字符串：String
  • 下拉联动返回数据格式为数组：Array
<template>
    <ma-city-linkage v-model="city" />
</template>

<script setup>
import { reactive } from 'vue'
const city = reactive([])
</script>

资源选择器组件 MaResource

资源选择器分为两种组件形式：一种为直接展示型；一种为按钮型，点击后打开资源选择器。

展示型组件

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString, Number绑定数据是
multipleBoolean是否允许多选true
onlyUrlBoolean是否只返回URLtrue

组件使用

<template>
    <ma-resource v-model="imageList" />
    <div>选择的图片{{ imageList }}</div>
</template>

<script setup>
import { ref } from 'vue'
const imageList = ref([])
</script>

按钮型组件

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString, Number绑定数据是
multipleBoolean是否允许多选true
onlyUrlBoolean是否只返回URLtrue
widthNumber模态框的宽度1080

组件使用

<template>
    <ma-resource-button v-model="imageList" />
    <div>选择的图片{{ imageList }}</div>
</template>

<script setup>
import { ref } from 'vue'
const imageList = ref([])
</script>

树侧边栏选择器 MaTreeSlider

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelArray绑定数据是
searchPlaceholderString搜索框提示文案-
selectedKeysArray设置默认被选中的节点key-
fieldNamesObject树的props{ title: 'label', value: 'code' }
iconString设置节点图标-

组件属性

提示

属性需通过组件定义的 ref 来调用

属性描述
MaTreea-tree 组件的 ref，可以调用 Arco design 的原生组件属性和方法

组件使用

注意

该组件未进行全局挂载，使用时需要单独引入

<template>
    <ma-tree-slider
        v-model="depts"
        searchPlaceholder="搜索部门"
        :field-names="{ title: 'label', key: 'value' }"
        @click="switchDept"
    />
</template>

<script setup>
import { reactive } from 'vue'
const depts = reactive([
    {
        label: '部门A',
        value: 1,
    },
    {
        label: '部门B',
        value: 2,
    }
])

const switchDept = (key) => {
    const dept = depts.find(item => item.value == key)
    console.log(dept.label)
}
</script>

图标选择器 MaIcon

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString, Number绑定数据是

组件使用

<template>
    <ma-icon v-model="icon" />
    <div>选择的图标：{{ icon }}</div>
</template>

<script setup>
import { ref } from 'vue'
const icon = ref()
</script>

编辑器组件 MaEditor

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString绑定数据是
heightNumber编辑器高度400

组件使用

<template>
    <ma-editor v-model="content" :height="600" />
</template>

<script setup>
import { ref } from 'vue'
const content = ref('')
</script>

代码编辑器组件 MaCodeEditor

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString绑定数据是
heightNumber编辑器高度400
isBindBoolean是否绑定回显false
language'php','javascript','mysql','html','css'编辑器高亮语言'javascript'
readonlyBoolean是否为只读状态false

组件使用

<template>
    <ma-code-editor v-model="codeContent" language="php" :height="600" />
</template>

<script setup>
import { ref } from 'vue'
const codeContent = ref(' <?php echo "Hello World!"; ?> ')
</script>

用户选择器组件 MaUser

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString, Number绑定数据是
isEchoBoolean是否回显记录已选择用户false
onlyIdBoolean是否只返回ID，否则返回全量数据true
multipleBoolean是否多选true
textString展示文字选择用户

组件使用

<template>
    <ma-user v-model="userList" />
    <div>已选择的用户：{{ userList }}</div>
</template>

<script setup>
import { ref } from 'vue'
const userList = ref([])
</script>

用户信息组件 MaUserInfo

组件参数

参数名参数类型参数说明是否必填/默认值
v-modelString, Number绑定数据是

组件使用

<template>
    <ma-userinfo v-model="userinfo" />
    <div>选择的用户信息：{{ userinfo }}</div>
</template>

<script setup>
import { ref } from 'vue'
const userinfo = ref()
</script>

验证码组件 MaVerifyCode

组件方法

提示

方法需通过组件定义的 ref 来调用

方法名描述参数返回值
checkResult()校验验证码是否正确verifyCodeBoolean
refresh()刷新验证码--

组件使用

注意

该组件未进行全局挂载，使用时需要单独引入

<template>
    <a-form :model="form" @submit="handleSubmit">
        <a-form-item
            field="code"
            :hide-label="true"
            :rules="[{
                required: true,
                match: /^[a-zA-Z0-9]{4}$/,
                message: '请输入验证码'
            }]"
        >
            <a-input
              v-model="form.code"
              :placeholder="$t('sys.login.verifyCode')"
              size="large"
              allow-clear
            >
                <template #prefix><icon-safe /></template>
                <template #append>
                    <!-- 验证码 options 参数不是必须设置的 -->
                    <ma-verify-code ref="verifyCode" :options="options" />
                </template>
            </a-input>
        </a-form-item>
    <a-form>
</template>

<script setup>
// 引入组件
import MaVerifyCode from '@cps/ma-verifyCode/index.vue'
import { ref } from 'vue'
const verifyCode = ref()
const form = ref({})
// 设置验证码参数，该参数不是必须设置的。
const options = ref({
    pool: '1234567890',
    size: 4,
    width: 120,
    height: 30
})

const handleSubmit = ({ values, errors }) => {

    // 校验验证码
    if (! verifyCode.value.checkResult(values.code)) {
        // 验证码未通过。。。
        return false
    }
    // 处理提交数据
}
</script>

表单弹窗组件 MaFormModal

组件参数

参数名参数类型参数说明是否必填/默认值
titleString弹出框标题
columnBooleanma-form组件column属性{}
optionsBooleanma-form组件options属性{}
default_visibleBoolean默认隐藏false
submitFunction提交回调事件，注意是这样:submit="submit"不用加括号

组件方法

提示

方法需通过组件定义的 ref 来调用

方法名描述参数返回值
open(formData)打开弹窗formDataObject
close()关闭弹窗--
form组件内部封装ma-form的ref
formData组件内部的ma-form v-model formData

组件使用

注意

该组件未进行全局挂载，使用时需要单独引入

<template>
  <div>
    <ma-form-modal
        :column="column"
        :submit="submit"
    >
      <template #body>
        提示信息
      </template>
    </ma-form-modal>
  </div>
</template>

<script setup>
import {ref, reactive } from 'vue'
import MaFormModal from "@/components/ma-form-modal/index.vue"

const column = reactive([
  {
    dataIndex: "test",
    title: "测试",
    rules: [{
      required: true,
      message: "测试不可为空"
    }]
  },
  {
    dataIndex: "msg",
    title: "备注",
  }
])
const submit = async (formData) => {
  console.log(formData)
}
</script>

<style scoped>

</style>

描述列表组件 MaInfo

提示

这是基于arco组件描述列表 Descriptionsopen in new window开发，描述详情组件

组件参数

提示

注意columns不要写错了，是columns带s的

参数名参数类型参数说明是否必填/默认值
titleString标题''
columnsArraycolumns数组具体属性[]
columnNumber每行放置的数据个数参考官方APIopen in new window3
dataObject参数属性{}
layoutString描述列表的排列方式参考官方APIopen in new window'horizontal'
sizeString描述列表的大小参考官方APIopen in new windowlarge

组件方法

提示

方法需通过组件定义的 ref 来调用

方法名描述参数返回值
reset()重载columns配置-void

组件使用

注意

该组件未进行全局挂载，使用时需要单独引入

<template>
  <div>
    <ma-info
        :columns="column"
        :data="data"
    />
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import MaInfo from "@/components/ma-info/index.vue"

const column = reactive([
  {
    dataIndex: "test",
    title: "测试",
    rules: [{
      required: true,
      message: "测试不可为空"
    }]
  },
  {
    dataIndex: "msg",
    title: "备注",
  }
])

const data = {
    test: '测试',
    msg: "测试备注"
}
</script>

<style scoped>

</style>