完成新功能 #4

README.md

@@ -12,4 +12,5 @@
 * [需求文档](./docs/PRD.md)
 * [原型设计](./design/prototype/editor.png)
 * [开发规范](./docs/DEV.md)
+* [代码提交规范](./docs/PR.md)
 * [备忘录](./MEMO.md)

docs/PR.md

@@ -0,0 +1,12 @@
+# 代码提交规范
+
+* fork本项目, 在自己的仓库下修改代码, 然后发起 pull request
+* 如果已经fork过, 每次功能开发之前, 记得定期同步源仓库. 具体做法可以看 [这里](https://help.github.com/articles/syncing-a-fork/)
+* commit信息请注明修复了哪个issues, 用 ``#issues_id`` 的方式标注
+
+
+比如认领了任务 https://github.com/idle-dog/upup/issues/4 , issues的id就是4, 提交的信息可以标注为:
+
+```
+完成新功能 #4
+```

src/module/page/index/index.html

@@ -1,14 +1,18 @@
 <div class="p-index">
     <div class="p-index_display">
-        <w-display></w-display>
+        <w-display
+            :color="color"
+            :content="content"
+            :scale.sync="scale">
+        </w-display>
     </div>
     <div class="p-index_bgcolor">
-        <w-bgcolor color="#E50012"></w-bgcolor>
+        <w-bgcolor :color.sync="color"></w-bgcolor>
     </div>
     <div class="p-index_textarea">
-        <w-textarea></w-textarea>
+        <w-textarea :content.sync="content" placeholder=""></w-textarea>
     </div>
     <div class="p-index_toolbar">
         <w-toolbar></w-toolbar>
     </div>
-</div>
+</div>

src/module/page/index/index.js

@@ -1,8 +1,15 @@
 // 页面初始化
 
-exports.init = function(selector, options){
+exports.init = function (selector, options) {
     new Vue({
         el: selector,
+        data: function () {
+            return {
+                content: '写些你想说的话,\n用换行排列小人!',
+                scale: 1,
+                color: '#FC7D63'
+            }
+        },
         replace: false,
         template: __inline('index.html'),
         components: {
@@ -12,4 +19,4 @@ exports.init = function(selector, options){
             'w-toolbar': require('widget/toolbar')
         }
     });
-};
+};

src/module/widget/display/display.css

@@ -1,6 +1,6 @@
 .w-display {
     height: 200px;
-    background: #ccc;
+    background: #fff;
     position: relative;
 }
 

src/module/widget/display/display.html

@@ -1,7 +1,13 @@
-<div class="w-display">
-    这里是显示区
+<div class="w-display" :style="{backgroundColor: color}">
+    <h2>这里是显示区</h2><br/>
+    <ul>
+        <li>当前内容: {{content}}</li>
+        <li>缩放比例: {{scale}}</li>
+        <li>背景色: {{color}}</li>
+    </ul>
+
     <div class="w-display_zoom">
-        <w-zoom scale="1"></w-zoom>
+        <w-zoom :scale.sync="scale"></w-zoom>
     </div>
     <div class="w-display_refresh">
         刷新

src/module/widget/display/display.js

@@ -4,7 +4,7 @@
 
 module.exports = Vue.extend({
     template: __inline('display.html'),
-    props: [ 'data' ],
+    props: [ 'content', 'scale', 'color' ],
     components: {
         'w-zoom': require('widget/zoom')
     }

src/module/widget/textarea/textarea.css

@@ -1,22 +1,54 @@
 .w-textarea {
-    min-height: 200px;
+    min-height: 100px;
     position: relative;
 }
 
+.w-textarea_inner textarea, .w-textarea_inner pre {
+    margin: 0;
+    padding: 0;
+    outline: 0;
+    border: 0;
+    min-height: 100px;
+}
+
 .w-textarea_inner {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    display: block;
+    position: relative;
+    border: 1px solid #888;
+    background: #fff;
 }
 
-.w-textarea_editor {
+.w-textarea_inner > textarea,
+.w-textarea_inner > pre {
+    padding: 5px;
+    background: transparent;
+    font: 400 13px/16px helvetica, arial, sans-serif;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.w-textarea_inner > textarea {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
     width: 100%;
+    height: 100px;
+}
+
+.w-textarea_inner.active > textarea {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
     height: 100%;
-    padding: 0;
-    border: 0;
     resize: none;
-    outline: none;
-}
+}
+
+.w-textarea_inner > pre {
+    display: none;
+}
+
+.w-textarea_inner.active > pre {
+    display: block;
+    visibility: hidden;
+}

src/module/widget/textarea/textarea.html

@@ -1,5 +1,6 @@
 <div class="w-textarea">
-    <div class="w-textarea_inner">
-        <textarea class="w-textarea_editor" placeholder="输入举牌文字"></textarea>
+    <div class="w-textarea_inner active">
+        <pre><span>{{content}}</span><br></pre>
+        <textarea class="w-textarea_editor" v-bind:placeholder="placeholder" v-model="content"></textarea>
     </div>
-</div>
+</div>

src/module/widget/textarea/textarea.js

@@ -1,6 +1,19 @@
-// 文本输入组件
-// TODO
+/**
+ * 文本输入组件
+ *
+ * 功能描述：
+ * 这里是一个textarea输入框
+ * 无边框，有 1px 线条底纹
+ * 有 placeholder 占位提示
+ * 高度自适应
+ * vue组件接收 外部参数 content 表示文本内容
+ * 也支持外部传参定义 placeholder
+ */
 
 module.exports = Vue.extend({
-    template: __inline('textarea.html')
-});
+    template: __inline('textarea.html'),
+    props: ['content', 'placeholder'],
+    created: function () {
+        !this.placeholder && (this.placeholder = '输入举牌文字')
+    }
+});