@10yun/cv-mobile-ui 0.5.7 → 0.5.9

package/ui-cv/cv-editor-parse/components/wxParseTemplate9.vue

@@ -1,88 +1,95 @@
-<template>
-  <!--判断是否是标签节点-->
-  <block v-if="node.node == 'element'">
-    <!--button类型-->
-    <button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr">
-      <wx-parse-template :node="node" />
-    </button>
-
-    <!--a类型-->
-    <view v-else-if="node.tag == 'a'" @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
-      <block v-for="(node, index) of node.nodes" :key="index">
-        <wx-parse-template :node="node" />
-      </block>
-    </view>
-
-    <!--li类型-->
-    <view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr">
-      <block v-for="(node, index) of node.nodes" :key="index">
-        <wx-parse-template :node="node" />
-      </block>
-    </view>
-
-    <!--table类型-->
-    <wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" />
-
-    <!--br类型-->
-    <!-- #ifndef H5 -->
-    <text v-else-if="node.tag == 'br'">\n</text>
-    <!-- #endif -->
-    <!-- #ifdef H5 -->
-    <br v-else-if="node.tag == 'br'">
-    <!-- #endif -->
-
-    <!--video类型-->
-    <wx-parse-video :node="node" v-else-if="node.tag == 'video'" />
-
-    <!--audio类型-->
-    <wx-parse-audio :node="node" v-else-if="node.tag == 'audio'" />
-
-    <!--img类型-->
-    <wx-parse-img :node="node" v-else-if="node.tag == 'img'" />
-
-    <!--其他标签-->
-    <view v-else :class="node.classStr" :style="node.styleStr">
-      <block v-for="(node, index) of node.nodes" :key="index">
-        <wx-parse-template :node="node" />
-      </block>
-    </view>
-  </block>
-
-  <!--判断是否是文本节点-->
-  <block v-else-if="node.node == 'text'">{{node.text}}</block>
-</template>
-
-<script>
-import wxParseTemplate from './wxParseTemplate10';
-import wxParseImg from './wxParseImg';
-import wxParseVideo from './wxParseVideo';
-import wxParseAudio from './wxParseAudio';
-import wxParseTable from './wxParseTable';
-
-export default {
-  name: 'wxParseTemplate9',
-  props: {
-    node: {},
-  },
-  components: {
-    wxParseTemplate,
-    wxParseImg,
-    wxParseVideo,
-    wxParseAudio,
-    wxParseTable
-  },
-  methods: {
-    wxParseATap(e) {
-      const {
-        href
-      } = e.currentTarget.dataset;
-      if (!href) return;
-      let parent = this.$parent;
-      while (!parent.preview || typeof parent.preview !== 'function') {
-        parent = parent.$parent;
-      }
-      parent.navigate(href, e);
-    },
-  },
-};
-</script>
+<template>
+  <view>
+    <!--判断是否是标签节点-->
+    <block v-if="node.node == 'element'">
+      <block v-if="node.tag == 'button'">
+        <button type="default" size="mini">
+          <block v-for="(node, index) of node.nodes" :key="index">
+            <wx-parse-template :node="node" />
+          </block>
+        </button>
+      </block>
+
+      <!--li类型-->
+      <block v-else-if="node.tag == 'li'">
+        <view :class="node.classStr" :style="node.styleStr">
+          <block v-for="(node, index) of node.nodes" :key="index">
+            <wx-parse-template :node="node" />
+          </block>
+        </view>
+      </block>
+
+      <!--video类型-->
+      <block v-else-if="node.tag == 'video'">
+        <wx-parse-video :node="node" />
+      </block>
+
+      <!--audio类型-->
+      <block v-else-if="node.tag == 'audio'">
+        <wx-parse-audio :node="node" />
+      </block>
+
+      <!--img类型-->
+      <block v-else-if="node.tag == 'img'">
+        <wx-parse-img :node="node" />
+      </block>
+
+      <!--a类型-->
+      <block v-else-if="node.tag == 'a'">
+        <view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+          <block v-for="(node, index) of node.nodes" :key="index">
+            <wx-parse-template :node="node" />
+          </block>
+        </view>
+      </block>
+
+      <!--br类型-->
+      <block v-else-if="node.tag == 'br'">
+        <text>\n</text>
+      </block>
+
+      <!--其他标签-->
+      <block v-else>
+        <view :class="node.classStr" :style="node.styleStr">
+          <block v-for="(node, index) of node.nodes" :key="index">
+            <wx-parse-template :node="node" />
+          </block>
+        </view>
+      </block>
+    </block>
+
+    <!--判断是否是文本节点-->
+    <block v-else-if="node.node == 'text'">{{ node.text }}</block>
+  </view>
+</template>
+
+<script>
+import wxParseTemplate from './wxParseTemplate10';
+import wxParseImg from './wxParseImg';
+import wxParseVideo from './wxParseVideo';
+import wxParseAudio from './wxParseAudio';
+
+export default {
+  name: 'wxParseTemplate9',
+  props: {
+    node: {}
+  },
+  components: {
+    wxParseTemplate,
+    wxParseImg,
+    wxParseVideo,
+    wxParseAudio
+  },
+  methods: {
+    wxParseATap(e) {
+      const { href } = e.currentTarget.dataset;
+      if (!href) return;
+      let parent = this.$parent;
+      while (!parent.preview || typeof parent.preview !== 'function') {
+        parent = parent.$parent;
+      }
+      parent.navigate(href, e);
+    }
+  }
+};
+</script>

