skybiu-ui

Appearance

On this page

tInput 输入框 ​

文本输入框,通过鼠标或键盘输入字符,通过 v-model 进行双向数据绑定

基本用法 ​

code
vue
<template>
   <div>
        <tInput v-model="value" placeholder="请输入"></tInput>
   </div>
</template>

<script setup>
</script>

<style lang='scss' scoped>

</style>
vue
// tInput 封装源码
<template>
  <div :class="tClass">
    <input
      :type="type"
      :value="modelValue"
      @input="input"
      :placeholder="placeholder"
      :disabled="disabled"
    />
    <i :class="iconStyle" @click="cleanInput">&#xe661;</i>
  </div>
</template>
<script>
export default {
  name: "tInput",
};
</script>

<script setup>
import { computed } from "vue";

// 数据双向绑定
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: String | Number,
  placeholder: String,
  disabled: Boolean,
  clean: Boolean,
  type: String
});

// 在数据变化的时候抛出去
const input = (e) => {
  emit("update:modelValue", e.target.value);
};

const tClass = computed(() => {
  return [
    "t-input",
    {
      "t-input-disabled": props.disabled,
    },
  ];
});

const iconStyle = computed(() => {
    return [
        "iconfont",
        {
           "clean": (props.clean && props.modelValue)
        }
    ]
})

const cleanInput = () =>{
    emit("update:modelValue", '');
}

</script>

<style lang='scss' scoped>
div {
    position: relative;
}
.t-input {
  display: inline-block;
  min-width: 240px;
  padding: 10px;
  border: $border solid 1px;
  border-radius: 8px;
  transition: all 0.15s ease;
  &:focus {
      outline: $outline solid 1px;
  }
  input {
    width: 90%;
    border: none;
    font-size: 14px;
    color: $fontColor;
    outline: none;;
  }
}
.t-input-disabled {
    input {
        cursor: no-drop;
        opacity: 0.5;
    }
}
i {
    display: none;
    position: absolute;
    top: 15px;
    right: 13px;
    cursor: pointer;
    color: #c1c5cd;
    &:hover {
        color: $primary;
    }
}
.clean {
    display: block;
}

// 图标库引入
@font-face {
  font-family: 'iconfont';  /* Project id 3141904 */
  src: url('//at.alicdn.com/t/c/font_3141904_vf0akqscesc.woff2?t=1685776538316') format('woff2'),
       url('//at.alicdn.com/t/c/font_3141904_vf0akqscesc.woff?t=1685776538316') format('woff'),
       url('//at.alicdn.com/t/c/font_3141904_vf0akqscesc.ttf?t=1685776538316') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:13px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</style>

禁用状态 ​

code
vue
<template>
   <div>
        <tInput v-model="value" placeholder="请输入" disabled></tInput>
   </div>
</template>

<script setup>
    const value;
</script>

<style lang='scss' scoped>

</style>

可清除状态 ​

code
vue
<template>
   <div>
        <tInput placeholder="请输入" v-model="val" clean></tInput>
   </div>
</template>

<script setup>
    import { ref } from 'vue'
    const val = ref("");
</script>

密码状态 ​

code
vue
<template>
   <div>
        <tInput placeholder="请输入" v-model="val" clean type="password"></tInput>
   </div>
</template>

<script setup>
    import { ref } from 'vue'
    const val = ref("");
</script>

Attributes ​

参数说明类型默认值
type设置输入框类型text/password等input原生类型text
disabled是否禁用booleanfalse
clean是否可清除booleanfalse
placeholder输入框占位文本String-