Pre Merge pull request !204 from 云飞扬/N/A
云飞扬
3 years ago
committed by
Gitee
commit
97370cf034
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="check-list" :key="pagek">
|
||||
<div class="check-list__title">{{ title }}</div>
|
||||
<div v-for="{ key, label } in options" :key="key">
|
||||
<div class="check-list-item">
|
||||
<span class="check-list-item__prefix">
|
||||
<i
|
||||
v-if="isEqual(key, 'success')"
|
||||
class="iconfont el-icon-success"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="isEqual(key, 'error')"
|
||||
class="iconfont el-icon-error"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="isEqual(key, 'warning')"
|
||||
class="iconfont el-icon-warning"
|
||||
></i>
|
||||
<i v-else-if="isEqual(key, 'info')" class="el-icon-info"></i>
|
||||
<i v-else class="iconfont el-icon-pending"></i>
|
||||
</span>
|
||||
<div class="check-list-label">{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CheckList',
|
||||
props: {
|
||||
pagek: {
|
||||
default: new Date().getTime()
|
||||
},
|
||||
values: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
data: ()=>{
|
||||
return{
|
||||
status : ["pending", "success", "error", "warning", "info"],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
defaultStatus() {
|
||||
return this.options.reduce(
|
||||
(res, {key}) => Object.assign(res, {[key]: this.status[0]}),
|
||||
{}
|
||||
);
|
||||
},
|
||||
statusMap() {
|
||||
return Object.assign({}, this.defaultStatus(), this.values);
|
||||
},
|
||||
isEqual(key, statusCode){
|
||||
return this.statusMap()[key] == statusCode;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 胶囊状态颜色
|
||||
.el-icon-success {
|
||||
color: #40b828;
|
||||
}
|
||||
|
||||
.el-icon-error {
|
||||
color: #f0553a;
|
||||
}
|
||||
|
||||
.el-icon-warning {
|
||||
color: #fc971c;
|
||||
}
|
||||
|
||||
.el-icon-info {
|
||||
color: #878e99;
|
||||
}
|
||||
|
||||
.el-icon-pending {
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-flex;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid rgba(#000, 0.15);
|
||||
border-radius: 50%;
|
||||
// vertical-align: baseline;
|
||||
// margin-bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.check-list {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.check-list__title {
|
||||
line-height: 20px;
|
||||
color: #fc971c;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.check-list-item {
|
||||
line-height: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.check-list-item__prefix {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.check-list-label {
|
||||
margin-left: 16px + 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
import Password from "./index.vue";
|
||||
import {usePassword} from "./utils";
|
||||
|
||||
export {usePassword};
|
||||
|
||||
export default Password;
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-popover popper-class="gt-password-popper" v-bind="popoverOptions">
|
||||
<template slot="reference">
|
||||
<el-input
|
||||
class="gt-password"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
type="password"
|
||||
show-password
|
||||
>
|
||||
</el-input>
|
||||
</template>
|
||||
<CheckList
|
||||
:pagek="pagek"
|
||||
:values="checkValuesObj"
|
||||
title="密码必须包括"
|
||||
:options="checkList"
|
||||
/>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import CheckList from "./CheckList.vue";
|
||||
|
||||
const popDefault = {
|
||||
placement: "right-start",
|
||||
width: 228,
|
||||
trigger: "focus"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Password',
|
||||
components: {CheckList},
|
||||
props: {
|
||||
checkList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
popover: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
pagek: new Date().getTime(),
|
||||
popoverOptions: {},
|
||||
checkValuesObj: {},
|
||||
passwordType: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.popoverOptions = {...this.popover, ...popDefault};
|
||||
this.update(this.checkList);
|
||||
},
|
||||
methods: {
|
||||
update(validList, clear = false) {
|
||||
// 每次update 前先清空 checkValuesObj
|
||||
Object.keys(this.checkValuesObj).forEach(v => {
|
||||
this.checkValuesObj[v] = "";
|
||||
});
|
||||
|
||||
let tempObj = {};
|
||||
this.$nextTick(() => {
|
||||
this.pagek = new Date().getTime();
|
||||
tempObj =
|
||||
validList.length > 0 &&
|
||||
validList.reduce(
|
||||
(res = {}, key = "1") => Object.assign(res, {[key]: "success"}),
|
||||
{}
|
||||
);
|
||||
|
||||
if (tempObj) {
|
||||
Object.keys(tempObj).forEach(v => {
|
||||
this.checkValuesObj[v] = tempObj[v];
|
||||
});
|
||||
}
|
||||
if (clear) {
|
||||
Object.keys(this.checkValuesObj).forEach(v => {
|
||||
this.checkValuesObj[v] = "";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
export const usePassword = (options) => {
|
||||
const defaultRules = [
|
||||
{
|
||||
key: "length",
|
||||
label: "长度在6到20个字符",
|
||||
regExp: /^.{10,20}$/
|
||||
},
|
||||
{
|
||||
key: "lowercase",
|
||||
label: "使用小写字母",
|
||||
regExp: /[a-z]+/
|
||||
},
|
||||
{
|
||||
key: "capital",
|
||||
label: "用大写字母",
|
||||
regExp: /[A-Z]+/
|
||||
},
|
||||
{
|
||||
key: "number",
|
||||
label: "使用数字",
|
||||
regExp: /\d{1,}/
|
||||
}
|
||||
];
|
||||
const ruleItems = options
|
||||
? options.reduce((res, item) => {
|
||||
if (typeof item === "string") {
|
||||
const rule = defaultRules.find(i => item === i.key);
|
||||
if (rule) {
|
||||
res.push(rule);
|
||||
} else {
|
||||
throw new Error("无效的规则");
|
||||
}
|
||||
} else {
|
||||
res.push(item);
|
||||
}
|
||||
return res;
|
||||
}, [])
|
||||
: [...defaultRules];
|
||||
// 返回默认的匹配规则map 和 校验结果mapList
|
||||
return {
|
||||
checkList: ruleItems.map(({key, label}) => ({key, label})),
|
||||
validate: (value) => {
|
||||
// 过滤出符合正则的rule[], map返回key[]
|
||||
const validList = ruleItems
|
||||
.filter(({regExp, validator}) => {
|
||||
if (validator) {
|
||||
return validator(value);
|
||||
} else if (regExp) {
|
||||
return regExp.test(value);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.map(({key}) => {
|
||||
return key;
|
||||
});
|
||||
return {
|
||||
validList,
|
||||
valid: validList.length === ruleItems.length
|
||||
};
|
||||
}
|
||||
};
|
||||
};
|
||||
Loading…
Reference in new issue