✨(component): 新增 input 组件 password 属性

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",

package/component/src/component/input/index.less

@@ -70,6 +70,7 @@
   padding: 0 15px;
 }
 
+.layui-input-password,
 .layui-input-clear {
   flex: none;
   display: flex;

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<LayInputProps>(), {
@@ -29,6 +30,7 @@ const props = withDefaults(defineProps<LayInputProps>(), {
   readonly: false,
   allowClear: false,
   autofocus: false,
+  password: false,
   modelValue: "",
 });
 
@@ -45,10 +47,14 @@ const emit = defineEmits<InputEmits>();
 
 const { t } = useI18n();
 const slots = useSlots();
-const currentValue = ref<string>(
-  String(props.modelValue == null ? "" : props.modelValue)
-);
+const type = ref(props.type);
+const currentValue = ref<string>(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";
+  }
+}
 </script>
 
 <template>
@@ -132,6 +146,9 @@ const classes = computed(() => {
           class="layui-input-suffix-icon"
         ></lay-icon>
       </span>
+      <span class="layui-input-password" v-if="password">
+        <lay-icon :type="isPassword ? 'layui-icon-face-smile' : 'layui-icon-face-cry'" @click="showPassword"></lay-icon>
+      </span>
       <span class="layui-input-clear" v-if="allowClear && hasContent">
         <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
       </span>

package/component/src/component/select/index.vue

@@ -7,15 +7,7 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import LaySelectOption from "../selectOption/index.vue";
-import {
-  provide,
-  ref,
-  watch,
-  computed,
-  Ref,
-  nextTick,
-  shallowRef,
-} from "vue";
+import { provide, ref, watch, computed, Ref, nextTick, shallowRef } from "vue";
 import LayBadge from "../badge/index.vue";
 import LayInput from "../input/index.vue";
 import LayScroll from "../scroll/index.vue";

package/document-component/src/document/zh-CN/components/input.md

@@ -111,6 +111,33 @@ export default {
 
 :::
 
+::: title 输入密码
+:::
+
+::: demo
+
+<template>
+  <lay-input v-model="inputValue" type="password" password></lay-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const inputValue = ref("");
+
+    return {
+      inputValue
+    }
+  }
+}
+</script>
+
+:::
+
+
 ::: title 设置图标
 :::