jobsys-newbie
Version:
Enhanced component based on ant-design-vue
6 lines (5 loc) • 5.42 kB
JavaScript
import{g}from"./style-3dc3bceb.js";import{b}from"./index-54e202a8.js";import{O as k,r as i,bp as w,y as r,d as n,e as f,_ as x,o as _,c as q,u as y,a as u}from"./app-e5356031.js";import"./isNull-4293306c.js";import"./isUndefined-aa0326a0.js";import"./compact-item-45f3d050.js";import"./FormItemContext-af84826a.js";import"./statusUtils-41ec9e8f.js";import"./vnode-8424d922.js";import"./omit-dc457db2.js";import"./CloseCircleFilled-7d1a9da0.js";import"./index-2bac9f50.js";import"./EyeOutlined-9657ac6a.js";const N=k({name:"NewbiePassword",components:{InputPassword:b},props:{value:{type:String,default:""},min:{type:Number,default:8},max:{type:Number,default:20},width:{type:[Number,String],default:300}},emits:["update:value","change"],setup(a,{emit:o,expose:d}){const t=i("");w(()=>a.modelValue,()=>{t.value=a.modelValue});const e=r(()=>{let s=0;return[/\d/,/[a-z]/,/[A-Z]/,/[^a-zA-Z0-9]/].forEach(m=>{m.test(t.value)&&(s+=1)}),s}),p=["","bad","weak","medium","strong"],c=s=>{const{value:l}=s.target;o("change",s),o("update:value",l)},h=r(()=>t.value.length>0&&t.value.length<a.min||t.value.length>a.max||e.value<4),v=r(()=>t.value.length>0&&t.value.length<a.min?`密码长度不能少于${a.min}个字符`:t.value.length>a.max?`密码长度不能超过${a.max}个字符`:e.value<4?"密码必须包含数字、小写字母、大写字母和特殊符号":"");return d({strength:e}),()=>n("div",{class:"newbie-password",style:{width:g(a.width)}},[n(f("input-password"),{value:t.value,"onUpdate:value":s=>t.value=s,onChange:c,minlength:a.min,maxlength:a.max},null),n("div",{class:`strength-indicator-container ${p[e.value]}`},[n("div",{class:`strength-indicator ${e.value>=1?"active":""}`},null),n("div",{class:`strength-indicator ${e.value>=2?"active":""}`},null),n("div",{class:`strength-indicator ${e.value>=3?"active":""}`},null),n("div",{class:`strength-indicator ${e.value>=4?"active":""}`},null)]),h.value?n("div",{class:"error-message"},[v.value]):null])}}),P=u('<h1 id="newbiepassword" tabindex="-1"><a class="header-anchor" href="#newbiepassword" aria-hidden="true">#</a> NewbiePassword</h1><blockquote><p>密码输入框</p></blockquote><p>分为 4 个密码强度等级，每有以下字符的一种增强一个等级：数字，大写字母，小写字母，特殊字符 每个等级都有对应的颜色，当输入的密码包含对应的等级时，对应的等级颜色会高亮</p><p>Version: 1.0.0</p><h2 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>value</td><td>输入框的值</td><td>string</td><td>-</td><td>""</td></tr><tr><td>min</td><td>最小长度</td><td>number</td><td>-</td><td>8</td></tr><tr><td>max</td><td>最大长度</td><td>number</td><td>-</td><td>20</td></tr><tr><td>width</td><td>宽度</td><td>number|string</td><td>-</td><td>300</td></tr></tbody></table><h2 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> Events</h2><table><thead><tr><th>Event name</th><th>Properties</th><th>Description</th></tr></thead><tbody><tr><td>update:value</td><td></td><td></td></tr><tr><td>change</td><td><strong>event</strong> <code>Event</code> - 事件对象</td><td>输入框内容变化时的回调</td></tr></tbody></table><hr><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h2><hr>',11),$=u(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> password <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbiePassword</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1),E={__name:"NewbiePassword.html",setup(a){const o=i("");return(d,t)=>(_(),q("div",null,[P,n(y(N),{value:o.value,"onUpdate:value":t[0]||(t[0]=e=>o.value=e),width:"300"},null,8,["value"]),$]))}},O=x(E,[["__file","NewbiePassword.html.vue"]]);export{O as default};