package/ui-cv/cv-editor-parse/components/wxParseVideo.vue

@@ -1,15 +1,15 @@
-<template>
-  <!--增加video标签支持，并循环添加-->
-  <view :class="node.classStr" :style="node.styleStr">
-    <video :class="node.classStr" :style="node.styleStr" class="video-video" :src="node.attr.src"></video>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'wxParseVideo',
-  props: {
-    node: {},
-  },
-};
-</script>
+<template>
+  <!--增加video标签支持，并循环添加-->
+  <view :class="node.classStr" :style="node.styleStr">
+    <video :class="node.classStr" class="video-video" :src="node.attr.src"></video>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'wxParseVideo',
+  props: {
+    node: {}
+  }
+};
+</script>

package/ui-cv/cv-editor-parse/cv-editor-parse.vue

@@ -1,8 +1,6 @@
 <!--**
  * forked from：https://github.com/F-loat/mpvue-wxParse
- *
  * github地址: https://github.com/dcloudio/uParse
- *
  * for: uni-app框架下 富文本解析
  */-->
 
@@ -18,7 +16,6 @@
 <script>
 import HtmlToJson from './libs/html2json';
 import wxParseTemplate from './components/wxParseTemplate0';
-
 export default {
   name: 'wxParse',
   props: {
@@ -86,6 +83,7 @@ export default {
       };
       const results = HtmlToJson(parseData, customHandler, imageProp, this);
       this.imageUrls = results.imageUrls;
+      console.log(results);
       return results.nodes;
     }
   },

package/ui-cv/cv-editor-parse/libs/html2json.js

@@ -23,10 +23,14 @@ function makeMap(str) {
 }
 
 // Block Elements - HTML 5
-const block = makeMap('br,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video');
+const block = makeMap(
+  'br,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'
+);
 
 // Inline Elements - HTML 5
-const inline = makeMap('a,abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var');
+const inline = makeMap(
+  'a,abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'
+);
 
 // Elements that you can, intentionally, leave open
 // (and which close themselves)
@@ -50,9 +54,10 @@ function getScreenInfo() {
   const screen = {};
   uni.getSystemInfo({
     success: (res) => {
-      screen.width = res.windowWidth * 710 / 750;
+      // screen.width = res.windowWidth;
+      screen.width = (res.windowWidth * 710) / 750;
       screen.height = res.windowHeight;
-    },
+    }
   });
   return screen;
 }
