You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/06/07 08:08:35 UTC
[36/50] incubator-weex git commit: + [example] update input demo
+ [example] update input demo
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/38c4bebb
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/38c4bebb
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/38c4bebb
Branch: refs/heads/0.14-dev
Commit: 38c4bebb3cf51d201a235f3ec502ff3d03e57e32
Parents: 1c0d992
Author: 齐山 <su...@163.com>
Authored: Tue Jun 6 12:43:55 2017 +0800
Committer: 齐山 <su...@163.com>
Committed: Tue Jun 6 12:43:55 2017 +0800
----------------------------------------------------------------------
.../cn/v-0.10/references/components/input.md | 216 +++++++++++++++--
doc/source/references/components/input.md | 231 +++++++++++++++----
2 files changed, 381 insertions(+), 66 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/38c4bebb/doc/source/cn/v-0.10/references/components/input.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/v-0.10/references/components/input.md b/doc/source/cn/v-0.10/references/components/input.md
index a1964f1..9a7b8ff 100644
--- a/doc/source/cn/v-0.10/references/components/input.md
+++ b/doc/source/cn/v-0.10/references/components/input.md
@@ -54,7 +54,7 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
事件中 event 对象属性:
- `value`: 触发事件的组件;
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
@@ -62,19 +62,19 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
- `value`: 触发事件的组件;
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- `focus`: 组件获得输入焦点。
事件中 event 对象属性:
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- `blur`: 组件失去输入焦点。
事件中 event 对象属性:
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- 通用事件
@@ -98,46 +98,212 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
```html
<template>
<div>
- <input
- type="text"
- placeholder="Input Something"
- class="input"
- autofocus="true"
- value=""
- onchange="onchange"
- oninput="oninput"
- />
- <text>oninput: {{txtInput}}</text>
- <text>onchange: {{txtChange}}</text>
+ <div>
+ <text style="font-size: 40px">oninput: {{txtInput}}</text>
+ <text style="font-size: 40px">onchange: {{txtChange}}</text>
+ <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
+ </div>
+ <scroller>
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
+ </div>
+ <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput" @focus="onfocus" @blur="onblur"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
+ </div>
+ <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
+ </div>
+ <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
+ </div>
+ <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
+ </div>
+ <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
+ </div>
+ <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
+ </div>
+ <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="Focus" type="primary" @click="focus"></text>
+ <text class="button" value="Blur" type="primary" @click="blur"></text>
+ </div>
+
+ <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="setRange" type="primary" @click="setRange"></text>
+ </div>
+ <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
+ </div>
+
+
+
+ </scroller>
</div>
</template>
-<style>
+<style scoped>
.input {
- font-size: 60;
- height: 80;
- width: 400;
+ font-size: 60px;
+ height: 80px;
+ width: 750px;
+ }
+ .button {
+ font-size: 36;
+ width: 200;
+ color: #41B883;
+ text-align: center;
+ padding-top: 10;
+ padding-bottom: 10;
+ border-width: 2;
+ border-style: solid;
+ margin-right: 20;
+ border-color: rgb(162, 217, 192);
+ background-color: rgba(162, 217, 192, 0.2);
}
</style>
<script>
+ const modal = weex.requireModule('modal')
module.exports = {
- data: {
- txtInput: '',
- txtChange: ''
+ data: function () {
+ return {
+ txtInput: '',
+ txtChange: '',
+ txtReturnType: '',
+ txtSelection:'',
+ autofocus: false
+ };
},
methods: {
- onchange: function(event) {
+ ready: function () {
+ var self = this;
+ setTimeout(function () {
+ self.autofocus = true;
+ }, 1000);
+ },
+ onchange: function (event) {
this.txtChange = event.value;
console.log('onchange', event.value);
},
- oninput: function(event) {
+ onreturn: function (event) {
+ this.txtReturnType = event.returnKeyType;
+ console.log('onreturn', event.type);
+ },
+ oninput: function (event) {
this.txtInput = event.value;
console.log('oninput', event.value);
+ },
+ focus: function () {
+ this.$refs['input1'].focus();
+ },
+ blur: function () {
+ this.$refs['input1'].blur();
+ },
+ setRange: function() {
+ console.log(this.$refs["inputselection"]);
+ this.$refs["inputselection"].setSelectionRange(2, 6);
+ },
+ onfocus () {
+ console.log('onfocus:');
+ modal.toast({
+ message: 'onfocus',
+ duration: 0.8
+ })
+ },
+ onblur () {
+ console.log('onblur:');
+ modal.toast({
+ message: 'input blur',
+ duration: 0.8
+ })
}
}
};
</script>
```
-[体验一下](http://dotwe.org/ccf22bec1766abca6a81fd4b658c8827)
+[体验一下](http://dotwe.org/vue/dd83d941d2364f2849e45dc3c5d91ab4)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/38c4bebb/doc/source/references/components/input.md
----------------------------------------------------------------------
diff --git a/doc/source/references/components/input.md b/doc/source/references/components/input.md
index 13d7469..0864817 100644
--- a/doc/source/references/components/input.md
+++ b/doc/source/references/components/input.md
@@ -108,64 +108,213 @@ does not support the common-event 'click'. Please listen to the 'input' or '
```html
<template>
- <div class="wrapper">
- <input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></input>
+ <div>
+ <div>
+ <text style="font-size: 40px">oninput: {{txtInput}}</text>
+ <text style="font-size: 40px">onchange: {{txtChange}}</text>
+ <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
+ </div>
+ <scroller>
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
+ </div>
+ <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput" @focus="onfocus" @blur="onblur"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
+ </div>
+ <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
+ </div>
+ <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
+ </div>
+ <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
+ </div>
+ <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
+ </div>
+ <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
+ </div>
+ <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="Focus" type="primary" @click="focus"></text>
+ <text class="button" value="Blur" type="primary" @click="blur"></text>
+ </div>
+
+ <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="setRange" type="primary" @click="setRange"></text>
+ </div>
+ <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
+ </div>
+
+
+
+ </scroller>
</div>
</template>
+<style scoped>
+ .input {
+ font-size: 60px;
+ height: 80px;
+ width: 750px;
+ }
+ .button {
+ font-size: 36;
+ width: 200;
+ color: #41B883;
+ text-align: center;
+ padding-top: 10;
+ padding-bottom: 10;
+ border-width: 2;
+ border-style: solid;
+ margin-right: 20;
+ border-color: rgb(162, 217, 192);
+ background-color: rgba(162, 217, 192, 0.2);
+ }
+</style>
+
<script>
const modal = weex.requireModule('modal')
-
- export default {
+ module.exports = {
+ data: function () {
+ return {
+ txtInput: '',
+ txtChange: '',
+ txtReturnType: '',
+ txtSelection:'',
+ autofocus: false
+ };
+ },
methods: {
- oninput (event) {
- console.log('oninput:', event.value)
- modal.toast({
- message: `oninput: ${event.value}`,
- duration: 0.8
- })
+ ready: function () {
+ var self = this;
+ setTimeout(function () {
+ self.autofocus = true;
+ }, 1000);
},
- onchange (event) {
- console.log('onchange:', event.value)
- modal.toast({
- message: `onchange: ${event.value}`,
- duration: 0.8
- })
+ onchange: function (event) {
+ this.txtChange = event.value;
+ console.log('onchange', event.value);
+ },
+ onreturn: function (event) {
+ this.txtReturnType = event.returnKeyType;
+ console.log('onreturn', event.type);
+ },
+ oninput: function (event) {
+ this.txtInput = event.value;
+ console.log('oninput', event.value);
+ },
+ focus: function () {
+ this.$refs['input1'].focus();
+ },
+ blur: function () {
+ this.$refs['input1'].blur();
+ },
+ setRange: function() {
+ console.log(this.$refs["inputselection"]);
+ this.$refs["inputselection"].setSelectionRange(2, 6);
},
- onfocus (event) {
- console.log('onfocus:', event.value)
+ onfocus () {
+ console.log('onfocus:');
modal.toast({
- message: `onfocus: ${event.value}`,
+ message: 'onfocus',
duration: 0.8
})
},
- onblur (event) {
- console.log('onblur:', event.value)
+ onblur () {
+ console.log('onblur:');
modal.toast({
- message: `input blur: ${event.value}`,
+ message: 'input blur',
duration: 0.8
})
}
}
- }
+ };
</script>
-
-<style>
- .input {
- font-size: 50px;
- width: 650px;
- margin-top: 50px;
- margin-left: 50px;
- padding-top: 20px;
- padding-bottom: 20px;
- padding-left: 20px;
- padding-right: 20px;
- color: #666666;
- border-width: 2px;
- border-style: solid;
- border-color: #41B883;
- }
-</style>
```
-[try it](http://dotwe.org/vue/e56d9ebeede8f80bbc8b53637395d22f)
+[try it](http://dotwe.org/vue/dd83d941d2364f2849e45dc3c5d91ab4)