vuepress-theme-neo

PasswordInput 密码输入框

代码演示

Input.TextArea

<template>
  <div class="password-input">
    <div class="password-input-box">
      <input
        class="password-input-input"
        v-model="password"
        :maxlength="length"
        type="text"
      />
      <div class="password-input-item" v-for="i in length" :key="i">
        <div
          :class="{ 'password-input-item--active': password.length >= i }"
        ></div>
        <div
          :class="{ 'password-input-item--line': password.length + 1 === i }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PasswordInput",
  props: {
    value: {
      type: String,
      default: "",
    },
    length: {
      type: Number,
      default: 6,
    },
  },
  // 方式一 你输入完密码外面校验完做了清空你里面就不会生效
  // data() {
  //   return {
  //     password: this.value,
  //   };
  // },
  // methods: {
  //   handleInput() {
  //     this.$emit("input", this.password);
  //   },
  // },
  // 方式二
  computed: {
    password: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
@keyframes flicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.password-input {
  height: 48px;
  &-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
  }
  &-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  }
  &-item {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(240, 242, 245, 1);
    &--active {
      width: 16px;
      height: 16px;
      color: rgba(48, 49, 51, 100);
      background-color: #333;
      border-radius: 50%;
    }
    &--line {
      width: 2px;
      height: 50%;
      background-color: rgba(48, 49, 51, 100);
      animation: flicker 0.8s infinite;
    }
  }
}
</style>

API

参数说明类型默认值
value输入框内容string-
placeholder输入框占位文本string-
disabled是否禁用状态，默认为 falsebooleanfalse
size输入框尺寸，可选值为 large、small、default 或者不设置stringdefault
prefix输入框头部图标string-
suffix输入框尾部图标string-
onPressEnter按下回车的回调function(e)-
onChange输入框内容变化时的回调function(e)-
onFocus输入框聚焦时的回调function(e)-
onBlur输入框失去焦点时的回调function(e)-
onSearch点击搜索图标时的回调function(value)-
onClear点击清除图标时的回调function(value)-
onVisibleChange点击切换密码可见状态时的回调function(visible)-
onPaste粘贴事件function(e)-
onCopy复制事件function(e)-
onCut剪切事件function(e)-
onCompositionStart中文输入开始时的回调function(e)-
onCompositionUpdate中文输入中的回调function(e)-
onCompositionEnd中文输入结束时的回调function(e)-
onContextMenu右键点击时的回调function(e)-
onDoubleClick双击鼠标时的回调function(e)-
onDrag拖拽时的回调function(e)-
onDragEnd拖拽结束时的回调function(e)-
onDragEnter拖拽进入目标元素时的回调function(e)-
onDragExit拖拽离开目标元素时的回调function(e)-
onDragLeave拖拽离开目标元素时的回调function(e)-
onDragOver拖拽在目标元素上方时的回调function(e)-
onDragStart拖拽开始时的回调function(e)-
onDrop拖拽元素放在目标元素上方时的回调function(e)-
onMouseDown鼠标按下时的回调function(e)-
onMouseEnter鼠标进入目标元素时的回调function(e)-
onMouseLeave鼠标离开目标元素时的回调function(e)-
onMouseMove鼠标在目标元素上方移动时的回调function(e)-
onMouseOut鼠标离开目标元素时的回调function(e)-
onMouseOver鼠标进入目标元素时的回调function(e)-
onMouseUp鼠标松开时的回调function(e)-
onWheel滚轮事件function(e)-
onInput输入事件function(e)-
onInvalid输入无效时的回调function(e)-
onKeyDown键盘按下时的回调function(e)-
onKeyPress键盘按下时的回调function(e)-
onKeyUp键盘松开时的回调function(e)-
onAbort当音频/视频的加载已放弃时function(e)-
onCanPlay当浏览器可以播放音频/视频时function(e)-
onCanPlayThrough当浏览器可在不因缓冲而停顿的情况下进行播放时function(e)-
onDurationChange当音频/视频的时长已更改时function(e)-
onEmptied当目前的播放列表为空时function(e)-
onEncrypted当媒体已被加密时function(e)-
onEnded当目前的播放列表已结束时function(e)-
onError当在音频/视频加载期间发生错误时function(e)-
onLoadedData当浏览器已加载音频/视频的当前帧时function(e)-
onLoadedMetadata当浏览器已加载音频/视频的元数据时function(e)-
onLoadStart当浏览器开始查找音频/视频时function(e)-
onPause当音频/视频已暂停时function(e)-
onPlay当音频/视频已开始或不再暂停时function(e)-
onPlaying当音频/视频在已因缓冲而暂停或停止后已就绪时function(e)-
onProgress当浏览器正在下载音频/视频时function(e)-
onRateChange当音频/视频的播放速度已更改时function(e)-
onSeeked当用户已移动/跳跃到音频/视频中的新位置时function(e)-
onSeeking当用户开始移动/跳跃到音频/视频中的新位置时function(e)-
onStalled当浏览器尝试获取媒体数据，但数据不可用时function(e)-
onSuspend当浏览器刻意不获取媒体数据时function(e)-
onTimeUpdate当目前的播放位置已更改时function(e)-
onVolumeChange当音量已更改时function(e)-
onWaiting当视频由于需要缓冲下一帧而停止function(e)-
onToggle点击切换密码可见状态时的回调function(visible)-
onToggleVisible点击切换密码可见状态时的回调function(visible)-
onTogglePasswordVisible点击切换密码可见状态时的回调function(visible)-