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