You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by da...@apache.org on 2017/08/03 13:43:40 UTC
[04/12] incubator-weex git commit: * [html5] update picker demo
* [html5] update picker 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/7a06b88b
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/7a06b88b
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/7a06b88b
Branch: refs/heads/0.16-dev
Commit: 7a06b88b27bdf42f0a60d9cfc46c6646fd87a8f6
Parents: 1cbbfe2
Author: erha19 <fa...@gmail.com>
Authored: Mon Jul 31 17:33:35 2017 +0800
Committer: erha19 <fa...@gmail.com>
Committed: Mon Jul 31 17:33:35 2017 +0800
----------------------------------------------------------------------
examples/vue/modules/picker.vue | 149 ++++++++++++++---------------------
package.json | 1 +
vue.html | 1 +
3 files changed, 61 insertions(+), 90 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/7a06b88b/examples/vue/modules/picker.vue
----------------------------------------------------------------------
diff --git a/examples/vue/modules/picker.vue b/examples/vue/modules/picker.vue
index 0750fc3..3233073 100644
--- a/examples/vue/modules/picker.vue
+++ b/examples/vue/modules/picker.vue
@@ -1,97 +1,66 @@
<template>
- <scroller>
- <div title="picker module" type="primary">
- <text style="margin-bottom: 20px;">pick value: {{value}}</text>
- <text type="primary" class="button" @click="pick" value="single pick" style="margin-bottom: 20px;"></text>
- <text type="primary" class="button" @click="pickDate" value="pickDate" style="margin-bottom: 20px;"></text>
- <text type="primary" class="button" @click="pickTime" value="pickTime"></text>
+ <div class="conatiner">
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80px ;padding: 20px;color: white">picker</text>
</div>
-
- <div title="input component" type="primary">
- <text>onchange: {{txtChange}}</text>
- <input type="date" placeholder="select date" class="input" autofocus="false" value="" @change="onchange" max="2029-11-28" min="2015-11-28"/>
- <input type="time" placeholder="select time" class="input" autofocus="false" value="" @change="onchange"/>
- </div>
- </scroller>
+ <div @click="normalpick" style="margin: 20px;padding:20px;background-color:#1ba1e2;color:#fff;"><text style="color:#fff">normalpick{{normalpickData}}</text></div>
+ <div @click="pickDate" style="margin: 20px;padding:20px;background-color:#1ba1e2;color:#fff;"><text style="color:#fff">pickDate{{pickDateData}}</text></div>
+ <div @click="pickTime" style="margin: 20px;padding:20px;background-color:#1ba1e2;color:#fff;"><text style="color:#fff">pickTime{{pickTimeData}}</text></div>
+ </div>
</template>
-<style scoped>
- .input {
- font-size: 60px;
- height: 80px;
- width: 400px;
- }
- .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>
+ .container {
+ flex: 1;
+ }
</style>
<script>
- module.exports = {
-
- data: function () {
- return {
- value: '',
- index: '',
- txtChange: ''
- };
- },
- methods: {
- pick: function () {
- var picker = require('@weex-module/picker');
- var items = new Array("Saab", "Volvo", "BMW");
- var self = this;
- picker.pick({
- 'items': items,
- 'index': self.index
- }, function (ret) {
- var result = ret.result;
- if (result == 'success') {
- self.value = items[ret.data];
- self.index = ret.data;
- }
- });
- },
- pickDate: function () {
- var picker = require('@weex-module/picker');
- var self = this;
- picker.pickDate({
- 'value': '2016-11-28',
- 'max': '2029-11-28',
- 'min': '2015-11-28'
- }, function (ret) {
- var result = ret.result;
- if (result == 'success') {
- self.value = ret.data;
- }
- });
- },
- pickTime: function () {
- var picker = require('@weex-module/picker');
- var self = this;
- picker.pickTime({
- 'value': '19:24'
- }, function (ret) {
- var result = ret.result;
- if (result == 'success') {
- self.value = ret.data;
- }
- });
- },
- onchange: function (event) {
- this.txtChange = event.value;
- console.log('onchange', event.value);
- }
- }
- };
-</script>
+ const picker = weex.requireModule('picker');
+ module.exports = {
+ data: {
+ normalpickData:'',
+ pickDateData:'',
+ pickTimeData:''
+ },
+ methods: {
+ normalpick: function() {
+ var self = this;
+ picker.pick({
+ height: '300px',
+ items: [1, 2, 3, 4],
+ }, function(ret) {
+ var result = ret.result;
+ if (result == 'success') {
+ self.normalpickData = ret.data;
+ }
+ })
+
+ },
+ pickDate: function(e) {
+ var self = this;
+ picker.pickDate({
+ 'value': '2016-12-20',
+ 'max': '2016-12-30',
+ 'min': '2014-12-30',
+ }, function(ret) {
+ var result = ret.result;
+ if (result == 'success') {
+ self.pickDateData = ret.data;
+ }
+ });
+ },
+ pickTime:function(){
+ var self = this;
+ picker.pickTime({
+ height: '300px'
+ }, function(ret) {
+ var result = ret.result;
+ if (result == 'success') {
+ self.pickTimeData = ret.data;
+ }
+ });
+ }
+ }
+ }
+</script>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/7a06b88b/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index e76c35b..5716af9 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
"weex-styler": "0.1.9"
},
"devDependencies": {
+ "@weex-project/weex-picker": "^0.2.2",
"babel-core": "^6.17.0",
"babel-eslint": "^7.2.1",
"babel-istanbul": "^0.11.0",
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/7a06b88b/vue.html
----------------------------------------------------------------------
diff --git a/vue.html b/vue.html
index bccdd30..3594474 100644
--- a/vue.html
+++ b/vue.html
@@ -53,6 +53,7 @@
<!--<script src="./dist/render.vue.js"></script>-->
<!--<script src="./dist/render.vue.min.js"></script>-->
<!--<script src="./packages/weex-vue-render/dist/index.min.js"></script>-->
+ <script src="./node_modules/@weex-project/weex-picker/js/build/index.js"></script>
</head>
<body>
<div id="root"></div>