feat(VInputPassword): Add VInputPassword Component
陈凯龙
4 years ago
parent
448ac5293e
commit
a1bf7e9b55
@ -1,19 +0,0 @@
|
||||
{
|
||||
"0 debug pnpm:scope": {
|
||||
"selected": 1
|
||||
},
|
||||
"1 error pnpm": {
|
||||
"errno": 1,
|
||||
"code": "ELIFECYCLE",
|
||||
"pkgid": "butterfly-admin@3.0.0",
|
||||
"stage": "clean",
|
||||
"script": "npx rimraf docs/node_modules && npx rimraf node_modules",
|
||||
"pkgname": "butterfly-admin",
|
||||
"err": {
|
||||
"name": "pnpm",
|
||||
"message": "butterfly-admin@3.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1",
|
||||
"code": "ELIFECYCLE",
|
||||
"stack": "pnpm: butterfly-admin@3.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1\n at EventEmitter.<anonymous> (C:\\Users\\Saber\\AppData\\Roaming\\nvm\\v16.0.0\\node_modules\\pnpm\\dist\\pnpm.cjs:103540:20)\n at EventEmitter.emit (node:events:365:28)\n at ChildProcess.<anonymous> (C:\\Users\\Saber\\AppData\\Roaming\\nvm\\v16.0.0\\node_modules\\pnpm\\dist\\pnpm.cjs:91469:18)\n at ChildProcess.emit (node:events:365:28)\n at maybeClose (node:internal/child_process:1067:16)\n at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 7.0 KiB |
@ -0,0 +1,3 @@
|
||||
import VConfigGlobal from './src/VConfigGlobal.vue'
|
||||
|
||||
export { VConfigGlobal }
|
||||
@ -0,0 +1,15 @@
|
||||
<script lang="tsx">
|
||||
import { provide, defineComponent } from 'vue'
|
||||
import { vConfigGlobalProps } from './props'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VConfigGlobal',
|
||||
inheritAttrs: false,
|
||||
props: vConfigGlobalProps,
|
||||
setup(props, { slots }) {
|
||||
provide('configGlobal', props)
|
||||
|
||||
return () => slots.default?.()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,5 @@
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
export const vConfigGlobalProps = {
|
||||
size: propTypes.oneOf(['default', 'medium', 'small', 'mini']).def('default')
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import VInputPassword from './src/VInputPassword.vue'
|
||||
|
||||
export { VInputPassword }
|
||||
@ -0,0 +1,137 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, unref, computed, watch } from 'vue'
|
||||
import { ElInput, ElIcon } from 'element-plus'
|
||||
import EyeInvisibleOutlinedE from '~icons/ant-design/eyeInvisibleOutlined'
|
||||
import EyeOutlined from '~icons/ant-design/eye-outlined'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'
|
||||
const { configGlobal } = useConfigGlobal()
|
||||
import { zxcvbn } from '@zxcvbn-ts/core'
|
||||
import type { ZxcvbnResult } from '@zxcvbn-ts/core'
|
||||
|
||||
defineProps({
|
||||
// 是否显示密码强度
|
||||
strength: propTypes.bool.def(false),
|
||||
modelValue: propTypes.string.def('')
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
// 生成class前缀
|
||||
const { getPrefixCls } = useDesign()
|
||||
const prefixCls = ref(getPrefixCls('inputpassword'))
|
||||
|
||||
// 设置input的type属性
|
||||
const textType = ref<'password' | 'text'>('password')
|
||||
function changeTextType() {
|
||||
textType.value = unref(textType) === 'text' ? 'password' : 'text'
|
||||
}
|
||||
|
||||
// 输入框的值
|
||||
const valueRef = ref('')
|
||||
// 监听
|
||||
watch(
|
||||
() => valueRef.value,
|
||||
(val: string) => {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
)
|
||||
// 获取密码强度
|
||||
const getPasswordStrength = computed(() => {
|
||||
const value = unref(valueRef)
|
||||
const zxcvbnRef = zxcvbn(unref(valueRef)) as ZxcvbnResult
|
||||
return value ? zxcvbnRef.score : -1
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
|
||||
<ElInput v-bind="$attrs" v-model="valueRef" :type="textType">
|
||||
<template #suffix>
|
||||
<ElIcon class="el-input__icon el-input__clear">
|
||||
<EyeInvisibleOutlinedE v-if="textType === 'password'" @click="changeTextType" />
|
||||
<EyeOutlined v-else @click="changeTextType" />
|
||||
</ElIcon>
|
||||
</template>
|
||||
</ElInput>
|
||||
<div
|
||||
v-if="strength"
|
||||
:class="`${prefixCls}__bar`"
|
||||
class="relative h-6px mt-10px mb-6px mr-auto ml-auto"
|
||||
>
|
||||
<div :class="`${prefixCls}__bar--fill`" :data-score="getPasswordStrength"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-inputpassword';
|
||||
|
||||
.@{prefix-cls} {
|
||||
&__bar {
|
||||
background-color: var(--el-text-color-disabled-base);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 20%;
|
||||
height: inherit;
|
||||
background-color: transparent;
|
||||
border-color: var(--el-color-white);
|
||||
border-style: solid;
|
||||
border-width: 0 5px 0 5px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
&--fill {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: inherit;
|
||||
transition: width 0.5s ease-in-out, background 0.25s;
|
||||
|
||||
&[data-score='0'] {
|
||||
width: 20%;
|
||||
background-color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
&[data-score='1'] {
|
||||
width: 40%;
|
||||
background-color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
&[data-score='2'] {
|
||||
width: 60%;
|
||||
background-color: var(--el-color-warning);
|
||||
}
|
||||
|
||||
&[data-score='3'] {
|
||||
width: 80%;
|
||||
background-color: var(--el-color-success);
|
||||
}
|
||||
|
||||
&[data-score='4'] {
|
||||
width: 100%;
|
||||
background-color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--mini > &__bar {
|
||||
border-radius: var(--el-border-radius-small);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
import { inject } from 'vue'
|
||||
|
||||
export function useConfigGlobal() {
|
||||
const configGlobal = inject('configGlobal', {}) as VConfigGlobalTypes
|
||||
|
||||
return {
|
||||
configGlobal
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import variables from '@/styles/variables.module.less'
|
||||
|
||||
export function useDesign() {
|
||||
const lessVariables = variables
|
||||
|
||||
/**
|
||||
* @param scope 类名
|
||||
* @returns 返回空间名-类名
|
||||
*/
|
||||
function getPrefixCls(scope: string) {
|
||||
return `${lessVariables.namespace}-${scope}`
|
||||
}
|
||||
|
||||
return {
|
||||
variables: lessVariables,
|
||||
getPrefixCls
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
// 命名空间
|
||||
@namespace: v;
|
||||
@ -0,0 +1,7 @@
|
||||
// 命名空间
|
||||
@namespace: v;
|
||||
|
||||
// 导出变量
|
||||
:export {
|
||||
namespace: @namespace;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
declare interface VConfigGlobalTypes {
|
||||
size?: ElememtPlusSzie
|
||||
}
|
||||
Loading…
Reference in New Issue