Merge branch 'master' of http://git.ndjsxh.cn:10080/nd/nd_h5

src/components/video.vue

@@ -4,31 +4,50 @@
     <div class="mb-6 mx-auto" v-else-if="options.image">
       <img class="mb-1" :src="options.image" />
     </div>
-    <video @play="handlePlay" webkit-playsinline playsinline x-webkit-airplay x5-playsinline preload="preload" :poster="options.poster" controls :src="options.video"></video>
+    <video @play="handlePlay" webkit-playsinline playsinline x-webkit-airplay x5-playsinline preload="preload" :style="styles"
+      :poster="options.poster" controls :src="options.video"></video>
   </div>
 </template>
 <script>
-import Base from './base';
-import EventBus from '@/utils/eventBus.js';
+  import Base from './base';
+  import EventBus from '@/utils/eventBus.js';
+  import { mixinStyle } from './utils';
 
-export default {
-  name: 'v-video',
-  extends: Base,
-  methods: {
-    handlePlay(e){
-      EventBus.$emit('playVideo', e);
+  export default {
+    name: 'v-video',
+    extends: Base,
+    computed: {
+      styles() {
+        const {
+          size,
+          color,
+          align,
+          bold,
+          style
+        } = this.options;
+        return mixinStyle({
+          'font-size': size && `${size}rem`,
+          color,
+          'text-align': align,
+          'font-weight': bold ? 'bold' : undefined,
+        }, style);
+      }
+    },
+    methods: {
+      handlePlay(e) {
+        EventBus.$emit('playVideo', e);
+      }
     }
   }
-}
 </script>
 <style lang="less">
-.video-wrapper {
-  & > :first-child {
-    margin-bottom: 0.4rem;
-  }
+  .video-wrapper {
+    &> :first-child {
+      margin-bottom: 0.4rem;
+    }
 
-  & > :last-child {
-    margin-bottom: 0;
+    &> :last-child {
+      margin-bottom: 0;
+    }
   }
-}
 </style>