feat(input-password): Enhance the input-password props (#2784)

arco-design · Dec 22, 2023 · 027f115 · 027f115
1 parent d4e50b6
commit 027f115
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 8 deletions.
diff --git a/packages/web-vue/components/input/README.en-US.md b/packages/web-vue/components/input/README.en-US.md
@@ -86,7 +86,14 @@ description: Basic form components have been expanded on the basis of native con
 
 |Attribute|Description|Type|Default|
 |---|---|---|:---:|
+|visibility **(v-model)**|Whether is visible|`boolean`|`-`|
+|default-visibility|Default visiblity|`boolean`|`true`|
 |invisible-button|Whether to show visible buttons|`boolean`|`true`|
+### `<input-password>` Events
+
+|Event Name|Description|Parameters|
+|---|---|---|
+|visibility-change|Callback when visibility changes|visible: `boolean`|
 
 
 

diff --git a/packages/web-vue/components/input/README.zh-CN.md b/packages/web-vue/components/input/README.zh-CN.md
@@ -84,7 +84,14 @@ description: 基本表单组件，并在原生控件基础上进行了功能扩
 
 |参数名|描述|类型|默认值|
 |---|---|---|:---:|
+|visibility **(v-model)**|是否可见，受控属性|`boolean`|`-`|
+|default-visibility|默认是否可见，非受控|`boolean`|`true`|
 |invisible-button|是否显示可见按钮|`boolean`|`true`|
+### `<input-password>` Events
+
+|事件名|描述|参数|
+|---|---|---|
+|visibility-change|visibility 改变时触发|visible: `boolean`|
 
 
 

diff --git a/packages/web-vue/components/input/__demo__/password.md b/packages/web-vue/components/input/__demo__/password.md
@@ -18,6 +18,29 @@ Used to enter a password.
 
 ```vue
 <template>
-  <a-input-password :style="{width:'320px'}" placeholder="Please enter something" allow-clear/>
+  <a-space direction="vertical" size="large">
+    <a-switch v-model="visibility" />
+    <a-input-password
+      v-model:visibility="visibility"
+      placeholder="Please enter something"
+      :style="{width:'320px'}"
+      :defaultVisibility="false"
+      allow-clear
+    />
+  </a-space>
 </template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const visibility = ref(true);
+
+    return {
+      visibility
+    }
+  },
+}
+</script>
 ```
diff --git a/packages/web-vue/components/input/input-password.vue b/packages/web-vue/components/input/input-password.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-input ref="inputRef" :type="invisible ? 'password' : 'text'">
+  <a-input ref="inputRef" :type="mergedVisible ? 'password' : 'text'">
     <template v-if="$slots.prepend" #prepend>
       <slot name="prepend" />
     </template>
@@ -13,7 +13,7 @@
         @mousedown.prevent
         @mouseup.prevent
       >
-        <icon-eye v-if="!invisible" />
+        <icon-eye v-if="!mergedVisible" />
         <icon-eye-invisible v-else />
       </a-icon-hover>
       <slot name="suffix" />
@@ -26,10 +26,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, reactive, ref, toRefs } from 'vue';
 import AIconHover from '../_components/icon-hover.vue';
 import IconEye from '../icon/icon-eye';
 import IconEyeInvisible from '../icon/icon-eye-invisible';
+import useMergeState from '../_hooks/use-merge-state';
 import AInput from './input';
 
 export default defineComponent({
@@ -41,6 +42,23 @@ export default defineComponent({
     AInput,
   },
   props: {
+    /**
+     * @zh 是否可见，受控属性
+     * @en Whether is visible
+     * @vModel
+     */
+    visibility: {
+      type: Boolean,
+      default: undefined,
+    },
+    /**
+     * @zh 默认是否可见，非受控
+     * @en Default visiblity
+     */
+    defaultVisibility: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * @zh 是否显示可见按钮
      * @en Whether to show visible buttons
@@ -50,17 +68,41 @@ export default defineComponent({
       default: true,
     },
   },
-  setup() {
+  emits: [
+    /**
+     * @zh visibility 改变时触发
+     * @en Callback when visibility changes
+     * @param {boolean} visible
+     */
+    'visibility-change',
+    'update:visibility',
+  ],
+  setup(props, { emit }) {
+    const { visibility, defaultVisibility } = toRefs(props);
     const inputRef = ref();
-    const invisible = ref(true);
 
     const handleInvisible = () => {
-      invisible.value = !invisible.value;
+      setVisible(!mergedVisible.value);
+    };
+
+    const [mergedVisible, setLocalVisible] = useMergeState(
+      defaultVisibility.value,
+      reactive({
+        value: visibility,
+      })
+    );
+
+    const setVisible = (newVisible: boolean) => {
+      if (newVisible !== mergedVisible.value) {
+        emit('visibility-change', newVisible);
+        emit('update:visibility', newVisible);
+        setLocalVisible(newVisible);
+      }
     };
 
     return {
       inputRef,
-      invisible,
+      mergedVisible,
       handleInvisible,
     };
   },