chore: modify useState file name,modify UseState type define
This commit is contained in:
parent
1a474fdff7
commit
58cb4b1eca
|
@ -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 };
|
||||
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
export * from './types';
|
||||
export * from './use-state';
|
|
@ -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];
|
|
@ -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];
|
||||
}
|
Loading…
Reference in New Issue