vue之封装input组件

vue之封装input组件

• 效果：
  

Input.vue

<template>
  <div :class="['x_input', { 'x-input-suffix-wrap': showSuffix }]">
    <!-- 如果传递showPassword 进行判断是否切换 密码的显示
    否者的话，就拿type的类型 -->
    <input
      :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
      :class="['x_input_inner', { 'is-disabled': disabled }]"
      :placeholder="placeholder"
      :name="name"
      :disabled="disabled"
      :value="value"
      @input="handleInput"
    />
    <span class="x_input_suffix" v-if="showSuffix">
      <i
        class="x_input_icon icon_clear"
        v-if="clearable && value"
        @click="clear"
      >
        <svg
          t="1638064398209"
          class="my_icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6789"
          width="200"
          height="200"
        >
          <path
            d="M703.488 335.872c-10.24-10.24-27.648-10.24-37.888 0L520.192 481.28 373.76 335.872c-10.24-10.24-27.648-10.24-37.888 0s-10.24 27.648 0 37.888L481.28 520.192 335.872 665.6c-10.24 10.24-10.24 27.648 0 37.888s27.648 10.24 37.888 0l145.408-145.408L665.6 703.488c10.24 10.24 27.648 10.24 37.888 0s10.24-27.648 0-37.888L558.08 520.192l145.408-145.408c11.264-11.264 11.264-28.672 0-38.912z"
            p-id="6790"
          ></path>
          <path
            d="M517.12 54.272C262.144 54.272 54.272 262.144 54.272 517.12s207.872 462.848 462.848 462.848 462.848-207.872 462.848-462.848S772.096 54.272 517.12 54.272z m0 872.448c-226.304 0-410.624-184.32-410.624-410.624s184.32-410.624 410.624-410.624 410.624 184.32 410.624 410.624c-1.024 227.328-184.32 410.624-410.624 410.624z"
            p-id="6791"
          ></path>
        </svg>
      </i>
      <i
        class="x_input_icon icon_view"
        v-if="showPassword"
        @click="handlePassword"
      >
        <svg
          t="1638064625272"
          class="my_icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7621"
          width="200"
          height="200"
        >
          <path
            d="M515.2 224c-307.2 0-492.8 313.6-492.8 313.6s214.4 304 492.8 304 492.8-304 492.8-304S822.4 224 515.2 224zM832 652.8c-102.4 86.4-211.2 140.8-320 140.8s-217.6-51.2-320-140.8c-35.2-32-70.4-64-99.2-99.2-6.4-6.4-9.6-12.8-16-19.2 3.2-6.4 9.6-12.8 12.8-19.2 25.6-35.2 57.6-70.4 92.8-102.4 99.2-89.6 208-144 329.6-144s230.4 54.4 329.6 144c35.2 32 64 67.2 92.8 102.4 3.2 6.4 9.6 12.8 12.8 19.2-3.2 6.4-9.6 12.8-16 19.2C902.4 585.6 870.4 620.8 832 652.8z"
            p-id="7622"
          ></path>
          <path
            d="M512 345.6c-96 0-169.6 76.8-169.6 169.6 0 96 76.8 169.6 169.6 169.6 96 0 169.6-76.8 169.6-169.6C681.6 422.4 604.8 345.6 512 345.6zM512 640c-67.2 0-121.6-54.4-121.6-121.6 0-67.2 54.4-121.6 121.6-121.6 67.2 0 121.6 54.4 121.6 121.6C633.6 582.4 579.2 640 512 640z"
            p-id="7623"
          ></path>
        </svg>
      </i>
    </span>
  </div>
</template>

<script>
/***
 * 
 * 参数：
 * * placeholder：提示语；
 * * type：类型
 * * disabled：禁用
 * * value：绑定的值
 * * clearable：是否清空表单的值
 * * showPassword：是否显示密码
 */
export default {
  name: "Input",
  props: {
    placeholder: {
      type: String,
      default: "请输入",
    },
    type: {
      type: String,
      default: "text",
    },
    name: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    showPassword: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 用于控制是否显示密码框
      passwordVisible: false,
    };
  },
  computed: {
    showSuffix() {
      return this.showPassword || this.clearable;
    },
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    // 清空当前值
    clear() {
      this.$emit("input", "");
    },
    // 显示密码操作
    handlePassword() {
      this.passwordVisible = !this.passwordVisible;
    },
  },
};
</script>
<style  lang="scss" scoped>
.x_input {
  position: relative;
  width: 100%;
  font-style: 14px;
  display: inline-block;
  .x_input_inner {
    -webkit-appearance: none;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 32px;
    line-height: 32px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    &:focus {
      outline: none;
      border-color: #409eff;
    }
    &.is-disabled {
      border-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
}
// 有小图标的样式
.x-input-suffix-wrap {
  .x_input_inner {
    padding-right: 10px;
  }
  .x_input_suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    .my_icon {
      width: 14px;
      height: 14px;
    }
  }
}
</style>

使用组件

<template>
  <div class="home">

    username -- {{ username }}
    <x-input
      class="x_input_wrap"
      placeholder="请输入用户名"
      v-model="username"
      clearable
    ></x-input>
    age -- {{ age }}
    <x-input
      class="x_input_wrap"
      placeholder="请输入年龄"
      v-model="age"
      clearable
    ></x-input>
    psd {{ psd }}
    <x-input
      class="x_input_wrap"
      placeholder="请输入秘密"
      type="password"
      v-model="psd"
      showPassword
    ></x-input>
  </div>
</template>

<script>
import XInput from "./Test/Input.vue";
export default {
  name: "Home",
  components: {
    XInput,
  },
  data() {
    return {
      username: "123",
      age: "20",
      psd: "",
    };
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
.x_input_wrap {
  width: 200px;
}
.home {
  height: calc(100% - 34px);
  width: calc(100% - 34px);
  background: #fff;
  padding: 16px;
  border: 1px solid #ccc;
}
</style>