all files / src/textField/ textFieldUnderline.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div>
    <hr class="mu-text-field-line" :class="lineClass" />
    <hr v-if="!disabled" class="mu-text-field-focus-line" :style="errorStyle" :class="focusLineClass"/>
  </div>
</template>
 
<script>
import {getColor, convertClass} from '../utils'
export default {
  props: {
    focus: {
      type: Boolean,
      default: false
    },
    error: {
      type: Boolean
    },
    errorColor: {
      type: String
    },
    disabled: {
      type: Boolean
    },
    normalClass: {
      type: [String, Object, Array]
    },
    focusClass: {
      type: [String, Object, Array]
    }
  },
  computed: {
    lineClass () {
      const {disabled, normalClass} = this
      let classNames = []
      if (disabled) classNames.push('disabled')
      return classNames.concat(convertClass(normalClass))
    },
    focusLineClass () {
      const {normalClass, focus, focusClass, error} = this
      let classNames = []
      classNames.concat(convertClass(normalClass))
      if (error) classNames.push('error')
      if (focus) classNames.push('focus')
      return classNames.concat(convertClass(focusClass))
    },
    errorStyle () {
      return {
        'background-color': this.error ? getColor(this.errorColor) : ''
      }
    }
  }
}
</script>
 
<style lang="less">
@import "../styles/import.less";
.mu-text-field-line {
  margin: 0;
  height: 1px;
  border: none;
  background-color: @borderColor;
  left: 0;
  right: 0;
  position: absolute;
  .mu-text-field.has-icon & {
    left: 56px;
  }
  &.disabled{
    height: auto;
    background-color: transparent;
    border-bottom: 2px dotted @disabledColor;
  }
}
 
.mu-text-field-focus-line{
  margin: 0;
  height: 2px;
  border: none;
  background-color: @primaryColor;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -1px;
  transform: scaleX(0);
  transition: transform .45s @easeOutFunction;
  .mu-text-field.has-icon & {
    left: 56px;
  }
  &.focus {
    transform: scaleX(1);
  }
  &.error {
    transform: scaleX(1);
    background-color: @red;
 
  }
}
</style>