You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by kf...@apache.org on 2017/06/06 05:47:05 UTC
[1/2] incubator-weex git commit: + [ios] update input doc
Repository: incubator-weex
Updated Branches:
refs/heads/dev c72b23aee -> 466c4ee8a
+ [ios] update input doc
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/6baccbca
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/6baccbca
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/6baccbca
Branch: refs/heads/dev
Commit: 6baccbca96e0f1afec5de673ca3002ad46ee1c22
Parents: 38c4beb
Author: 齐山 <su...@163.com>
Authored: Tue Jun 6 13:03:40 2017 +0800
Committer: 齐山 <su...@163.com>
Committed: Tue Jun 6 13:03:40 2017 +0800
----------------------------------------------------------------------
doc/source/cn/references/components/input.md | 239 ++++++++++++++++++----
1 file changed, 194 insertions(+), 45 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6baccbca/doc/source/cn/references/components/input.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/components/input.md b/doc/source/cn/references/components/input.md
index 83cea39..796fb1f 100644
--- a/doc/source/cn/references/components/input.md
+++ b/doc/source/cn/references/components/input.md
@@ -64,7 +64,7 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
事件中 event 对象属性：
- `value`: 触发事件的组件；
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
@@ -72,19 +72,19 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
- `value`: 触发事件的组件；
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- `focus`: 组件获得输入焦点。
事件中 event 对象属性：
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- `blur`: 组件失去输入焦点。
事件中 event 对象属性：
- - `timestamp`: 事件发生时的时间戳。
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
- `return`: 键盘点击返回键。
事件中 event 对象属性：
@@ -130,64 +130,213 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
```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)
+[体验一下](http://dotwe.org/vue/dd83d941d2364f2849e45dc3c5d91ab4)
[2/2] incubator-weex git commit: Merge branch 'dev' of
https://git-wip-us.apache.org/repos/asf/incubator-weex into
example-bugfix-input-dev
Posted by kf...@apache.org.
Merge branch 'dev' of https://git-wip-us.apache.org/repos/asf/incubator-weex into example-bugfix-input-dev
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/466c4ee8
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/466c4ee8
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/466c4ee8
Branch: refs/heads/dev
Commit: 466c4ee8a7d9876a96ce11cf42bccf27a0d906a6
Parents: 6baccbc c72b23a
Author: 齐山 <su...@163.com>
Authored: Tue Jun 6 13:46:29 2017 +0800
Committer: 齐山 <su...@163.com>
Committed: Tue Jun 6 13:46:29 2017 +0800
----------------------------------------------------------------------
doc/themes/weex/languages/cn.yml | 12 +++++++++
doc/themes/weex/languages/en.yml | 13 +++++++++-
doc/themes/weex/layout/index.ejs | 28 +++++++++++++++++++++
doc/themes/weex/source/css/index.scss | 17 ++++++++++++-
doc/themes/weex/source/images/fliggy.png | Bin 0 -> 19329 bytes
doc/themes/weex/source/images/juhuasuan.png | Bin 0 -> 46340 bytes
doc/themes/weex/source/images/qianniu.png | Bin 0 -> 19852 bytes
doc/themes/weex/source/images/taopiaopiao.png | Bin 0 -> 12460 bytes
8 files changed, 68 insertions(+), 2 deletions(-)
----------------------------------------------------------------------