chore: merge code
This commit is contained in:
commit
a8ae06e5ea
|
@ -0,0 +1,13 @@
|
|||
import type { App } from 'vue';
|
||||
import FComboList from './src/combo-list.component';
|
||||
|
||||
export * from './src/types';
|
||||
export * from './src/combo-list.props';
|
||||
|
||||
export { FComboList };
|
||||
|
||||
export default {
|
||||
install(app: App): void {
|
||||
app.component(FComboList.name, FComboList);
|
||||
},
|
||||
};
|
|
@ -0,0 +1,14 @@
|
|||
import { defineComponent, SetupContext } from 'vue';
|
||||
import { comboListProps, ComboListProps } from './combo-list.props';
|
||||
export default defineComponent({
|
||||
name: 'FComboList',
|
||||
props: comboListProps,
|
||||
emits: [],
|
||||
setup(props: ComboListProps, context: SetupContext) {
|
||||
return () => {
|
||||
return (
|
||||
<div id={props.id}>combo-list</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
});
|
|
@ -0,0 +1,55 @@
|
|||
import { ExtractPropTypes } from "vue";
|
||||
import { ViewType, EnumTypeProp } from './types';
|
||||
|
||||
export const comboListProps = {
|
||||
/**
|
||||
* 组件标识
|
||||
*/
|
||||
id: String,
|
||||
/**
|
||||
* 可选,是否禁用
|
||||
* 默认为false
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 可选,是否只读
|
||||
* 默认为false
|
||||
*/
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 最大输入长度
|
||||
*/
|
||||
maxLength: Number,
|
||||
/**
|
||||
* 占位符
|
||||
*/
|
||||
placeholder: String,
|
||||
/**
|
||||
* 可选,是否启用清空
|
||||
* 默认启用
|
||||
*/
|
||||
enableClear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 可选,鼠标悬停时是否显示控件值
|
||||
* 默认显示
|
||||
*/
|
||||
enableTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 可选,下拉列表值展示方式
|
||||
* 支持text | tag,即文本或标签,默认为ViewType.Text,即文本方式
|
||||
*/
|
||||
viewType: EnumTypeProp(ViewType.Text, ViewType),
|
||||
};
|
||||
export type ComboListProps = ExtractPropTypes<typeof comboListProps>;
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* 下拉列表展现方式
|
||||
*/
|
||||
export enum ViewType {
|
||||
Text = 'text',
|
||||
Tag = 'tag'
|
||||
};
|
||||
/**
|
||||
* 枚举类型属性描述
|
||||
* @param defaultValue 默认值
|
||||
* @param enumType 枚举类型
|
||||
* @returns
|
||||
*/
|
||||
export function EnumTypeProp<T extends string | number>(defaultValue: T, enumType: Record<symbol, T>) {
|
||||
return {
|
||||
default: defaultValue,
|
||||
validator: (value: T) => Object.values(enumType).includes(value)
|
||||
}
|
||||
}
|
|
@ -12,6 +12,7 @@ import RadioGroup from "./components/radio-group.vue";
|
|||
import Section from "./components/section.vue";
|
||||
import Notify from "./components/notify.vue";
|
||||
import Accordion from "./components/accordion.vue";
|
||||
import ComboList from "./components/combo-list.vue";
|
||||
|
||||
const canEdit = ref(true);
|
||||
const disable = ref(false);
|
||||
|
@ -44,6 +45,7 @@ const canAutoComplete = ref(false);
|
|||
<Notify></Notify>
|
||||
<Accordion></Accordion>
|
||||
<Tabs />
|
||||
<ComboList />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import ComboList from '../../components/combo-list/src/combo-list.component';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ComboList/>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue