jie-element-plugs v1.0.6

使用说明

• 示例

<template>
    <div class="layout">
        <!-- 进度条 -->
        <m-process :percentage="88" isAnimate />
        <!-- 省市区 -->
        <s-s-q @getOptions="handleOptions" />
        <!-- 消息通知 -->
        <m-notification>
            <template #default>
                <m-list :list="list" :actions="actions" />
            </template>
        </m-notification>
        <!-- form表格 -->
        <m-form :options="options"
            @on-change="handleChange"
            @on-error="handleError"
            @before-upload="handleBeforeUpdate"
            @on-preview="handlePreview"
            @on-remove="handleRemove"
            @before-remove="BeforeRemove"
            @on-success="handleSuccess"
            @on-exceed="handleExceed"
            @on-progress="handleProgress">
            <template #uploadArea="scope">
                <button>文件上传</button>
            </template>
            <template #uploadTip="scope">
                <span>文件不能太大ooo</span>
            </template>
        </m-form>
        <!-- 表格 -->
        <m-table :tableData="tableData" :options="tableOptions">
            <template #action="scope">
                <el-button size="small" @click="edit(scope)">编辑</el-button>
                <el-button size="small" @click="edit(scope)" type="danger">删除</el-button>
            </template>
        </m-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { list, actions } from './data.ts'
import { FormOptions } from '@/components/form/src/types/types.ts'
import { ITableOptions } from '../../components/table/src/types'
const collapse = ref<boolean>(false)

export interface IContent {
    title?: string
    time?: string
    avatar?: string
    desc?: string
    tag?: string
    tagType?: "" | "success" | "info" | "warning" | "danger"
}
export interface IList {
    title: string
    content: IContent[]
}
export interface IActions {
    text: string
    icon: string
}

const options: FormOptions[] = [
    {
        type: 'input',
        value: '',
        placeholder: '请输入',
        label: 'name',
        prop: 'name'
    },
    {
        type: 'select',
        value: '',
        placeholder: '请选择',
        label: 'sex',
        prop: 'sex',

        children: [
            {
                type: 'option',
                label: 'man',
                value: 'man'
            },
            {
                type: 'option',
                label: 'woman',
                value: 'woman'
            },
        ]
    },
    {
        type: 'editor',
        value: '',
        label: '编辑器',
        placeholder: '请输入编辑内容',
        prop: 'desc'
    },
    {
        type: 'upload',
        value: '',
        label: '文件上传',
    }
]


const tableData = [
    {
        name: 'Jerry',
        date: '2008-09',
        address: 'chian'
    },
    {
        name: 'Jerry',
        date: '2008-09',
        address: 'chian'
    },
]

const tableOptions: ITableOptions[] = [
    {
        prop: 'name',
        label: '名字',
    },
    {
        prop: 'date',
        label: '日期',
    },
    {
        prop: 'address',
        label: '地址',
    },
    {
        prop: 'action',
        label: '操作',
        width: '300',
        align: 'center',
        action: true
    },
]

const edit = (scope) => {
    console.log(scope);

}

const handleChange = (file: any) => {
    console.log('handleChange', file);
}

const handleError = (file: any) => {
    console.log('handleError', file);
}

const handleBeforeUpdate = (file: any) => {
    console.log('handleBeforeUpdate', file);
}
const handlePreview = (file: any) => {
    console.log('handlePreview', file);
}
const handleRemove = (file: any) => {
    console.log('handleRemove', file);
}
const BeforeRemove = (file: any) => {
    console.log('BeforeRemove', file);
}
const handleSuccess = (file: any) => {
    console.log('handleSuccess', file);
}
const handleExceed = (file: any) => {
    console.log('handleExceed', file);
}
const handleProgress = (file: any) => {
    console.log('handleProgress', file);
}
const handleOptions = (val) => {
    console.log(val);
}
</script>

<style scoped lang="scss">
.layout {
    width: 100vw;
    height: 100vh;

    .el-container {
        width: 100%;
        height: 100%;
    }
}
</style>