jie-element-plugs
v1.0.6
Published
- 示例
Downloads
185
Readme
使用说明
- 示例
<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>