Skip to content

Commit

Permalink
docs(input): [input] optimizing input component example (#2476)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr authored Nov 4, 2024
1 parent e92d2ad commit 1955deb
Show file tree
Hide file tree
Showing 9 changed files with 27 additions and 86 deletions.
2 changes: 1 addition & 1 deletion examples/sites/demos/mobile/app/input/webdoc/input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default {
},
desc: {
'zh-CN':
'<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值</p>',
'<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，number 等其他 原生 input 的 type 值</p>',
'en-US':
'<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>'
},
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/input/display-only-composition-api.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
</p>
<p>
<label>display-only&autosize：</label>
<label>display-only & autosize：</label>
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/input/display-only.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
</p>
<p>
<label>display-only&autosize：</label>
<label>display-only & autosize：</label>
<tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
</p>
</div>
Expand Down
8 changes: 6 additions & 2 deletions examples/sites/demos/pc/app/input/native-composition-api.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
<br />
<div>
<span>autocomplete="on"</span>
<br /><br />
<form>
<tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
</form>
Expand All @@ -40,11 +39,16 @@ const inputAutocomplete = ref('')
</script>

<style scoped>
.demo-input > p > span {
.demo-input > p > span,
.demo-input > div > span {
display: inline-block;
width: 130px;
}
.demo-input .tiny-input {
width: 250px;
}
.demo-input > div {
display: flex;
align-items: center;
}
</style>
8 changes: 6 additions & 2 deletions examples/sites/demos/pc/app/input/native.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
<br />
<div>
<span>autocomplete="on"</span>
<br /><br />
<form>
<tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
</form>
Expand All @@ -48,11 +47,16 @@ export default {
</script>

<style scoped>
.demo-input > p > span {
.demo-input > p > span,
.demo-input > div > span {
display: inline-block;
width: 130px;
}
.demo-input .tiny-input {
width: 250px;
}
.demo-input > div {
display: flex;
align-items: center;
}
</style>
30 changes: 0 additions & 30 deletions examples/sites/demos/pc/app/input/type-composition-api.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,7 @@
<div class="demo-input">
<tiny-input v-model="text" placeholder="text"></tiny-input>
<tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
<tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
<tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
<tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
<tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
<tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
<tiny-input type="hidden"></tiny-input>
<tiny-input type="color" v-model="color"></tiny-input>
<tiny-input type="date" v-model="date"></tiny-input>
<tiny-input type="month" v-model="month"></tiny-input>
<tiny-input type="week" v-model="week"></tiny-input>
<tiny-input type="datetime-local" v-model="datetime"></tiny-input>
<tiny-input type="time" v-model="time"></tiny-input>
<tiny-input type="file" v-model="file"></tiny-input>
<tiny-input type="range" v-model="range"></tiny-input>
</div>
</template>

Expand All @@ -25,29 +12,12 @@ import { TinyInput } from '@opentiny/vue'
const text = ref('')
const password = ref('')
const textarea = ref('')
const email = ref('')
const number = ref('')
const tel = ref('')
const url = ref('')
const color = ref('#000000')
const date = ref('')
const month = ref('')
const week = ref('')
const datetime = ref('')
const time = ref('')
const file = ref('')
const range = ref('')
</script>

<style scoped>
.demo-input .tiny-input {
width: 250px;
margin: 5px;
}
.demo-input .tiny-textarea {
width: 250px;
margin: 5px;
}
</style>
16 changes: 1 addition & 15 deletions examples/sites/demos/pc/app/input/type.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,7 @@ test('[Input]type', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('input#type')
const input = page.locator('.demo-input > .tiny-input > .tiny-input-display-only > input')
const textArea = page.locator('.demo-input > .tiny-textarea > .tiny-textarea-display-only > textarea')
await expect(input.nth(0)).toHaveAttribute('type', 'text')
await expect(input.nth(1)).toHaveAttribute('type', 'password')
await expect(input.nth(2)).toHaveAttribute('type', 'email')
await expect(input.nth(3)).toHaveAttribute('type', 'number')
await expect(input.nth(4)).toHaveAttribute('type', 'tel')
await expect(input.nth(5)).toHaveAttribute('type', 'url')
await expect(input.nth(6)).toHaveAttribute('type', 'hidden')
await expect(input.nth(7)).toHaveAttribute('type', 'color')
await expect(input.nth(8)).toHaveAttribute('type', 'date')
await expect(input.nth(9)).toHaveAttribute('type', 'month')
await expect(input.nth(10)).toHaveAttribute('type', 'week')
await expect(input.nth(11)).toHaveAttribute('type', 'datetime-local')
await expect(input.nth(12)).toHaveAttribute('type', 'time')
await expect(input.nth(13)).toHaveAttribute('type', 'file')
await expect(input.nth(14)).toHaveAttribute('type', 'range')
await expect(textArea).toBeVisible()
await expect(input.nth(2)).toHaveAttribute('type', 'number')
})
32 changes: 1 addition & 31 deletions examples/sites/demos/pc/app/input/type.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,7 @@
<div class="demo-input">
<tiny-input v-model="text" placeholder="text"></tiny-input>
<tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
<tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
<tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
<tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
<tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
<tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
<tiny-input type="hidden"></tiny-input>
<tiny-input type="color" v-model="color"></tiny-input>
<tiny-input type="date" v-model="date"></tiny-input>
<tiny-input type="month" v-model="month"></tiny-input>
<tiny-input type="week" v-model="week"></tiny-input>
<tiny-input type="datetime-local" v-model="datetime"></tiny-input>
<tiny-input type="time" v-model="time"></tiny-input>
<tiny-input type="file" v-model="file"></tiny-input>
<tiny-input type="range" v-model="range"></tiny-input>
</div>
</template>

Expand All @@ -30,19 +17,7 @@ export default {
return {
text: '',
password: '',
textarea: '',
email: '',
number: '',
tel: '',
url: '',
color: '#000000',
date: '',
month: '',
week: '',
datetime: '',
time: '',
file: '',
range: ''
number: ''
}
}
}
Expand All @@ -53,9 +28,4 @@ export default {
width: 250px;
margin: 5px;
}
.demo-input .tiny-textarea {
width: 250px;
margin: 5px;
}
</style>
13 changes: 10 additions & 3 deletions examples/sites/demos/pc/app/input/webdoc/input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,8 @@ export default {
'en-US': 'Memory History Input'
},
desc: {
'zh-CN': '<p>参考以下例子，输入完成后，输入会被记住。</p>',
'zh-CN':
'<p>通过组件实例方法 <code> addMemory </code> 添加历史输入数据，输入完成后，输入会被记住。通过 <code> memory-space </code> 属性配置最多可以被记录的条数。</p>',
'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
},
codeFiles: ['method-addMemory.vue']
Expand All @@ -253,9 +254,15 @@ export default {
'en-US': 'Native Attribute'
},
desc: {
'zh-CN': '<p>可设置 <code>name</code> <code>disabled</code> <code>readonly</code>等原生属性。</p>\n',
'zh-CN': `
<p>可设置 <code>name</code> <code>disabled</code> <code>readonly</code>等原生属性。</p>
<div class="tip custom-block">
<p class="custom-block-title"> 温馨提示： </p>
<p>原生属性是透传给 <code> input </code>原生标签的，功能和使用原生标签等同。</p>
</div>
`,
'en-US':
'<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>\n'
'<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>'
},
codeFiles: ['native.vue']
},
Expand Down

0 comments on commit 1955deb

Please sign in to comment.