Skip to content

Commit 1955deb

Browse files
zzcrzzcr
authored
docs(input): [input] optimizing input component example (#2476)
1 parent e92d2ad commit 1955deb

File tree

9 files changed

+27
-86
lines changed

9 files changed

+27
-86
lines changed

‎examples/sites/demos/mobile/app/input/webdoc/input.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default {
3737
},
3838
desc: {
3939
'zh-CN':
40-
'<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值</p>',
40+
'<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，number 等其他 原生 input 的 type 值</p>',
4141
'en-US':
4242
'<p>You can set the corresponding type through the corresponding <code>type</code> attribute. The default value is text. The options are text, textarea, and other type values of the native input</p>'
4343
},

‎examples/sites/demos/pc/app/input/display-only-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
1818
</p>
1919
<p>
20-
<label>display-only&autosize：</label>
20+
<label>display-only & autosize：</label>
2121
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
2222
</p>
2323
</div>

‎examples/sites/demos/pc/app/input/display-only.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
1818
</p>
1919
<p>
20-
<label>display-only&autosize：</label>
20+
<label>display-only & autosize：</label>
2121
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
2222
</p>
2323
</div>

‎examples/sites/demos/pc/app/input/native-composition-api.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
<br />
2222
<div>
2323
<span>autocomplete="on"</span>
24-
<br /><br />
2524
<form>
2625
<tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
2726
</form>
@@ -40,11 +39,16 @@ const inputAutocomplete = ref('')
4039
</script>
4140

4241
<style scoped>
43-
.demo-input > p > span {
42+
.demo-input > p > span,
43+
.demo-input > div > span {
4444
display: inline-block;
4545
width: 130px;
4646
}
4747
.demo-input .tiny-input {
4848
width: 250px;
4949
}
50+
.demo-input > div {
51+
display: flex;
52+
align-items: center;
53+
}
5054
</style>

‎examples/sites/demos/pc/app/input/native.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
<br />
2222
<div>
2323
<span>autocomplete="on"</span>
24-
<br /><br />
2524
<form>
2625
<tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
2726
</form>
@@ -48,11 +47,16 @@ export default {
4847
</script>
4948

5049
<style scoped>
51-
.demo-input > p > span {
50+
.demo-input > p > span,
51+
.demo-input > div > span {
5252
display: inline-block;
5353
width: 130px;
5454
}
5555
.demo-input .tiny-input {
5656
width: 250px;
5757
}
58+
.demo-input > div {
59+
display: flex;
60+
align-items: center;
61+
}
5862
</style>

‎examples/sites/demos/pc/app/input/type-composition-api.vue

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,7 @@
22
<div class="demo-input">
33
<tiny-input v-model="text" placeholder="text"></tiny-input>
44
<tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
5-
<tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
6-
<tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
75
<tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
8-
<tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
9-
<tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
10-
<tiny-input type="hidden"></tiny-input>
11-
<tiny-input type="color" v-model="color"></tiny-input>
12-
<tiny-input type="date" v-model="date"></tiny-input>
13-
<tiny-input type="month" v-model="month"></tiny-input>
14-
<tiny-input type="week" v-model="week"></tiny-input>
15-
<tiny-input type="datetime-local" v-model="datetime"></tiny-input>
16-
<tiny-input type="time" v-model="time"></tiny-input>
17-
<tiny-input type="file" v-model="file"></tiny-input>
18-
<tiny-input type="range" v-model="range"></tiny-input>
196
</div>
207
</template>
218

@@ -25,29 +12,12 @@ import { TinyInput } from '@opentiny/vue'
2512
2613
const text = ref('')
2714
const password = ref('')
28-
const textarea = ref('')
29-
const email = ref('')
3015
const number = ref('')
31-
const tel = ref('')
32-
const url = ref('')
33-
const color = ref('#000000')
34-
const date = ref('')
35-
const month = ref('')
36-
const week = ref('')
37-
const datetime = ref('')
38-
const time = ref('')
39-
const file = ref('')
40-
const range = ref('')
4116
</script>
4217

4318
<style scoped>
4419
.demo-input .tiny-input {
4520
width: 250px;
4621
margin: 5px;
4722
}
48-
49-
.demo-input .tiny-textarea {
50-
width: 250px;
51-
margin: 5px;
52-
}
5323
</style>

‎examples/sites/demos/pc/app/input/type.spec.ts

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,7 @@ test('[Input]type', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('input#type')
66
const input = page.locator('.demo-input > .tiny-input > .tiny-input-display-only > input')
7-
const textArea = page.locator('.demo-input > .tiny-textarea > .tiny-textarea-display-only > textarea')
87
await expect(input.nth(0)).toHaveAttribute('type', 'text')
98
await expect(input.nth(1)).toHaveAttribute('type', 'password')
10-
await expect(input.nth(2)).toHaveAttribute('type', 'email')
11-
await expect(input.nth(3)).toHaveAttribute('type', 'number')
12-
await expect(input.nth(4)).toHaveAttribute('type', 'tel')
13-
await expect(input.nth(5)).toHaveAttribute('type', 'url')
14-
await expect(input.nth(6)).toHaveAttribute('type', 'hidden')
15-
await expect(input.nth(7)).toHaveAttribute('type', 'color')
16-
await expect(input.nth(8)).toHaveAttribute('type', 'date')
17-
await expect(input.nth(9)).toHaveAttribute('type', 'month')
18-
await expect(input.nth(10)).toHaveAttribute('type', 'week')
19-
await expect(input.nth(11)).toHaveAttribute('type', 'datetime-local')
20-
await expect(input.nth(12)).toHaveAttribute('type', 'time')
21-
await expect(input.nth(13)).toHaveAttribute('type', 'file')
22-
await expect(input.nth(14)).toHaveAttribute('type', 'range')
23-
await expect(textArea).toBeVisible()
9+
await expect(input.nth(2)).toHaveAttribute('type', 'number')
2410
})

‎examples/sites/demos/pc/app/input/type.vue

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,7 @@
22
<div class="demo-input">
33
<tiny-input v-model="text" placeholder="text"></tiny-input>
44
<tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
5-
<tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
6-
<tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
75
<tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
8-
<tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
9-
<tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
10-
<tiny-input type="hidden"></tiny-input>
11-
<tiny-input type="color" v-model="color"></tiny-input>
12-
<tiny-input type="date" v-model="date"></tiny-input>
13-
<tiny-input type="month" v-model="month"></tiny-input>
14-
<tiny-input type="week" v-model="week"></tiny-input>
15-
<tiny-input type="datetime-local" v-model="datetime"></tiny-input>
16-
<tiny-input type="time" v-model="time"></tiny-input>
17-
<tiny-input type="file" v-model="file"></tiny-input>
18-
<tiny-input type="range" v-model="range"></tiny-input>
196
</div>
207
</template>
218

@@ -30,19 +17,7 @@ export default {
3017
return {
3118
text: '',
3219
password: '',
33-
textarea: '',
34-
email: '',
35-
number: '',
36-
tel: '',
37-
url: '',
38-
color: '#000000',
39-
date: '',
40-
month: '',
41-
week: '',
42-
datetime: '',
43-
time: '',
44-
file: '',
45-
range: ''
20+
number: ''
4621
}
4722
}
4823
}
@@ -53,9 +28,4 @@ export default {
5328
width: 250px;
5429
margin: 5px;
5530
}
56-
57-
.demo-input .tiny-textarea {
58-
width: 250px;
59-
margin: 5px;
60-
}
6131
</style>

‎examples/sites/demos/pc/app/input/webdoc/input.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,8 @@ export default {
227227
'en-US': 'Memory History Input'
228228
},
229229
desc: {
230-
'zh-CN': '<p>参考以下例子，输入完成后，输入会被记住。</p>',
230+
'zh-CN':
231+
'<p>通过组件实例方法 <code> addMemory </code> 添加历史输入数据，输入完成后，输入会被记住。通过 <code> memory-space </code> 属性配置最多可以被记录的条数。</p>',
231232
'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
232233
},
233234
codeFiles: ['method-addMemory.vue']
@@ -253,9 +254,15 @@ export default {
253254
'en-US': 'Native Attribute'
254255
},
255256
desc: {
256-
'zh-CN': '<p>可设置 <code>name</code> <code>disabled</code> <code>readonly</code>等原生属性。</p>\n',
257+
'zh-CN': `
258+
<p>可设置 <code>name</code> <code>disabled</code> <code>readonly</code>等原生属性。</p>
259+
<div class="tip custom-block">
260+
<p class="custom-block-title"> 温馨提示： </p>
261+
<p>原生属性是透传给 <code> input </code>原生标签的，功能和使用原生标签等同。</p>
262+
</div>
263+
`,
257264
'en-US':
258-
'<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>\n'
265+
'<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>'
259266
},
260267
codeFiles: ['native.vue']
261268
},

0 commit comments

Comments
 (0)