0.0.21 • Published 2 years ago

aegis-odyssey v0.0.21

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

AegisOdyssey 插件说明

实现项目内部分 ui 的全局化配置和使用。

安装

npm i aegis-odyssey

全局配置

  1. main.ts 引入对应插件
// 引入
import { Odyssey } from "aegis-odyssey";

// 全局挂载
app.use(Odyssey).mount("#app");

颗粒 UI 组件

  1. radio 多组 UI 组件
// 使用方法
<o-radio v-model="rValue" type="button" size="small" disabled :list=['项1','项2'] />
key条件valuedefaultdescription
v-model必填string | number""同 el
type选填"default" | "border" | "button""default"同 el
size选填"large" | "default" | "small""default"同 el
disabled选填booleanfalse同 el
list选填(string | number) []"是","否"单选的选择列表
  1. select 组件
// 使用方法
<o-select v-model="rValue" type="button" size="small" disabled :list=['项1','项2'] />
key条件valuedefaultdescription
v-model必填string | number""同 el
size选填"large" | "default" | "small""default"同 el
clearable选填booleantrue同 el
disabled选填booleanfalse同 el
placeholder选填string"请选择"同 el
list必填(string | number) []"A","B"下拉组件的选择列表
  1. date 组件
// 使用方法
<o-date v-model="date" type="date" defaultShortcuts short />
key条件valuedefaultdescription
v-model必填string | string[]"" |[]同 el
type选填"date" | "daterange""date"单日期或者双日期
size选填"large" | "default" | "small""default"同 el
short选填booleanfalse组件是否用最短样式
clearable选填booleantrue同 el
disabled选填booleanfalse同 el
placeholder选填string"请选择"单日期 placeholder
startPlaceholder选填string"开始时间"多日期起始 placeholder
endPlaceholder选填string"结束时间"多日期末尾 placeholder
disabledDate选填Functiondefault不可选日期条件
defaultShortcuts选填booleanfalse是否配置 shortcuts 默认值
shortcuts选填{ text: string; value: Date | Function }[]default不配置 defaultShortcuts 情况下,自定义 shortcuts 默认值

复合 UI 组件

  1. table 组件
// 依赖变量
const tableValue = ref([
	{
		type: "原告",
		name: "Tom",
		gender: "男",
		country: "中国",
		address: "No. 189, Grove St, Los Angeles",
		info: "",
	},
	{
		type: "原告",
		name: "Johnny",
		gender: "男",
		country: "日本",
		address: "No. 189, Grove St, Los Angeles",
		info: "",
	},
]);
const tableHeaderValue = ref({
	label: {
		type: "类型",
		name: "姓名",
		gender: "性别",
		country: "国籍",
		address: "地址",
		info: "自定义",
	},
	width: {
		type: 60,
		name: 150,
		gender: 116,
		country: 116,
		operate: 100,
	},
	edit: {
		name: "input",
		gender: "radio",
		country: "select",
		address: "textarea",
		info: "custom",
	},
});
const showSwitch = ref(false);
const handleSwitch = () => {
	showSwitch.value = !showSwitch.value;
};
const tableAddValue = ref({
	type: "原告",
	name: "",
	gender: "男",
	country: "",
	address: "",
	info: "",
});
const addVerify = computed(() => {
	return !!(tableAddValue.value.type && tableAddValue.value.name && tableAddValue.value.gender);
});

const handleOpen = (type: number, idx: number) => {
	if (type === 1) {
		console.log(idx);
	} else {
		tableValue.value.splice(idx, 1);
	}
};

// 使用方法
<o-table
  v-model="tableValue"
  v-model:addValue="tableAddValue"
  :header="tableHeaderValue"
	merge="type"
	:add="addVerify"
  :list="{ country: ['中国', '日本', '美国'] }"
>
  <template #info="scope">
    <div v-show="!showSwitch" class="show" @click="handleSwitch">
      {{ scope.row.name }}: {{ scope.row.gender }}
    </div>
    <el-input v-show="showSwitch" v-model="scope.row.date" type="textarea" autosize />
  </template>
  <template #operate="scope">
    <el-button class="f12" type="primary" link @click="handleOpen(1, scope.$index)"> 打开 </el-button>
    <el-button class="f12" type="primary" link @click="handleOpen(2, scope.$index)"> 删除 </el-button>
  </template>
  <template #add>
		<o-select class="w100 mr10" v-model="tableAddValue.type" :list="['原告', '被告']" />
		<el-input class="mr10" v-model="tableAddValue.name" placeholder="姓名" clearable />
		<o-radio class="mr10" v-model="tableAddValue.gender" type="button" :list="['男', '女']" />
		<o-select
			class="w100 mr10"
			v-model="tableAddValue.country"
			:list="['中国', '日本', '美国']"
			placeholder="国籍"
		/>
		<el-input class="mr10" v-model="tableAddValue.address" placeholder="地址" clearable />
  </template>
</o-table>
key条件valuedefaultdescription
v-model必填{...}table 数组对象
v-model:addValue选填{...}"新增"功能 + custom 的单项 item
header必填{}table 渲染 th 的规则
header.label必填string对应 th 里面的描述名,不可缺省
header.width选填number对应单列宽度,不定义为自适应,可缺省
header.edit选填input|radio|select|textarea|custom对应单列是否编辑,可缺省
btnName选填string"添加"table"新增"功能默认按钮描述
index选填booleanfalsetable 是否显示序列
merge选填string""table 是否分组,分组 key 由 merge 值决定,需要放在列第一序列,最大分组仅支持 3 组
add选填booleanfalsetable 是否显示"新增"功能,不配置$slots.add 的话(custom)默认给 v-model 的 item 点击新增后生成一组空数据
list必填(string | number) []{key: "A","B"}table 单列为 select、radio 组件的默认选项值,key 位单列 prop 名称
#key选填#key="scope"slot 插槽,对应 header.edit 属性里的 key,提供自定义单项的内容编写,通过 scope 获得当前 item 值
#operate选填#operate="scope""新增"功能下,自动赋予删除 item 默认列。且该 slot 插槽,提供自定义“操作”的内容编写
#add选填#add"新增"功能下,该 slot 插槽,提供自定义“新增”项的内容编写
0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago

0.0.0

2 years ago