更新规则

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     // 3: ESLint + Standard config
     // extends: [ 'plugin:vue/essential', '@vue/airbnb',],
     // ESLint + Prettier
-    extends: ['plugin:vue/essential', 'eslint:recommended'],
+    extends: ['plugin:vue/recommended', 'eslint:recommended'],
     plugins: [],
     parserOptions: {
         parser: 'babel-eslint'

src/components/videoCutter/videoControl.vue

 <template>
-    <div class="video-control">
-        <div
-class="video-play-btn"
-@click="play()">
-            播放
-        </div>
-        <div class="video-time-content">
-            <div class="now-time">
-                {{ duration | formatTime }}
-            </div>
-            <span>/</span>
-            <div class="total-time">
-                {{ duration | formatTime }}
-            </div>
-        </div>
+  <div class="video-control">
+    <div
+      class="video-play-btn"
+      @click="play()"
+    >
+      播放
     </div>
+    <div class="video-time-content">
+      <div class="now-time">
+        {{ duration | formatTime }}
+      </div>
+      <span>/</span>
+      <div class="total-time">
+        {{ duration | formatTime }}
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {}
-    },
-    props: ['duration', 'nowTime'],
-    methods: {
-        play() {
-            this.$emit('play')
-        }
-    },
     filters: {
         formatTime(duration) {
             if (duration <= 0) return '00:00'
@@ -39,6 +31,15 @@ export default {
             sec = sec || '00'
             return min + ':' + sec
         }
+    },
+    props: ['duration', 'nowTime'], // eslint-disable-line
+    data() {
+        return {}
+    },
+    methods: {
+        play() {
+            this.$emit('play')
+        }
     }
 }
 </script>

src/components/videoCutter/videoPlayer.vue

@@ -33,6 +33,10 @@ export default {
             })
         })
     },
+    beforeDestroy() {
+        this.$refs.videoDom.removeEventListener('canplay')
+        this.$refs.videoDom.removeEventListener('ended')
+    },
     methods: {
         canPlayFunc() {
             this.canPlay = true
@@ -52,10 +56,6 @@ export default {
             if (!this.canPlay) return
             this.$refs.videoDom.currentTime = time
         }
-    },
-    beforeDestroy() {
-        this.$refs.videoDom.removeEventListener('canplay')
-        this.$refs.videoDom.removeEventListener('ended')
     }
 }
 </script>

src/views/videoConverter.vue

 <template>
-    <div class="videoConverter">
-        <ul>
-            <li
-v-for="(item, index) in taskList"
-:key="index">
-                <div class="info">
-                    <div class="cove">视频封面</div>
-                    <div>
-                        <div>{{ item.name }}.mp4</div>
-                        <div>时长:{{ item.duration }}</div>
-                    </div>
-                </div>
-                <div class="operationPanel">
-                    <div
-class="wait"
-v-show="item.state == 0">
-                        <div>输出格式</div>
-                        <div class="selectionFormat">mp4</div>
-                        <div
-class="delete"
-@click="clearTask(item)">删除</div>
-                    </div>
-                    <div
-class="active"
-v-show="item.state == 1">
-                        <div class="progress">
-                            <div>转换中{{ item.progress }}%</div>
-                            <div class="slide">
-                                <div></div>
-                            </div>
-                        </div>
-
-                        <div
-class="stop"
-@click="stopTask(item)">取消</div>
-                    </div>
-                </div>
-            </li>
-        </ul>
-
-        <div class="editBar">
+  <div class="videoConverter">
+    <ul>
+      <li
+        v-for="(item, index) in taskList"
+        :key="index"
+      >
+        <div class="info">
+          <div class="cove">
+            视频封面
+          </div>
+          <div>
+            <div>{{ item.name }}.mp4</div>
+            <div>时长:{{ item.duration }}</div>
+          </div>
+        </div>
+        <div class="operationPanel">
+          <div
+            v-show="item.state == 0"
+            class="wait"
+          >
+            <div>输出格式</div>
+            <div class="selectionFormat">
+              mp4
+            </div>
             <div
-class="addVideo"
-@click="addVideo">添加视频</div>
+              class="delete"
+              @click="clearTask(item)"
+            >
+              删除
+            </div>
+          </div>
+          <div
+            v-show="item.state == 1"
+            class="active"
+          >
+            <div class="progress">
+              <div>转换中{{ item.progress }}%</div>
+              <div class="slide">
+                <div />
+              </div>
+            </div>
+
             <div
-class="clearList"
-@click="clearAllTasks">清空列表</div>
-            <div class="clearWatermark">去除水印</div>
+              class="stop"
+              @click="stopTask(item)"
+            >
+              取消
+            </div>
+          </div>
         </div>
+      </li>
+    </ul>
 
-        <div
-class="startAll"
-@click="startAllTasks">开始转换</div>
+    <div class="editBar">
+      <div
+        class="addVideo"
+        @click="addVideo"
+      >
+        添加视频
+      </div>
+      <div
+        class="clearList"
+        @click="clearAllTasks"
+      >
+        清空列表
+      </div>
+      <div class="clearWatermark">
+        去除水印
+      </div>
     </div>
+
+    <div
+      class="startAll"
+      @click="startAllTasks"
+    >
+      开始转换
+    </div>
+  </div>
 </template>
 
 <script>
@@ -67,6 +91,18 @@ export default {
     },
     computed: {},
     watch: {},
+    created() {
+        for (let i = 1; i < 10; i++) {
+            this.taskList.push({
+                cover: '',
+                name: '视频片段' + i,
+                duration: '10:00',
+                state: 0,
+                progress: 60,
+                outputFormat: 'mp4'
+            })
+        }
+    },
     methods: {
         addVideo() {
             this.taskList.push({
@@ -95,18 +131,6 @@ export default {
                 task.state = 1
             })
         }
-    },
-    created() {
-        for (let i = 1; i < 10; i++) {
-            this.taskList.push({
-                cover: '',
-                name: '视频片段' + i,
-                duration: '10:00',
-                state: 0,
-                progress: 60,
-                outputFormat: 'mp4'
-            })
-        }
     }
 }
 </script>

src/views/videoCutter.vue

@@ -31,12 +31,12 @@ import VideoChange from '@/components/videoCutter/videoChange.vue'
 import VideoControl from '@/components/videoCutter/videoControl.vue'
 
 export default {
+    name: 'VideoCutter',
     components: {
         VideoPlayer,
         VideoChange,
         VideoControl
     },
-    name: 'VideoCutter',
     data() {
         return {
             name: '',