@@ -66,7 +71,7 @@ function html2json(html, customHandler, imageProp, host) {
   const bufArray = [];
   const results = {
     nodes: [],
-    imageUrls: [],
+    imageUrls: []
   };
 
   const screen = getScreenInfo();
@@ -145,7 +150,7 @@ function html2json(html, customHandler, imageProp, host) {
         let imgUrl = node.attr.src;
         imgUrl = wxDiscode.urlToHttpUrl(imgUrl, imageProp.domain);
         Object.assign(node.attr, imageProp, {
-          src: imgUrl || '',
+          src: imgUrl || ''
         });
         if (imgUrl) {
           results.imageUrls.push(imgUrl);
@@ -159,19 +164,11 @@ function html2json(html, customHandler, imageProp, host) {
 
       // 处理font标签样式属性
       if (node.tag === 'font') {
-        const fontSize = [
-          'x-small',
-          'small',
-          'medium',
-          'large',
-          'x-large',
-          'xx-large',
-          '-webkit-xxx-large',
-        ];
+        const fontSize = ['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', '-webkit-xxx-large'];
         const styleAttrs = {
           color: 'color',
           face: 'font-family',
-          size: 'font-size',
+          size: 'font-size'
         };
         if (!node.styleStr) node.styleStr = '';
         Object.keys(styleAttrs).forEach((key) => {
@@ -236,7 +233,7 @@ function html2json(html, customHandler, imageProp, host) {
 
       const node = {
         node: 'text',
-        text,
+        text
       };
 
       if (customHandler.chars) {
@@ -252,7 +249,7 @@ function html2json(html, customHandler, imageProp, host) {
         }
         parent.nodes.push(node);
       }
-    },
+    }
   });
 
   return results;

package/ui-cv/cv-editor-parse/libs/htmlparser.js

@@ -13,7 +13,8 @@
  */
 // Regular Expressions for parsing tags and attributes
 
-const startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z0-9_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
+const startTag =
+  /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z0-9_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
 const endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
 const attr = /([a-zA-Z0-9_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
 
@@ -28,17 +29,23 @@ function makeMap(str) {
 const empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr');
 
 // Block Elements - HTML 5
-const block = makeMap('address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video');
+const block = makeMap(
+  'address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'
+);
 
 // Inline Elements - HTML 5
-const inline = makeMap('a,abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var');
+const inline = makeMap(
+  'a,abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'
+);
 
 // Elements that you can, intentionally, leave open
 // (and which close themselves)
 const closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr');
 
 // Attributes that have their values filled in disabled="disabled"
-const fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected');
+const fillAttrs = makeMap(
+  'checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'
+);
 
 function HTMLParser(html, handler) {
   let index;
@@ -98,7 +105,7 @@ function HTMLParser(html, handler) {
         attrs.push({
           name,
           value,
-          escaped: value.replace(/(^|[^\\])"/g, '$1\\"'), // "
+          escaped: value.replace(/(^|[^\\])"/g, '$1\\"') // "
         });
       });
 

package/ui-cv/cv-editor-parse/libs/wxDiscode.js

@@ -191,5 +191,5 @@ function urlToHttpUrl(url, domain) {
 
 export default {
   strDiscode,
-  urlToHttpUrl,
+  urlToHttpUrl
 };

package/ui-cv/cv-editor-parse/readme.md

@@ -2,6 +2,7 @@
 
 > 支持 Html、Markdown 解析，Fork自: [mpvue-wxParse](https://github.com/F-loat/mpvue-wxParse)
 
+
 ## 属性
 
 | 名称         | 类型     | 默认值       | 描述               |
@@ -48,7 +49,12 @@
 </template>
 
 <script>
+import uParse from '@/components/u-parse/u-parse.vue'
+
 export default {
+  components: {
+    uParse
+  },
   data () {
     return {
       article: '<div>我是HTML代码</div>'

package/ui-cv/cv-editor-parse/u-parse.css

@@ -8,29 +8,17 @@
  * for: 微信小程序富文本解析
  * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
  */
-/**
- * 请在全局下引入该文件，@import 'u-parse.css';
- */
+
 .wxParse {
-  user-select: none;
   width: 100%;
-  font-family: Helvetica, "PingFangSC", 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
-  color: #333;
-  line-height: 1.5;
-  font-size: 1em;
-  text-align: justify;
-  /* //左右两端对齐 */
+  font-family: Helvetica, sans-serif;
+  font-size: 30rpx;
+  color: #666;
+  line-height: 1.8;
 }
 
-.wxParse view,
-.wxParse uni-view {
-  word-break: break-word;
-}
-
-.wxParse .p {
-  padding-bottom: 1em;
-  clear: both;
-  /* letter-spacing: 0;//字间距 */
+.wxParse view {
+  word-break: hyphenate;
 }
 
 .wxParse .inline {
@@ -42,50 +30,47 @@
 .wxParse .div {
   margin: 0;
   padding: 0;
-  display: block;
 }
 
-.wxParse .h1 {
+.wxParse .h1 .text {
   font-size: 2em;
-  line-height: 1.2em;
   margin: 0.67em 0;
 }
-
-.wxParse .h2 {
+.wxParse .h2 .text {
   font-size: 1.5em;
   margin: 0.83em 0;
 }
-
-.wxParse .h3 {
+.wxParse .h3 .text {
   font-size: 1.17em;
   margin: 1em 0;
 }
-
-.wxParse .h4 {
+.wxParse .h4 .text {
   margin: 1.33em 0;
 }
-
-.wxParse .h5 {
+.wxParse .h5 .text {
   font-size: 0.83em;
   margin: 1.67em 0;
 }
-
-.wxParse .h6 {
-  font-size: 0.83em;
-  margin: 1.67em 0;
+.wxParse .h6 .text {
+  font-size: 0.67em;
+  margin: 2.33em 0;
 }
 
-.wxParse .h1,
-.wxParse .h2,
-.wxParse .h3,
-.wxParse .h4,
-.wxParse .h5,
-.wxParse .h6,
+.wxParse .h1 .text,
+.wxParse .h2 .text,
+.wxParse .h3 .text,
+.wxParse .h4 .text,
+.wxParse .h5 .text,
+.wxParse .h6 .text,
 .wxParse .b,
 .wxParse .strong {
   font-weight: bolder;
 }
 
+.wxParse .p {
+  margin: 1em 0;
+}
+
 .wxParse .i,
 .wxParse .cite,
 .wxParse .em,
@@ -101,7 +86,6 @@
 .wxParse .samp {
   font-family: monospace;
 }
-
 .wxParse .pre {
   overflow: auto;
   background: #f5f5f5;
@@ -109,7 +93,6 @@
   white-space: pre;
   margin: 1em 0rpx;
 }
-
 .wxParse .code {
   display: inline;
   background: #f5f5f5;
@@ -128,7 +111,6 @@
 .wxParse .sub {
   vertical-align: sub;
 }
-
 .wxParse .sup {
   vertical-align: super;
 }
@@ -157,26 +139,21 @@
   width: 100%;
 }
 
-.wxParse .uni-image {
-  max-width: 100%;
-}
-
 .wxParse .img {
-  display: block;
+  display: inline-block;
+  width: 0;
+  height: 0;
   max-width: 100%;
-  margin-bottom: -1em;
-  /* //与p标签底部padding同时修改 */
   overflow: hidden;
 }
 
 .wxParse .blockquote {
   margin: 10rpx 0;
   padding: 22rpx 0 22rpx 22rpx;
-  font-family: Courier, Calibri, "宋体";
+  font-family: Courier, Calibri, '宋体';
   background: #f5f5f5;
   border-left: 6rpx solid #dbdbdb;
 }
-
 .wxParse .blockquote .p {
   margin: 0;
 }
@@ -185,36 +162,31 @@
 .wxParse .ol {
   display: block;
   margin: 1em 0;
-  padding-left: 2em;
+  padding-left: 33rpx;
 }
-
 .wxParse .ol {
   list-style-type: disc;
 }
-
 .wxParse .ol {
   list-style-type: decimal;
 }
-
-.wxParse .ol>weixin-parse-template,
-.wxParse .ul>weixin-parse-template {
+.wxParse .ol > weixin-parse-template,
+.wxParse .ul > weixin-parse-template {
   display: list-item;
   align-items: baseline;
   text-align: match-parent;
 }
 
-.wxParse .ol>.li,
-.wxParse .ul>.li {
+.wxParse .ol > .li,
+.wxParse .ul > .li {
   display: list-item;
   align-items: baseline;
   text-align: match-parent;
 }
-
 .wxParse .ul .ul,
 .wxParse .ol .ul {
   list-style-type: circle;
 }
-
 .wxParse .ol .ol .ul,
 .wxParse .ol .ul .ul,
 .wxParse .ul .ol .ul,
@@ -225,59 +197,44 @@
 .wxParse .u {
   text-decoration: underline;
 }
-
 .wxParse .hide {
   display: none;
 }
-
 .wxParse .del {
   display: inline;
 }
-
 .wxParse .figure {
   overflow: hidden;
 }
 
 .wxParse .table {
-  border-collapse: collapse;
-  box-sizing: border-box;
-  /* 内边框 */
-  border: 1px solid #dadada;
   width: 100%;
 }
-
-.wxParse .tbody {
-  border-collapse: collapse;
-  box-sizing: border-box;
-  /* 内边框 */
-  border: 1px solid #dadada;
-}
-
 .wxParse .thead,
 .wxParse .tfoot,
-.wxParse .th {
-  border-collapse: collapse;
-  box-sizing: border-box;
-  background: #ececec;
-  font-weight: 40;
+.wxParse .tr {
+  display: flex;
+  flex-direction: row;
 }
-
 .wxParse .tr {
-  border-collapse: collapse;
-  box-sizing: border-box;
-  /* border: 2px solid #F0AD4E; */
-  overflow: auto;
+  width: 100%;
+  display: flex;
+  border-right: 2rpx solid #e0e0e0;
+  border-bottom: 2rpx solid #e0e0e0;
 }
-
 .wxParse .th,
 .wxParse .td {
-  border-collapse: collapse;
-  box-sizing: border-box;
-  border: 1px solid #dadada;
+  display: flex;
+  width: 1276rpx;
   overflow: auto;
+  flex: 1;
+  padding: 11rpx;
+  border-left: 2rpx solid #e0e0e0;
 }
-
-.wxParse .audio,
-.wxParse .uni-audio-default {
-  display: block;
+.wxParse .td:last {
+  border-top: 2rpx solid #e0e0e0;
+}
+.wxParse .th {
+  background: #f0f0f0;
+  border-top: 2rpx solid #e0e0e0;
 }