uniapp input下划线

要给UniApp中的Input组件添加下划线，可以使用以下方法：

1. 在样式中设置边框样式为下划线：

/* 在全局样式中或者组件的样式中添加以下代码 */
.input-underline {
  border: none;
  border-bottom: 1px solid #000; /* 下划线颜色可以根据需求修改 */
}

2. 在Input组件中添加对应的类名：

<template>
  <input class="input-underline" />
</template>

这样就给Input组件添加了一个下划线样式。你可以根据需要修改下划线的颜色和样式。

相关问题

uniapp input 输入邮箱，@符号前面得字符取消红色下划线

要取消@符号前面的字符的红色下划线，你可以在输入时判断输入的字符是否包含@符号，如果包含，则将@符号前后的字符分别包裹在两个span标签中，并将@符号去掉。其中，@符号前面的span标签需要设置text-decoration: none;来取消下划线样式。示例代码如下：

<template>
  <div class="parent">
    <input class="input" type="text" v-model="email" @input="onInput" placeholder="请输入邮箱地址">
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    onInput() {
      const email = this.email
      const atIndex = email.indexOf('@')
      if (atIndex > 0) {
        const prefix = email.substring(0, atIndex)
        const suffix = email.substring(atIndex + 1)
        const prefixHtml = `<span style="text-decoration: none;">${prefix}</span>`
        const suffixHtml = `<span>${suffix}</span>`
        this.email = prefixHtml + "@" + suffixHtml
      }
    }
  }
}
</script>

<style scoped>
.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}
</style>

这样就可以实现在输入邮箱时，@符号前面的字符取消红色下划线的效果。

uniapp input 输入邮箱，@符号前面得字符有红色下划线

可以通过在input的父元素上设置position属性为relative，并在其内部添加一个伪元素:before来实现。具体CSS样式如下：

.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}

然后在input中添加一个v-model指令用于绑定输入的邮箱地址，然后使用JavaScript的正则表达式来匹配@符号前面的字符，并将其包裹在一个span标签中，并设置该span标签的样式为红色下划线。示例代码如下：

<template>
  <div class="parent">
    <input class="input" type="text" v-model="email" @input="onInput" placeholder="请输入邮箱地址">
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    onInput() {
      const email = this.email
      const atIndex = email.indexOf('@')
      if (atIndex > 0) {
        const prefix = email.substring(0, atIndex)
        const suffix = email.substring(atIndex)
        const spanHtml = `<span style="text-decoration: underline; color: red;">${prefix}</span>`
        this.email = spanHtml + suffix
      }
    }
  }
}
</script>

<style scoped>
.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}
</style>

这样就可以实现在输入邮箱时，@符号前面的字符带有红色下划线的效果。