chore: modify useState file name,modify UseState type define

This commit is contained in:
aalizzwell 2022-10-12 14:36:09 +08:00
parent 1a474fdff7
commit 58cb4b1eca
5 changed files with 17 additions and 10 deletions

View File

@ -3,6 +3,7 @@ import FComboList from './src/combo-list.component';
export * from './src/types';
export * from './src/combo-list.props';
export * from './src/composition';
export { FComboList };

View File

@ -2,19 +2,22 @@ import { defineComponent, ref, SetupContext } from 'vue';
import { comboListProps, ComboListProps } from './combo-list.props';
import { ButtonEdit } from '../../button-edit';
import { ViewType } from './types';
import { useState } from './composition/state';
import { useState } from './composition/use-state';
export default defineComponent({
name: 'FComboList',
props: comboListProps,
emits: [],
setup(props: ComboListProps, context: SetupContext) {
//const modelValue = ref(props.modelValue);
// showPanel state
const [showPanel] = useState<boolean>(false);
const modelValue = ref(props.modelValue);
// is panel visible
const [isPanelVisible] = useState<boolean>(false);
return () => {
return (
<>
<ButtonEdit disable={props.disabled} readonly={props.readonly} />
{/** main component */}
{(!props.viewType || props.viewType === ViewType.Text) && (
<ButtonEdit disable={props.disabled} readonly={props.readonly} />
)}
{/** tag area */}
{props.viewType === ViewType.Tag && (
<div class="f-cmp-inputgroup">
@ -41,7 +44,7 @@ export default defineComponent({
</div>
)}
{/** panel area */}
{showPanel.value && (
{isPanelVisible.value && (
<div class="comboPanel f-area-hide" style="z-index: 99999"></div>
)}
</>

View File

@ -0,0 +1,2 @@
export * from './types';
export * from './use-state';

View File

@ -1,6 +1,7 @@
import { DeepReadonly, Ref, UnwrapRef } from "vue";
import { Ref, UnwrapRef } from "vue";
/**
* UseState type
* @description vue类型系统限制state只读
*/
export type UseState<T> = [Readonly<Ref<DeepReadonly<UnwrapRef<T>>>>, (state: UnwrapRef<T>) => void];
export type UseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];

View File

@ -1,4 +1,4 @@
import { ref, readonly, UnwrapRef } from 'vue';
import { ref } from 'vue';
import { UseState } from './types';
/**
@ -14,5 +14,5 @@ export function useState<T = any>(initial: T): UseState<T> {
const action = (value: any) => {
state.value = value;
};
return [readonly(state), action];
return [state, action];
}