diff --git a/package/component/package.json b/package/component/package.json index 0b936007..42a5ddb4 100644 --- a/package/component/package.json +++ b/package/component/package.json @@ -1,6 +1,6 @@ { "name": "@layui/layui-vue", - "version": "1.2.11", + "version": "1.3.0-alpha.3", "author": "就眠儀式", "license": "MIT", "description": "a component library for Vue 3 base on layui-vue", diff --git a/package/component/src/component/input/index.less b/package/component/src/component/input/index.less index e7f6a905..1bfe4d1d 100644 --- a/package/component/src/component/input/index.less +++ b/package/component/src/component/input/index.less @@ -70,6 +70,7 @@ padding: 0 15px; } +.layui-input-password, .layui-input-clear { flex: none; display: flex; diff --git a/package/component/src/component/input/index.vue b/package/component/src/component/input/index.vue index a9d314aa..ead14895 100644 --- a/package/component/src/component/input/index.vue +++ b/package/component/src/component/input/index.vue @@ -22,6 +22,7 @@ export interface LayInputProps { autofocus?: boolean; disabled?: boolean; readonly?: boolean; + password?: boolean; } const props = withDefaults(defineProps(), { @@ -29,6 +30,7 @@ const props = withDefaults(defineProps(), { readonly: false, allowClear: false, autofocus: false, + password: false, modelValue: "", }); @@ -45,10 +47,14 @@ const emit = defineEmits(); const { t } = useI18n(); const slots = useSlots(); -const currentValue = ref( - String(props.modelValue == null ? "" : props.modelValue) -); +const type = ref(props.type); +const currentValue = ref(String(props.modelValue == null ? "" : props.modelValue)); const hasContent = computed(() => (props.modelValue as string)?.length > 0); +const isPassword = computed(() => type.value == "password") + +watch(() => props.type, () => { + type.value = props.type; +}) watch( () => props.modelValue, @@ -93,6 +99,14 @@ const onBlur = (event: Event) => { const classes = computed(() => { return { "layui-disabled": props.disabled }; }); + +const showPassword = () => { + if(isPassword.value) { + type.value = "text"; + } else { + type.value = "password"; + } +}