Skip to content

Commit 164d8da

Browse files
YoujingyuYoujingyu
committed
complete example index.html
1 parent 5a61656 commit 164d8da

File tree

1 file changed

+134
-5
lines changed

1 file changed

+134
-5
lines changed

‎dist/example/index.html‎

Lines changed: 134 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,87 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, user-scalable=no">
66
<title>Vue custom input</title>
7+
<link href="https://cdn.bootcss.com/prism/9000.0.1/themes/prism.min.css" rel="stylesheet">
78
<style>
9+
body{
10+
margin: 0 auto;
11+
width: 100%;
12+
max-width: 800px;
13+
}
14+
.title{
15+
text-align: center;
16+
}
17+
.desciption{
18+
margin: 50px auto;
19+
font-size: 20px;
20+
line-height: 1.5;
21+
text-align: justify;
22+
}
823
.container{
924
margin: 0 auto;
1025
width: 100%;
1126
max-width: 500px;
1227
}
28+
.examples{
29+
font-size: 20px;
30+
}
31+
.item{
32+
margin: 50px auto 20px;
33+
font-size: 18px;
34+
font-weight: bold;
35+
}
36+
.item-first{
37+
margin-top: 0;
38+
}
1339
[v-cloak] {
1440
display: none;
1541
}
1642
</style>
1743
</head>
1844
<body>
45+
<h1 class="title">Vue custom input</h1>
46+
<p class="desciption">
47+
<a href="https://github.com/Youjingyu/vue-custom-input">Vue custom input</a> is a vue component for custom split input box, mobile web input box, simulating native app input box and etc. It's designed to input password and verification code. But you can also use it in other situation as you wish. <a href="https://github.com/Youjingyu/vue-custom-input">See docs.</a>
48+
</p>
49+
<p class="item examples">Examples :</p>
50+
<p class="item item-first">Code :</p>
51+
<div class="code">
52+
<pre>
53+
<code class="language-html">
54+
&lt;template&gt;
55+
&lt;custom-input
56+
input-height="50px"
57+
:input-number="4"
58+
input-type="number"
59+
input-style-type="oneBorder"
60+
@custom-input-change="change"
61+
@custom-input-complete="complete"&gt;
62+
&lt;/custom-input&gt;
63+
&lt;h4&gt;输入框值：{{customInput}}&lt;/h4&gt;
64+
&lt;/template&gt;
65+
&lt;script&gt;
66+
import customInput from 'vue-custom-input';
67+
export default {
68+
data() {
69+
return {
70+
customInput: ''
71+
}
72+
},
73+
components: { 'custom-input': customInput },
74+
methods: {
75+
change(val) {
76+
this.customInput = val;
77+
},
78+
complete(val) {
79+
this.customInput = val;
80+
}
81+
}
82+
}
83+
&lt;/script&gt;
84+
</code>
85+
</pre>
86+
</div>
87+
<p class="item">Result :</p>
1988
<div id="app">
2089
<div class="container" v-cloak>
2190
<custom-input
@@ -27,6 +96,53 @@
2796
@custom-input-complete="complete">
2897
</custom-input>
2998
<h4>输入框值：{{customInput}}</h4>
99+
</div>
100+
</div>
101+
<p class="item">Code :</p>
102+
<div class="code">
103+
<pre>
104+
<code class="language-html">
105+
&lt;template&gt;
106+
&lt;custom-input
107+
input-height="50px"
108+
:input-number="6"
109+
input-style-type="allBorder"
110+
input-type="password"
111+
password-char="*"
112+
:input-style="inputStyle"
113+
:input-active-style="inputActiveStyle"
114+
@custom-input-change="change2"
115+
@custom-input-complete="complete2"&gt;
116+
&lt;/custom-input&gt;
117+
&lt;h4&gt;输入框值：{{customInput2}}&lt;/h4&gt;
118+
&lt;/template&gt;
119+
&lt;script&gt;
120+
import customInput from 'vue-custom-input';
121+
export default {
122+
data: function () {
123+
return {
124+
inputStyle: {'border-color': '#20A0FF'},
125+
inputActiveStyle: {'outline': '#58B7FF ridge 1px'},
126+
customInput2: ''
127+
}
128+
},
129+
components: { 'custom-input': customInput },
130+
methods: {
131+
change2: function (val) {
132+
this.customInput2 = val;
133+
},
134+
complete2: function (val) {
135+
this.customInput2 = val;
136+
}
137+
}
138+
}
139+
&lt;/script&gt;
140+
</code>
141+
</pre>
142+
</div>
143+
<p class="item">Result :</p>
144+
<div id="app2">
145+
<div class="container" v-cloak>
30146
<custom-input
31147
input-height="50px"
32148
:input-number="6"
@@ -43,6 +159,7 @@ <h4>输入框值：{{customInput2}}</h4>
43159
</div>
44160
<script src="https://unpkg.com/vue@2.1/dist/vue.min.js"></script>
45161
<script src="../vue-custom-input.js"></script>
162+
<script src="https://cdn.bootcss.com/prism/1.6.0/prism.min.js"></script>
46163
<script>
47164
new Vue({
48165
el: '#app',
@@ -51,10 +168,7 @@ <h4>输入框值：{{customInput2}}</h4>
51168
},
52169
data: function () {
53170
return {
54-
inputStyle: {'border-color': '#20A0FF'},
55-
inputActiveStyle: {'outline': '#58B7FF ridge 1px'},
56171
customInput: '',
57-
customInput2: ''
58172
}
59173
},
60174
methods: {
@@ -63,15 +177,30 @@ <h4>输入框值：{{customInput2}}</h4>
63177
},
64178
complete: function (val) {
65179
this.customInput = val;
66-
},
180+
}
181+
}
182+
});
183+
new Vue({
184+
el: '#app2',
185+
components: {
186+
'custom-input': window.customInput
187+
},
188+
data: function () {
189+
return {
190+
inputStyle: {'border-color': '#20A0FF'},
191+
inputActiveStyle: {'outline': '#58B7FF ridge 1px'},
192+
customInput2: ''
193+
}
194+
},
195+
methods: {
67196
change2: function (val) {
68197
this.customInput2 = val;
69198
},
70199
complete2: function (val) {
71200
this.customInput2 = val;
72201
}
73202
}
74-
})
203+
});
75204
</script>
76205
</body>
77206
</html>

0 commit comments

Comments
 (0)