refactor: add eslint-plugin-vue && lint code (#976)

2018-08-19 16:55:24 +08:00
parent 8f58baf617
commit e5d4290938
124 changed files with 1329 additions and 1084 deletions
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -1,8 +1,8 @@
 <template>
  <div class="createPost-container">
-    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">

-      <sticky :className="'sub-navbar '+postForm.status">
+      <sticky :class-name="'sub-navbar '+postForm.status">
        <CommentDropdown v-model="postForm.comment_disabled" />
        <PlatformDropdown v-model="postForm.platforms" />
        <SourceUrlDropdown v-model="postForm.source_uri" />
@@ -18,7 +18,7 @@

          <el-col :span="24">
            <el-form-item style="margin-bottom: 40px;" prop="title">
-              <MDinput name="name" v-model="postForm.title" required :maxlength="100">
+              <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
                标题
              </MDinput>
            </el-form-item>
@@ -27,25 +27,27 @@
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList">
-                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item">
-                      </el-option>
+                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable remote placeholder="搜索用户">
+                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"/>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="10">
                  <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
-                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
-                    </el-date-picker>
+                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"/>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
-                    <el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
-                      :high-threshold="3">
-                    </el-rate>
+                    <el-rate
+                      v-model="postForm.importance"
+                      :max="3"
+                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+                      :low-threshold="1"
+                      :high-threshold="3"
+                      style="margin-top:8px;"/>
                  </el-form-item>
                </el-col>
              </el-row>
@@ -54,13 +56,12 @@
        </el-row>

        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
-          <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.content_short">
-          </el-input>
-          <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
+          <el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
+          <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
        </el-form-item>

        <div class="editor-container">
-          <Tinymce :height=400 ref="editor" v-model="postForm.content" />
+          <Tinymce ref="editor" :height="400" v-model="postForm.content" />
        </div>

        <div style="margin-bottom: 20px;">
@@ -100,7 +101,7 @@ const defaultForm = {
 }

 export default {
-  name: 'articleDetail',
+  name: 'ArticleDetail',
  components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
  props: {
    isEdit: {
@@ -115,7 +116,7 @@ export default {
          message: rule.field + '为必传项',
          type: 'error'
        })
-        callback(null)
+        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
@@ -129,7 +130,7 @@ export default {
            message: '外链url填写不正确',
            type: 'error'
          })
-          callback(null)
+          callback(new Error('外链url填写不正确'))
        }
      } else {
        callback()
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/src/views/example/components/Dropdown/Comment.vue
@@ -1,11 +1,11 @@
 <template>
-  <el-dropdown trigger="click" :show-timeout="100">
-    <el-button plain>{{!comment_disabled?'评论已打开':'评论已关闭'}}
-      <i class="el-icon-caret-bottom el-icon--right"></i>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>{{ !comment_disabled?'评论已打开':'评论已关闭' }}
+      <i class="el-icon-caret-bottom el-icon--right"/>
    </el-button>
-    <el-dropdown-menu class="no-padding" slot="dropdown">
+    <el-dropdown-menu slot="dropdown" class="no-padding">
      <el-dropdown-item>
-        <el-radio-group style="padding: 10px;" v-model="comment_disabled">
+        <el-radio-group v-model="comment_disabled" style="padding: 10px;">
          <el-radio :label="true">关闭评论</el-radio>
          <el-radio :label="false">打开评论</el-radio>
        </el-radio-group>
@@ -16,7 +16,12 @@

 <script>
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
  computed: {
    comment_disabled: {
      get() {
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/src/views/example/components/Dropdown/Platform.vue
@@ -1,13 +1,13 @@
 <template>
  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
    <el-button plain>
-      平台({{platforms.length}})
-      <i class="el-icon-caret-bottom el-icon--right"></i>
+      平台({{ platforms.length }})
+      <i class="el-icon-caret-bottom el-icon--right"/>
    </el-button>
-    <el-dropdown-menu class="no-border" slot="dropdown">
+    <el-dropdown-menu slot="dropdown" class="no-border">
      <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
        <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
-          {{item.name}}
+          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-dropdown-menu>
@@ -16,7 +16,13 @@

 <script>
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      required: true,
+      default: () => [],
+      type: Array
+    }
+  },
  data() {
    return {
      platformsOptions: [
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@@ -2,11 +2,11 @@
  <el-dropdown :show-timeout="100" trigger="click">
    <el-button plain>
      外链
-      <i class="el-icon-caret-bottom el-icon--right"></i>
+      <i class="el-icon-caret-bottom el-icon--right"/>
    </el-button>
-    <el-dropdown-menu class="no-padding no-border" style="width:400px" slot="dropdown">
+    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
-        <el-input placeholder="请输入内容" v-model="source_uri">
+        <el-input v-model="source_uri" placeholder="请输入内容">
          <template slot="prepend">填写url</template>
        </el-input>
      </el-form-item>
@@ -16,7 +16,12 @@

 <script>
 export default {
-  props: ['value'],
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
  computed: {
    source_uri: {
      get() {
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -2,7 +2,8 @@
  <p class="warn-content">
    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
    的include，直接缓存所有页面。详情见
-    <a href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+    <a
+      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
      target="_blank">文档</a>
  </p>
 </template>
--- a/src/views/example/create.vue
+++ b/src/views/example/create.vue
@@ -1,12 +1,12 @@
 <template>
-  <article-detail :is-edit='false'></article-detail>
+  <article-detail :is-edit="false"/>
 </template>

 <script>
 import ArticleDetail from './components/ArticleDetail'

 export default {
-  name: 'createForm',
+  name: 'CreateForm',
  components: { ArticleDetail }
 }
 </script>
--- a/src/views/example/edit.vue
+++ b/src/views/example/edit.vue
@@ -1,12 +1,12 @@
 <template>
-  <article-detail :is-edit='true'></article-detail>
+  <article-detail :is-edit="true"/>
 </template>

 <script>
 import ArticleDetail from './components/ArticleDetail'

 export default {
-  name: 'editForm',
+  name: 'EditForm',
  components: { ArticleDetail }
 }
 </script>
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -1,41 +1,41 @@
 <template>
  <div class="app-container">

-    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table v-loading.body="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
-          <span>{{scope.row.id}}</span>
+          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="Date">
        <template slot-scope="scope">
-          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="Author">
        <template slot-scope="scope">
-          <span>{{scope.row.author}}</span>
+          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" label="Importance">
        <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
+          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="Status" width="110">
        <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" label="Title">
        <template slot-scope="scope">

-          <router-link class="link-type" :to="'/example/edit/'+scope.row.id">
+          <router-link :to="'/example/edit/'+scope.row.id" class="link-type">
            <span>{{ scope.row.title }}</span>
          </router-link>
        </template>
@@ -51,9 +51,15 @@
    </el-table>

    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
-        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <el-pagination
+        :current-page="listQuery.page"
+        :page-sizes="[10,20,30, 50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
    </div>

  </div>
@@ -63,7 +69,17 @@
 import { fetchList } from '@/api/article'

 export default {
-  name: 'articleList',
+  name: 'ArticleList',
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
  data() {
    return {
      list: null,
@@ -75,16 +91,6 @@ export default {
      }
    }
  },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
  created() {
    this.getList()
  },