fix: 修复动态传入nodes/html无效的问题

ianho · Jan 28, 2019 · 65e90e2 · 65e90e2
1 parent 46b6c03
commit 65e90e2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
diff --git a/fragment/components/xing-editor.js b/fragment/components/xing-editor.js
@@ -18,8 +18,14 @@ Component({
     // },
 
     //输入内容
-    nodes: Array,
-    html: String,
+    nodes: {
+      type: Array,
+      observer: 'insertNodesOrHtml',
+    },
+    html: {
+      type: String,
+      observer: 'insertNodesOrHtml',
+    },
 
     //内容输出格式，参考rich-text组件，默认为节点列表
     outputType: {
@@ -52,19 +58,24 @@ Component({
     this.setData({
       windowHeight,
     })
-    if (this.properties.nodes && this.properties.nodes.length > 0) {
-      const textBufferPool = [];
-      this.properties.nodes.forEach((node, index) => {
-        if (node.name === 'p') {
-          textBufferPool[index] = node.children[0].text;
-        }
-      })
-      this.setData({
-        textBufferPool,
-        nodeList: this.properties.nodes,
-      })
-    } else if (this.properties.html) {
-      const nodeList = this.HTMLtoNodeList();
+    this.insertNodesOrHtml();
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    insertNodesOrHtml: function () {
+      let nodeList;
+      if (this.properties.nodes && this.properties.nodes.length > 0) {
+        nodeList = this.properties.nodes;
+      } else if (this.properties.html) {
+        nodeList = this.HTMLtoNodeList();
+      }
+      this.insertNodes(nodeList);
+    },
+
+    insertNodes: function (nodeList) {
       const textBufferPool = [];
       nodeList.forEach((node, index) => {
         if (node.name === 'p') {
@@ -75,13 +86,8 @@ Component({
         textBufferPool,
         nodeList,
       })
-    }
-  },
+    },
 
-  /**
-   * 组件的方法列表
-   */
-  methods: {
     /**
      * 事件：添加文本
      */

diff --git a/fragment/index/index.js b/fragment/index/index.js
@@ -2,7 +2,12 @@ const app = getApp()
 
 Page({
   data: {
-    html: '<p class="xing-p">不谈琐碎的细节，突出主题，颜色运用。这些都是行为，这些行为是纹身师的能力表达，而他们要达到一个目标：</p><img class="xing-img" style="width: 100%" src="https://www.uooyoo.com/img2017/2/15/2017021560909533.jpg" _height="0.61983" _uploaded="true"></img><p class="xing-p">创作出来的这个纹身，有没有在瞬间抓住人眼球，让人不断的想一直看。</p>',
+  },
+
+  onLoad: function () {
+    this.setData({
+      html: '<p class="xing-p">不谈琐碎的细节，突出主题，颜色运用。这些都是行为，这些行为是纹身师的能力表达，而他们要达到一个目标：</p><img class="xing-img" style="width: 100%" src="https://www.uooyoo.com/img2017/2/15/2017021560909533.jpg" _height="0.61983" _uploaded="true"></img><p class="xing-p">创作出来的这个纹身，有没有在瞬间抓住人眼球，让人不断的想一直看。</p>'
+    })
   },
 
   finish: function (e) {