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
| <template>
| <div class="password-input">
| <el-input
| :class="{ 'use-text': withoutAutoFill, 'with-show-password': withShowPassword, 'show-password': showPassword}"
| :type="type"
| :value="value"
| :maxlength="maxlength"
| @input="$emit('input', $event)"
| />
| <i v-if="withShowPassword" class="el-input__icon el-icon-view el-input__clear" @click="switchShowPassword"></i>
| </div>
| </template>
|
| <script>
| export default {
| name: 'PasswordInput',
| props: {
| value: {},
| // 是否允许显示密码操作
| withShowPassword: {
| type: Boolean,
| default: true
| },
| // 不自动填充，仅chrome内核和safari支持（禁用浏览器在密码框聚焦时弹出密码列表，同时也会禁用浏览器密码的自动保存）
| withoutAutoFill: {
| type: Boolean,
| default: true
| },
| // 最大长度
| maxlength: {
| type: Number
| }
| },
| data () {
| return {
| type: 'text',
| showPassword: false
| }
| },
| methods: {
| /**
| * 切换隐藏/显示密码
| */
| switchShowPassword () {
| this.showPassword = !this.showPassword
| }
| }
| }
| </script>
|
| <style scoped lang="scss">
| .password-input {
| position: relative;
| .use-text {
| ::v-deep .el-input__inner {
| // 文本调整为圆点（仅chrome内核和safari支持）
| -webkit-text-security: disc;
| font-size: 14px;
| }
| // 展示密码控制
| &.with-show-password ::v-deep .el-input__inner {
| padding-right: 40px;
| }
| // 展示密码
| &.show-password ::v-deep .el-input__inner {
| -webkit-text-security: initial;
| }
| }
| // 查看密码图标
| i {
| position: absolute;
| top: 50%;
| right: 10px;
| height: 20px;
| line-height: 20px;
| margin-top: -11px;
| color: #C0C4CC;
| font-size: 14px;
| &:hover {
| color: #909399;
| }
| }
| }
| </style>
|
|
