ip-input-vue3 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/dist/IpInput.css +1 -1
- package/dist/IpInput.es.js +34 -34
- package/dist/IpInput.umd.js +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -27,4 +27,11 @@ const ipAddr = reactive({
|
|
|
27
27
|
<ip-input v-model:ip="ipAddr.ip" v-model:port="ipAddr.port"/>
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
+
### 参数
|
|
31
|
+
|
|
32
|
+
| 参数 | 名称 | 是否必填 | 默认值 |
|
|
33
|
+
| :--: | :--: | :--: | :--: |
|
|
34
|
+
| v-model:ip | ip地址 | 是 | |
|
|
35
|
+
| v-model:port | 端口号 | 否 | |
|
|
36
|
+
| disabled | 是否禁用 | 否 | false |
|
|
30
37
|
|
package/dist/IpInput.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ip_input_container[data-v-
|
|
1
|
+
.ip_input_container[data-v-bb3c700c]{display:inline-flex;align-items:center;border:1px solid #ccc;box-sizing:border-box;min-height:32px}.ip_input_container[data-v-bb3c700c]:hover{border-color:#40a9ff}.ip_input_box[data-v-bb3c700c]{display:inline-flex;align-items:center}input[data-v-bb3c700c]{outline:none;width:40px;border:none;text-align:center;line-height:1px;background-color:transparent}input[type=number][data-v-bb3c700c]::-webkit-inner-spin-button,input[type=number][data-v-bb3c700c]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.symbol_box[data-v-bb3c700c]{font-weight:500}.port_input[data-v-bb3c700c]{width:60px;margin:0 8px}
|
package/dist/IpInput.es.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const S = (o) => (w("data-v-
|
|
1
|
+
import { defineComponent as b, toRef as A, reactive as C, watch as g, openBlock as u, createElementBlock as c, Fragment as N, renderList as k, createCommentVNode as f, createElementVNode as m, pushScopeId as w, popScopeId as R } from "vue";
|
|
2
|
+
const S = (o) => (w("data-v-bb3c700c"), o = o(), R(), o), V = { class: "ip_input_container" }, B = { class: "ip_input_box" }, E = ["name", "value", "onInput", "onKeydown", "disabled"], K = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "symbol_box"
|
|
5
5
|
}, j = {
|
|
6
6
|
key: 0,
|
|
7
7
|
class: "ip_input_box"
|
|
8
|
-
}, D = /* @__PURE__ */ S(() => /* @__PURE__ */
|
|
8
|
+
}, D = /* @__PURE__ */ S(() => /* @__PURE__ */ m("i", { style: { "font-style": "normal" } }, ":", -1)), F = ["value", "disabled"], L = b({
|
|
9
9
|
name: "IpInput"
|
|
10
|
-
}), O = /* @__PURE__ */
|
|
10
|
+
}), O = /* @__PURE__ */ b({
|
|
11
11
|
...L,
|
|
12
12
|
props: {
|
|
13
13
|
ip: {
|
|
@@ -23,60 +23,60 @@ const S = (o) => (w("data-v-cf20b009"), o = o(), R(), o), V = { class: "ip_input
|
|
|
23
23
|
},
|
|
24
24
|
emits: ["update:port", "update:ip", "change"],
|
|
25
25
|
setup(o, { emit: s }) {
|
|
26
|
-
const
|
|
26
|
+
const l = o, _ = A(l, "port"), a = [], e = C({
|
|
27
27
|
ipControlArr: new Array(4),
|
|
28
28
|
ipArr: new Array(4)
|
|
29
|
-
}),
|
|
30
|
-
!t ||
|
|
29
|
+
}), h = (t) => {
|
|
30
|
+
!t || a.findIndex((r) => r.name === t.name) > -1 || a.push(t);
|
|
31
31
|
}, v = (t, r) => {
|
|
32
32
|
const n = r.target.value;
|
|
33
33
|
if (r.target.value = e.ipControlArr[t] ?? "", r.data === "." && t < e.ipControlArr.length - 1) {
|
|
34
|
-
|
|
34
|
+
a[t + 1].focus(), e.ipControlArr[t + 1] !== "" && a[t + 1].select();
|
|
35
35
|
return;
|
|
36
36
|
}
|
|
37
37
|
if (isNaN(Number(r.data)))
|
|
38
38
|
return;
|
|
39
39
|
Number(n) < 0 ? e.ipControlArr[t] = 0 : Number(n) > 255 ? e.ipControlArr[t] = 255 : e.ipControlArr[t] = n;
|
|
40
|
-
const
|
|
41
|
-
s("update:ip",
|
|
42
|
-
},
|
|
40
|
+
const p = e.ipControlArr.every((i) => i === "") ? "" : e.ipControlArr.join(".");
|
|
41
|
+
s("update:ip", p), s("change", p, l.port), n.length === 3 && t < e.ipControlArr.length - 1 && (a[t + 1].focus(), e.ipControlArr[t + 1] !== "" && a[t + 1].select());
|
|
42
|
+
}, y = (t, r) => {
|
|
43
43
|
if (r.keyCode === 8 && e.ipControlArr[t] === "" && t > 0) {
|
|
44
|
-
const n =
|
|
44
|
+
const n = a[t - 1];
|
|
45
45
|
n && n.focus();
|
|
46
46
|
}
|
|
47
|
-
},
|
|
47
|
+
}, I = (t) => {
|
|
48
48
|
t.target.value && (s("update:port", Number(t.target.value)), s("change", e.ipControlArr.join("."), Number(t.target.value)));
|
|
49
49
|
};
|
|
50
50
|
return g(
|
|
51
|
-
() =>
|
|
51
|
+
() => l.ip,
|
|
52
52
|
(t) => {
|
|
53
53
|
var r;
|
|
54
|
-
(r = t == null ? void 0 : t.split(".")) == null || r.forEach((n,
|
|
55
|
-
e.ipControlArr[
|
|
54
|
+
(r = t == null ? void 0 : t.split(".")) == null || r.forEach((n, p) => {
|
|
55
|
+
e.ipControlArr[p] = n ? Number(n) : "";
|
|
56
56
|
});
|
|
57
57
|
},
|
|
58
58
|
{ immediate: !0 }
|
|
59
|
-
), (t, r) => (
|
|
60
|
-
(
|
|
61
|
-
(
|
|
59
|
+
), (t, r) => (u(), c("div", V, [
|
|
60
|
+
(u(!0), c(N, null, k(e.ipControlArr, (n, p) => (u(), c("div", B, [
|
|
61
|
+
(u(), c("input", {
|
|
62
62
|
ref_for: !0,
|
|
63
|
-
ref:
|
|
64
|
-
key:
|
|
65
|
-
name:
|
|
63
|
+
ref: h,
|
|
64
|
+
key: p,
|
|
65
|
+
name: p + "",
|
|
66
66
|
value: n,
|
|
67
67
|
type: "text",
|
|
68
|
-
onInput: (
|
|
69
|
-
onKeydown: (
|
|
68
|
+
onInput: (i) => v(p, i),
|
|
69
|
+
onKeydown: (i) => y(p, i),
|
|
70
70
|
disabled: o.disabled
|
|
71
71
|
}, null, 40, E)),
|
|
72
|
-
|
|
72
|
+
p < e.ipControlArr.length - 1 ? (u(), c("i", K, "·")) : f("", !0)
|
|
73
73
|
]))), 256)),
|
|
74
|
-
o.port !== void 0 ? (
|
|
74
|
+
o.port !== void 0 ? (u(), c("div", j, [
|
|
75
75
|
D,
|
|
76
|
-
|
|
76
|
+
m("input", {
|
|
77
77
|
class: "port_input",
|
|
78
|
-
value:
|
|
79
|
-
onInput:
|
|
78
|
+
value: _.value,
|
|
79
|
+
onInput: I,
|
|
80
80
|
type: "number",
|
|
81
81
|
disabled: o.disabled
|
|
82
82
|
}, null, 40, F)
|
|
@@ -85,11 +85,11 @@ const S = (o) => (w("data-v-cf20b009"), o = o(), R(), o), V = { class: "ip_input
|
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
87
|
const P = (o, s) => {
|
|
88
|
-
const
|
|
89
|
-
for (const [
|
|
90
|
-
|
|
91
|
-
return
|
|
92
|
-
}, d = /* @__PURE__ */ P(O, [["__scopeId", "data-v-
|
|
88
|
+
const l = o.__vccOpts || o;
|
|
89
|
+
for (const [_, a] of s)
|
|
90
|
+
l[_] = a;
|
|
91
|
+
return l;
|
|
92
|
+
}, d = /* @__PURE__ */ P(O, [["__scopeId", "data-v-bb3c700c"]]);
|
|
93
93
|
d.install = (o) => {
|
|
94
94
|
o.component("IpInput", d);
|
|
95
95
|
};
|
package/dist/IpInput.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(t=typeof globalThis<"u"?globalThis:t||self,t.IpInput=i(t.Vue))})(this,function(t){"use strict";const i=n=>(t.pushScopeId("data-v-
|
|
1
|
+
(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(t=typeof globalThis<"u"?globalThis:t||self,t.IpInput=i(t.Vue))})(this,function(t){"use strict";const i=n=>(t.pushScopeId("data-v-bb3c700c"),n=n(),t.popScopeId(),n),_={class:"ip_input_container"},m={class:"ip_input_box"},h=["name","value","onInput","onKeydown","disabled"],b={key:0,class:"symbol_box"},I={key:0,class:"ip_input_box"},y=i(()=>t.createElementVNode("i",{style:{"font-style":"normal"}},":",-1)),C=["value","disabled"],A=t.defineComponent({name:"IpInput"}),k=t.defineComponent({...A,props:{ip:{type:String},port:{type:Number},disabled:{type:Boolean,default:!1}},emits:["update:port","update:ip","change"],setup(n,{emit:l}){const a=n,f=t.toRef(a,"port"),s=[],o=t.reactive({ipControlArr:new Array(4),ipArr:new Array(4)}),g=e=>{!e||s.findIndex(r=>r.name===e.name)>-1||s.push(e)},B=(e,r)=>{const p=r.target.value;if(r.target.value=o.ipControlArr[e]??"",r.data==="."&&e<o.ipControlArr.length-1){s[e+1].focus(),o.ipControlArr[e+1]!==""&&s[e+1].select();return}if(isNaN(Number(r.data)))return;Number(p)<0?o.ipControlArr[e]=0:Number(p)>255?o.ipControlArr[e]=255:o.ipControlArr[e]=p;const c=o.ipControlArr.every(u=>u==="")?"":o.ipControlArr.join(".");l("update:ip",c),l("change",c,a.port),p.length===3&&e<o.ipControlArr.length-1&&(s[e+1].focus(),o.ipControlArr[e+1]!==""&&s[e+1].select())},N=(e,r)=>{if(r.keyCode===8&&o.ipControlArr[e]===""&&e>0){const p=s[e-1];p&&p.focus()}},E=e=>{e.target.value&&(l("update:port",Number(e.target.value)),l("change",o.ipControlArr.join("."),Number(e.target.value)))};return t.watch(()=>a.ip,e=>{var r;(r=e==null?void 0:e.split("."))==null||r.forEach((p,c)=>{o.ipControlArr[c]=p?Number(p):""})},{immediate:!0}),(e,r)=>(t.openBlock(),t.createElementBlock("div",_,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.ipControlArr,(p,c)=>(t.openBlock(),t.createElementBlock("div",m,[(t.openBlock(),t.createElementBlock("input",{ref_for:!0,ref:g,key:c,name:c+"",value:p,type:"text",onInput:u=>B(c,u),onKeydown:u=>N(c,u),disabled:n.disabled},null,40,h)),c<o.ipControlArr.length-1?(t.openBlock(),t.createElementBlock("i",b,"·")):t.createCommentVNode("",!0)]))),256)),n.port!==void 0?(t.openBlock(),t.createElementBlock("div",I,[y,t.createElementVNode("input",{class:"port_input",value:f.value,onInput:E,type:"number",disabled:n.disabled},null,40,C)])):t.createCommentVNode("",!0)]))}}),V="",d=((n,l)=>{const a=n.__vccOpts||n;for(const[f,s]of l)a[f]=s;return a})(k,[["__scopeId","data-v-bb3c700c"]]);return d.install=n=>{n.component("IpInput",d)},d});
|
package/package.json
CHANGED