fixed input
This commit is contained in:
parent
1fb6c51b30
commit
bd903154ab
@ -1,14 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<button @click="showMessage">显示消息</button>
|
||||
<div class="demo-box">
|
||||
<PInput placeholder="测试21">
|
||||
<template #suffix>
|
||||
<span>密码</span>
|
||||
</template>
|
||||
</PInput>
|
||||
<PInput placeholder="测试12" />
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,11 +8,9 @@
|
||||
<script lang="ts">
|
||||
|
||||
import message from "./components/message";
|
||||
import PInput from "./input/index.vue";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {PInput},
|
||||
|
||||
setup() {
|
||||
return {
|
||||
@ -33,10 +23,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-box{
|
||||
width: 500px;
|
||||
border: solid 1px #f00;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
@ -14,7 +14,17 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password], input[type=number], textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
[class^=p-]::-ms-clear,[class*=p-]::-ms-clear,[class^=p-] input::-ms-clear,
|
||||
[class*=p-] input::-ms-clear,[class^=p-] input::-ms-reveal,[class*=p-] input::-ms-reveal {
|
||||
display: none
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Source Han Sans SC', 'Microsoft YaHei', 'Microsoft YaHei UI', "Helvetica Neue", sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
@ -57,3 +67,9 @@ body {
|
||||
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
|
||||
pointer-events: all
|
||||
}
|
||||
|
||||
.icon-svg{
|
||||
}
|
||||
.pointer-cursor{
|
||||
cursor: pointer;
|
||||
}
|
22
admin-fe/src/components/icon/Eye.vue
Normal file
22
admin-fe/src/components/icon/Eye.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<svg :style="sizeStyle" class="icon-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path :fill="currentColor"
|
||||
d="M512 836.266667C230.4 836.266667 74.666667 533.333333 68.266667 520.533333c-4.266667-8.533333-4.266667-19.2 0-29.866666 6.4-12.8 164.266667-315.733333 443.733333-315.733334 281.6 0 437.333333 305.066667 443.733333 317.866667 4.266667 8.533333 4.266667 19.2 0 29.866667-6.4 10.666667-162.133333 313.6-443.733333 313.6zM132.266667 505.6c34.133333 57.6 170.666667 266.666667 379.733333 266.666667s345.6-209.066667 379.733333-266.666667c-34.133333-57.6-170.666667-266.666667-379.733333-266.666667S166.4 448 132.266667 505.6z"
|
||||
p-id="3442"></path>
|
||||
<path :fill="currentColor"
|
||||
d="M512 650.666667c-76.8 0-138.666667-61.866667-138.666667-138.666667s61.866667-138.666667 138.666667-138.666667 138.666667 61.866667 138.666667 138.666667-61.866667 138.666667-138.666667 138.666667z m0-213.333334c-40.533333 0-74.666667 34.133333-74.666667 74.666667s34.133333 74.666667 74.666667 74.666667 74.666667-34.133333 74.666667-74.666667-34.133333-74.666667-74.666667-74.666667z"
|
||||
p-id="3443"></path>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import iconComponent from "./iconComponent";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Eye",
|
||||
props: iconComponent.props,
|
||||
setup: iconComponent.setup
|
||||
})
|
||||
</script>
|
19
admin-fe/src/components/icon/EyeClose.vue
Normal file
19
admin-fe/src/components/icon/EyeClose.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<svg :style="sizeStyle" class="icon-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path :fill="currentColor"
|
||||
d="M955.733333 492.8c-6.4-12.8-162.133333-317.866667-443.733333-317.866667-23.466667 0-46.933333 2.133333-70.4 6.4-17.066667 4.266667-29.866667 19.2-25.6 36.266667 4.266667 17.066667 19.2 29.866667 36.266667 25.6 19.2-4.266667 38.4-4.266667 57.6-4.266667 209.066667 0 345.6 209.066667 379.733333 266.666667-10.666667 19.2-32 53.333333-64 91.733333-10.666667 12.8-8.533333 34.133333 4.266667 44.8 6.4 4.266667 12.8 6.4 21.333333 6.4s19.2-4.266667 25.6-10.666666c51.2-61.866667 78.933333-115.2 78.933333-117.333334 6.4-8.533333 6.4-19.2 0-27.733333zM215.466667 125.866667c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l91.733333 91.733333C138.666667 354.133333 72.533333 484.266667 68.266667 490.666667c-4.266667 8.533333-4.266667 19.2 0 29.866666 6.4 12.8 162.133333 315.733333 443.733333 315.733334 83.2 0 164.266667-27.733333 241.066667-81.066667l96 96c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c12.8-12.8 12.8-32 0-44.8L215.466667 125.866667z m243.2 334.933333l104.533333 104.533333c-12.8 12.8-32 21.333333-51.2 21.333334-40.533333 0-74.666667-34.133333-74.666667-74.666667 0-19.2 8.533333-38.4 21.333334-51.2zM512 772.266667c-209.066667 0-345.6-209.066667-379.733333-266.666667 21.333333-36.266667 81.066667-130.133333 174.933333-196.266667l104.533333 104.533334c-25.6 25.6-38.4 59.733333-38.4 96 0 76.8 61.866667 138.666667 138.666667 138.666666 36.266667 0 70.4-14.933333 96-38.4l98.133333 98.133334c-61.866667 42.666667-128 64-194.133333 64z"
|
||||
p-id="3599"></path>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import iconComponent from "./iconComponent";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EyeClose",
|
||||
props: iconComponent.props,
|
||||
setup: iconComponent.setup
|
||||
})
|
||||
</script>
|
19
admin-fe/src/components/icon/Password.vue
Normal file
19
admin-fe/src/components/icon/Password.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<svg :style="sizeStyle" class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<path :fill="currentColor"
|
||||
d="M839.68 384h-43.52v-97.28C796.16 135.68 673.28 10.24 519.68 10.24S245.76 135.68 245.76 286.72V384H184.32c-46.08 0-84.48 38.4-84.48 84.48v460.8c0 46.08 38.4 84.48 84.48 84.48h657.92c46.08 0 84.48-38.4 84.48-84.48v-460.8c-2.56-46.08-40.96-84.48-87.04-84.48z m-529.92-97.28c0-115.2 94.72-212.48 212.48-212.48s212.48 94.72 212.48 212.48V384H309.76v-97.28z m550.4 642.56c0 10.24-7.68 20.48-20.48 20.48H184.32c-10.24 0-20.48-7.68-20.48-20.48v-460.8c0-10.24 7.68-20.48 20.48-20.48h657.92c10.24 0 20.48 7.68 20.48 20.48v460.8z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import iconComponent from "./iconComponent";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Password",
|
||||
props: iconComponent.props,
|
||||
setup: iconComponent.setup
|
||||
})
|
||||
</script>
|
30
admin-fe/src/components/icon/iconComponent.ts
Normal file
30
admin-fe/src/components/icon/iconComponent.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import {computed} from "vue";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 18
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const sizeStyle = computed(() => {
|
||||
if (props.size) {
|
||||
return {
|
||||
width: props.size + 'px',
|
||||
height: props.size + 'px'
|
||||
}
|
||||
|
||||
}
|
||||
return {}
|
||||
})
|
||||
return {
|
||||
currentColor: props.color,
|
||||
sizeStyle,
|
||||
}
|
||||
}
|
||||
}
|
6
admin-fe/src/components/icon/index.ts
Normal file
6
admin-fe/src/components/icon/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import IconInfo from "./info.vue";
|
||||
import Password from "./Password.vue";
|
||||
|
||||
export {
|
||||
IconInfo, Password
|
||||
};
|
18
admin-fe/src/components/icon/info.vue
Normal file
18
admin-fe/src/components/icon/info.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<svg :style="sizeStyle" class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path :fill="currentColor"
|
||||
d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import {defineComponent} from "vue";
|
||||
import iconComponent from "./iconComponent";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Info",
|
||||
props:iconComponent.props,
|
||||
setup:iconComponent.setup
|
||||
})
|
||||
</script>
|
@ -1,7 +1,7 @@
|
||||
import {defineComponent} from "vue";
|
||||
|
||||
const IconInfo = defineComponent({
|
||||
name: 'IconInfo',
|
||||
name: 'IconTest',
|
||||
props: ['color'],
|
||||
render(props) {
|
||||
return (
|
167
admin-fe/src/components/input/index.vue
Normal file
167
admin-fe/src/components/input/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<span class="p-input-wrapper"
|
||||
:class="{'p-input-wrapper-group':($slots.prefix || $slots.suffix || type == 'password' ),'p-input-box-focus':state.focus}">
|
||||
<span v-if="$slots.prefix" class="p-input-prefix"><slot name="prefix"/></span>
|
||||
<input :type="inputType" @focus="state.focus = true"
|
||||
@blur="state.focus = false"
|
||||
:placeholder="placeholder"
|
||||
v-model="value"
|
||||
class="p-input" :class="{'p-input-box-focus':state.focus && !($slots.suffix || $slots.prefix)}">
|
||||
<span v-if="$slots.suffix || type == 'password'" class="p-input-suffix">
|
||||
<slot name="suffix"/>
|
||||
<span v-if="type == 'password'" class="pointer-cursor" @click="state.passwordVisible = !state.passwordVisible">
|
||||
<EyeClose v-if="state.passwordVisible"/>
|
||||
<Eye v-else/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {computed, reactive, ref, useSlots} from "vue";
|
||||
import Eye from "../icon/Eye.vue";
|
||||
import EyeClose from "../icon/EyeClose.vue";
|
||||
|
||||
interface PInputEvents {
|
||||
'update:modelValue': (value: string) => void
|
||||
}
|
||||
|
||||
type PInputProps = {
|
||||
placeholder?: string
|
||||
modelValue?: string
|
||||
type?: 'text' | 'password' | 'textarea'
|
||||
}
|
||||
|
||||
const props = defineProps<PInputProps>()
|
||||
const emit = defineEmits<PInputEvents>()
|
||||
const slots = useSlots()
|
||||
const state = reactive({
|
||||
focus: false,
|
||||
hover: false,
|
||||
passwordVisible: false
|
||||
})
|
||||
const inputType = computed(() => {
|
||||
const type = props.type || 'text';
|
||||
if (type === 'password' && state.passwordVisible) return 'text';
|
||||
return type;
|
||||
})
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.p-input-box-focus {
|
||||
|
||||
border-color: #2a7dc9;
|
||||
box-shadow: 0 0 0 2px #0960bd33;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.p-input {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 4px 11px;
|
||||
color: #000000d9;
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
transition: all .3s;
|
||||
|
||||
&::-moz-placeholder {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #bfbfbf;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
|
||||
&:placeholder-shown {
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #2a7dc9;
|
||||
border-right-width: 1px !important
|
||||
}
|
||||
|
||||
.p-input-rtl .p-input:hover {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px !important
|
||||
}
|
||||
|
||||
&:focus, .p-input-focused {
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
.p-input-disabled {
|
||||
color: #00000040;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.p-input-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-input-wrapper-group {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
padding: 4px 6px;
|
||||
color: #000000d9;
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #2a7dc9;
|
||||
border-right-width: 1px !important
|
||||
}
|
||||
|
||||
.p-input {
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0 6px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-prefix, .p-input-suffix {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<span class="p-input-wrapper"
|
||||
:class="{'p-input-wrapper-group':($slots.prefix || $slots.suffix ),'p-input-box-focus':state.focus}">
|
||||
<span v-if="$slots.prefix" class="p-input-prefix"><slot name="prefix"/></span>
|
||||
<input :type="type || 'text'" @focus="state.focus = true"
|
||||
@blur="state.focus = false"
|
||||
:placeholder="placeholder"
|
||||
class="p-input" :class="{'p-input-box-focus':state.focus && !($slots.suffix || $slots.prefix)}">
|
||||
<span v-if="$slots.suffix" class="p-input-suffix"><slot name="suffix"/></span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {reactive, ref, useSlots} from "vue";
|
||||
|
||||
interface PInputEvents {
|
||||
}
|
||||
|
||||
type PInputProps = {
|
||||
placeholder?: string
|
||||
type?: 'text' | 'password' | 'textarea'
|
||||
}
|
||||
|
||||
defineProps<PInputProps>()
|
||||
const emit = defineEmits<PInputEvents>()
|
||||
const slots = useSlots()
|
||||
const state = reactive({
|
||||
focus: false,
|
||||
hover: false
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.p-input-box-focus {
|
||||
|
||||
border-color: #2a7dc9;
|
||||
box-shadow: 0 0 0 2px #0960bd33;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.p-input {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 4px 11px;
|
||||
color: #000000d9;
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
transition: all .3s;
|
||||
|
||||
&::-moz-placeholder {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #bfbfbf;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
|
||||
&:placeholder-shown {
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #2a7dc9;
|
||||
border-right-width: 1px !important
|
||||
}
|
||||
|
||||
.p-input-rtl .p-input:hover {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px !important
|
||||
}
|
||||
|
||||
&:focus, .p-input-focused {
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
.p-input-disabled {
|
||||
color: #00000040;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.p-input-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-input-wrapper-group {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
padding: 4px 11px;
|
||||
color: #000000d9;
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all .3s;
|
||||
|
||||
.p-input {
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-prefix, .p-input-suffix {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
@ -2,8 +2,13 @@ import {RouteRecordRaw} from "vue-router";
|
||||
import Home from '../views/admin/Home.vue'
|
||||
import Login from '../views/Login.vue'
|
||||
import NotFound from '../views/NotFound.vue'
|
||||
import Test from '../views/Test.vue'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
component: Test
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
component: Home
|
||||
|
@ -7,7 +7,6 @@
|
||||
<p>
|
||||
<input placeholder="请输入密码" type="text" v-model="data.password">
|
||||
</p>
|
||||
<IconInfo color="#ff0000" />
|
||||
<button :disabled="loading" :type="loading?'button':'submit'">{{ loading ? '正在登录' : '登录' }}</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -18,11 +17,9 @@ import {reactive, ref} from "vue";
|
||||
import http from "../util/http";
|
||||
import {useUserStore} from "../service/store";
|
||||
import {useRouter} from "vue-router";
|
||||
import IconInfo from "../components/icon/info";
|
||||
|
||||
export default {
|
||||
name: "User",
|
||||
components: {IconInfo},
|
||||
setup() {
|
||||
// vue 数据双向绑定(响应式原理)
|
||||
// vue2 Object.definedProperty
|
||||
@ -40,12 +37,12 @@ export default {
|
||||
e.preventDefault()
|
||||
loading.value = true
|
||||
store.login(data)
|
||||
.then(()=>{
|
||||
r.replace('/home').then(()=>console.log('success')).catch(e=>console.log(e))
|
||||
.then(() => {
|
||||
r.replace('/home').then(() => console.log('success')).catch(e => console.log(e))
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
}).finally(() => {
|
||||
console.log(e)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
43
admin-fe/src/views/Test.vue
Normal file
43
admin-fe/src/views/Test.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="demo-box">
|
||||
<div class="form-item">
|
||||
<PInput placeholder="测试21" v-model="data.a">
|
||||
<template #suffix>
|
||||
<span>密码</span>
|
||||
</template>
|
||||
</PInput>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<PInput type="password" placeholder="测试12" v-model="data.b"/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<PInput type="password" placeholder="测试12" v-model="data.b"/>
|
||||
</div>
|
||||
<div>
|
||||
{{ JSON.stringify(data) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import PInput from "../components/input/index.vue";
|
||||
import {reactive} from "vue";
|
||||
|
||||
const data = reactive({
|
||||
a: '1',
|
||||
b: '2'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-box {
|
||||
width: 500px;
|
||||
border: solid 1px #f00;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
@ -556,6 +556,13 @@ convert-source-map@^1.7.0:
|
||||
resolved "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
|
||||
integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
|
||||
|
||||
copy-anything@^2.0.1:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
|
||||
integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
|
||||
dependencies:
|
||||
is-what "^3.14.1"
|
||||
|
||||
csstype@^2.6.8:
|
||||
version "2.6.21"
|
||||
resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
|
||||
@ -571,6 +578,13 @@ de-indent@^1.0.2:
|
||||
resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
|
||||
integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
|
||||
|
||||
debug@^3.2.6:
|
||||
version "3.2.7"
|
||||
resolved "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
|
||||
integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
|
||||
dependencies:
|
||||
ms "^2.1.1"
|
||||
|
||||
debug@^4.1.0:
|
||||
version "4.3.4"
|
||||
resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
|
||||
@ -583,6 +597,13 @@ electron-to-chromium@^1.4.251:
|
||||
resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
|
||||
integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
|
||||
|
||||
errno@^0.1.1:
|
||||
version "0.1.8"
|
||||
resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
|
||||
integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
|
||||
dependencies:
|
||||
prr "~1.0.1"
|
||||
|
||||
esbuild-android-64@0.15.17:
|
||||
version "0.15.17"
|
||||
resolved "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.15.17.tgz#3e639a064b275a5e9aaa02a2f4ea0e1d2d875fc9"
|
||||
@ -746,6 +767,11 @@ globals@^11.1.0:
|
||||
resolved "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
|
||||
integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
|
||||
|
||||
graceful-fs@^4.1.2:
|
||||
version "4.2.10"
|
||||
resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
|
||||
integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
|
||||
|
||||
has-flag@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
|
||||
@ -768,6 +794,18 @@ html-tags@^3.1.0:
|
||||
resolved "https://registry.npmmirror.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
|
||||
integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
|
||||
|
||||
iconv-lite@^0.6.3:
|
||||
version "0.6.3"
|
||||
resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
|
||||
integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
|
||||
dependencies:
|
||||
safer-buffer ">= 2.1.2 < 3.0.0"
|
||||
|
||||
image-size@~0.5.0:
|
||||
version "0.5.5"
|
||||
resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
|
||||
integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
|
||||
|
||||
is-core-module@^2.9.0:
|
||||
version "2.11.0"
|
||||
resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
|
||||
@ -775,6 +813,11 @@ is-core-module@^2.9.0:
|
||||
dependencies:
|
||||
has "^1.0.3"
|
||||
|
||||
is-what@^3.14.1:
|
||||
version "3.14.1"
|
||||
resolved "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
|
||||
integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
|
||||
|
||||
js-tokens@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
@ -790,6 +833,23 @@ json5@^2.2.1:
|
||||
resolved "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
|
||||
integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
|
||||
|
||||
less@^4.1.3:
|
||||
version "4.1.3"
|
||||
resolved "https://registry.npmmirror.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
|
||||
integrity sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==
|
||||
dependencies:
|
||||
copy-anything "^2.0.1"
|
||||
parse-node-version "^1.0.1"
|
||||
tslib "^2.3.0"
|
||||
optionalDependencies:
|
||||
errno "^0.1.1"
|
||||
graceful-fs "^4.1.2"
|
||||
image-size "~0.5.0"
|
||||
make-dir "^2.1.0"
|
||||
mime "^1.4.1"
|
||||
needle "^3.1.0"
|
||||
source-map "~0.6.0"
|
||||
|
||||
magic-string@^0.25.7:
|
||||
version "0.25.9"
|
||||
resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
|
||||
@ -797,6 +857,19 @@ magic-string@^0.25.7:
|
||||
dependencies:
|
||||
sourcemap-codec "^1.4.8"
|
||||
|
||||
make-dir@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
|
||||
integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
|
||||
dependencies:
|
||||
pify "^4.0.1"
|
||||
semver "^5.6.0"
|
||||
|
||||
mime@^1.4.1:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
|
||||
integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
|
||||
|
||||
minimatch@^5.1.0:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.1.tgz#6c9dffcf9927ff2a31e74b5af11adf8b9604b022"
|
||||
@ -809,6 +882,11 @@ ms@2.1.2:
|
||||
resolved "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
|
||||
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
|
||||
|
||||
ms@^2.1.1:
|
||||
version "2.1.3"
|
||||
resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
|
||||
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
|
||||
|
||||
muggle-string@^0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c"
|
||||
@ -819,11 +897,25 @@ nanoid@^3.3.4:
|
||||
resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
|
||||
integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
|
||||
|
||||
needle@^3.1.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz#07d240ebcabfd65c76c03afae7f6defe6469df44"
|
||||
integrity sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==
|
||||
dependencies:
|
||||
debug "^3.2.6"
|
||||
iconv-lite "^0.6.3"
|
||||
sax "^1.2.4"
|
||||
|
||||
node-releases@^2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
|
||||
integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
|
||||
|
||||
parse-node-version@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
|
||||
integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
|
||||
|
||||
path-parse@^1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
|
||||
@ -834,6 +926,11 @@ picocolors@^1.0.0:
|
||||
resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
|
||||
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
|
||||
|
||||
pify@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
|
||||
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
|
||||
|
||||
pinia@^2.0.27:
|
||||
version "2.0.27"
|
||||
resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.27.tgz#cf13a8dca2792a613c1d8bb8ef50707756e5a6ef"
|
||||
@ -851,6 +948,11 @@ postcss@^8.1.10, postcss@^8.4.18:
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
prr@~1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
|
||||
integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
|
||||
|
||||
resolve@^1.22.1:
|
||||
version "1.22.1"
|
||||
resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
|
||||
@ -867,6 +969,21 @@ rollup@^2.79.1:
|
||||
optionalDependencies:
|
||||
fsevents "~2.3.2"
|
||||
|
||||
"safer-buffer@>= 2.1.2 < 3.0.0":
|
||||
version "2.1.2"
|
||||
resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
|
||||
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
|
||||
|
||||
sax@^1.2.4:
|
||||
version "1.2.4"
|
||||
resolved "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
|
||||
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
|
||||
|
||||
semver@^5.6.0:
|
||||
version "5.7.1"
|
||||
resolved "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
|
||||
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
|
||||
|
||||
semver@^6.3.0:
|
||||
version "6.3.0"
|
||||
resolved "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
|
||||
@ -877,7 +994,7 @@ source-map-js@^1.0.2:
|
||||
resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
||||
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
|
||||
|
||||
source-map@^0.6.1:
|
||||
source-map@^0.6.1, source-map@~0.6.0:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||
@ -909,6 +1026,11 @@ to-fast-properties@^2.0.0:
|
||||
resolved "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
|
||||
integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
|
||||
|
||||
tslib@^2.3.0:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
|
||||
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
|
||||
|
||||
typescript@^4.9.3:
|
||||
version "4.9.3"
|
||||
resolved "https://registry.npmmirror.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"
|
||||
|
Loading…
x
Reference in New Issue
Block a user