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

This commit is contained in:
花裤衩
2018-08-19 16:55:24 +08:00
committed by GitHub
parent 8f58baf617
commit e5d4290938
124 changed files with 1329 additions and 1084 deletions

View File

@@ -2,16 +2,23 @@
<div class="components-container">
<code>This is based on
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
{{$t('components.imageUploadTips')}}
{{ $t('components.imageUploadTips') }}
</code>
<pan-thumb :image="image"></pan-thumb>
<pan-thumb :image="image"/>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change Avatar
</el-button>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
<image-cropper
v-show="imagecropperShow"
:width="300"
:height="300"
:key="imagecropperKey"
url="https://httpbin.org/post"
lang-type="en"
@close="close"
@crop-upload-success="cropSuccess"/>
</div>
</template>
@@ -20,7 +27,7 @@ import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
name: 'avatarUpload-demo',
name: 'AvatarUploadDemo',
components: { ImageCropper, PanThumb },
data() {
return {

View File

@@ -1,7 +1,7 @@
<template>
<div class="components-container">
<code>{{$t('components.backToTopTips1')}}</code>
<code>{{$t('components.backToTopTips2')}}</code>
<code>{{ $t('components.backToTopTips1') }}</code>
<code>{{ $t('components.backToTopTips2') }}</code>
<div class="placeholder-container">
<div>placeholder</div>
<div>placeholder</div>
@@ -116,7 +116,7 @@
<!--可自定义按钮的样式show/hide临界点返回的位置 -->
<!--如需文字提示可在外部添加element的<el-tooltip></el-tooltip>元素 -->
<el-tooltip placement="top" content="tooltip">
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade"/>
</el-tooltip>
</div>
</template>
@@ -125,7 +125,7 @@
import BackToTop from '@/components/BackToTop'
export default {
name: 'backToTop-demo',
name: 'BackToTopDemo',
components: { BackToTop },
data() {
return {

View File

@@ -3,37 +3,46 @@
<p class="warn-content">
<a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
</p>
<count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
:separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
<count-to
ref="example"
:start-val="_startVal"
:end-val="_endVal"
:duration="_duration"
:decimals="_decimals"
:separator="_separator"
:prefix="_prefix"
:suffix="_suffix"
:autoplay="false"
class="example"/>
<div style="margin-left: 25%;margin-top: 40px;">
<label class="label" for="startValInput">startVal:
<input type="number" v-model.number="setStartVal" name="startValInput" />
<input v-model.number="setStartVal" type="number" name="startValInput" >
</label>
<label class="label" for="endValInput">endVal:
<input type="number" v-model.number="setEndVal" name="endVaInput" />
<input v-model.number="setEndVal" type="number" name="endVaInput" >
</label>
<label class="label" for="durationInput">duration:
<input type="number" v-model.number="setDuration" name="durationInput" />
<input v-model.number="setDuration" type="number" name="durationInput" >
</label>
<div class="startBtn example-btn" @click="start">开始</div>
<div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
<br/>
<br>
<label class="label" for="decimalsInput">decimals:
<input type="number" v-model.number="setDecimals" name="decimalsInput" />
<input v-model.number="setDecimals" type="number" name="decimalsInput" >
</label>
<label class="label" for="separatorInput">separator:
<input v-model="setSeparator" name="separatorInput" />
<input v-model="setSeparator" name="separatorInput" >
</label>
<label class="label" for="prefixInput">prefix:
<input v-model="setPrefix" name="prefixInput" />
<input v-model="setPrefix" name="prefixInput" >
</label>
<label class="label" for="suffixInput">suffix:
<input v-model="setSuffix" name="suffixInput" />
<input v-model="setSuffix" name="suffixInput" >
</label>
</div>
<code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27;
:decimals=&#x27;{{_decimals}}&#x27; :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27;
:autoplay=false&gt;</code>
<code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
:decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
:autoplay=false&gt;</code>
</div>
</template>
@@ -41,7 +50,7 @@
import countTo from 'vue-count-to'
export default {
name: 'countTo-demo',
name: 'CountToDemo',
components: { countTo },
data() {
return {
@@ -202,4 +211,3 @@ input {
}
</style>

View File

@@ -4,7 +4,7 @@
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
</code>
<div class="editor-container">
<dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list>
<dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool"/>
</div>
</div>
</template>
@@ -14,7 +14,7 @@ import DndList from '@/components/DndList'
import { fetchList } from '@/api/article'
export default {
name: 'dndList-demo',
name: 'DndListDemo',
components: { DndList },
data() {
return {
@@ -37,4 +37,3 @@ export default {
}
</script>

View File

@@ -1,15 +1,14 @@
<template>
<div class="components-container">
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
<el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="Shipping address" :visible.sync="dialogTableVisible">
<el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
<el-select ref="select" v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Name" width="200"></el-table-column>
<el-table-column property="address" label="Address"></el-table-column>
<el-table-column property="date" label="Date" width="150"/>
<el-table-column property="name" label="Name" width="200"/>
<el-table-column property="address" label="Address"/>
</el-table>
</el-dialog>
</div>
@@ -19,7 +18,7 @@
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
export default {
name: 'dragDialog-demo',
name: 'DragDialogDemo',
directives: { elDragDialog },
data() {
return {

View File

@@ -1,15 +1,15 @@
<template>
<div class="components-container board">
<Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/>
<Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/>
<Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/>
<Kanban :key="1" :list="list1" :options="options" class="kanban todo" header-text="Todo"/>
<Kanban :key="2" :list="list2" :options="options" class="kanban working" header-text="Working"/>
<Kanban :key="3" :list="list3" :options="options" class="kanban done" header-text="Done"/>
</div>
</template>
<script>
import Kanban from '@/components/Kanban'
export default {
name: 'dragKanban-demo',
name: 'DragKanbanDemo',
components: {
Kanban
},

View File

@@ -2,10 +2,10 @@
<div class="components-container">
<code>
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
{{$t('components.dropzoneTips')}}
{{ $t('components.dropzoneTips') }}
</code>
<div class="editor-container">
<dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
<dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
</div>
</div>
</template>
@@ -14,7 +14,7 @@
import Dropzone from '@/components/Dropzone'
export default {
name: 'dropzone-demo',
name: 'DropzoneDemo',
components: { Dropzone },
methods: {
dropzoneS(file) {
@@ -29,4 +29,3 @@ export default {
}
</script>

View File

@@ -2,7 +2,7 @@
<div class="components-container">
<code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
<div class="editor-container">
<json-editor ref="jsonEditor" v-model="value"></json-editor>
<json-editor ref="jsonEditor" v-model="value"/>
</div>
</div>
</template>
@@ -13,7 +13,7 @@ import JsonEditor from '@/components/JsonEditor'
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
export default {
name: 'jsonEditor-demo',
name: 'JsonEditorDemo',
components: { JsonEditor },
data() {
return {

View File

@@ -6,10 +6,10 @@
相关文章 </a>
</code>
<div class="editor-container">
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :z-index="20"/>
</div>
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button>
<div v-html="html"></div>
<el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="markdown2Html">To HTML</el-button>
<div v-html="html"/>
</div>
</template>
@@ -27,7 +27,7 @@ const content = `
`
export default {
name: 'markdown-demo',
name: 'MarkdownDemo',
components: { MarkdownEditor },
data() {
return {
@@ -46,4 +46,3 @@ export default {
}
</script>

View File

@@ -37,7 +37,7 @@
<div style="height:100px;">
<el-form :model="demo" :rules="demoRules">
<el-form-item prop="title">
<md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
<md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">标题</md-input>
</el-form-item>
</el-form>
</div>
@@ -74,20 +74,20 @@
<span>hover text</span>
</div>
<div class="component-item">
<mallki className="mallki-text" text="vue-element-admin"></mallki>
<mallki class-name="mallki-text" text="vue-element-admin"/>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top:50px;">
<el-col :span="6">
<el-col :span="8">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Share</span>
</div>
<div class="component-item" style="height:420px;">
<dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu>
<dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章"/>
</div>
</el-card>
</el-col>
@@ -104,7 +104,7 @@ import DropdownMenu from '@/components/Share/dropdownMenu'
import waves from '@/directive/waves/index.js' // 水波纹指令
export default {
name: 'componentMixin-demo',
name: 'ComponentMixinDemo',
components: {
PanThumb,
MdInput,
@@ -134,10 +134,7 @@ export default {
{ title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
{ title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
{ title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
{ title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
{ title: 'webpack4', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
{ title: 'webpack4', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
{ title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
]
}
}

View File

@@ -3,19 +3,19 @@
<code><strong>SplitPane</strong> If you've used
<a href="http://codepen.io/" target="_blank"> codepen</a>,
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
<a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
</code>
<split-pane v-on:resize="resize" split="vertical">
<split-pane split="vertical" @resize="resize">
<template slot="paneL">
<div class="left-container"></div>
<div class="left-container"/>
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL">
<div class="top-container"></div>
<div class="top-container"/>
</template>
<template slot="paneR">
<div class="bottom-container"></div>
<div class="bottom-container"/>
</template>
</split-pane>
</template>
@@ -27,7 +27,7 @@
import splitPane from 'vue-splitpane'
export default {
name: 'splitpane-demo',
name: 'SplitpaneDemo',
components: { splitPane },
methods: {
resize() {

View File

@@ -1,14 +1,14 @@
<template>
<div>
<sticky className="sub-navbar">
<sticky class-name="sub-navbar">
<el-dropdown trigger="click">
<el-button plain>
Platform<i class="el-icon-caret-bottom el-icon--right"></i>
Platform<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,18 +16,17 @@
<el-dropdown trigger="click">
<el-button plain>
Link<i class="el-icon-caret-bottom el-icon--right"></i>
Link<i class="el-icon-caret-bottom el-icon--right"/>
</el-button>
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
<el-input placeholder="Please enter the content" v-model="url">
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
<el-input v-model="url" placeholder="Please enter the content">
<template slot="prepend">Url</template>
</el-input>
</el-dropdown-menu>
</el-dropdown>
<div class="time-container">
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time">
</el-date-picker>
<el-date-picker v-model="time" :picker-options="pickerOptions" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time"/>
</div>
<el-button style="margin-left: 10px;" type="success">publish
@@ -35,7 +34,7 @@
</sticky>
<div class="components-container">
<code>Sticky header, {{$t('components.stickyTips')}}</code>
<code>Sticky header, {{ $t('components.stickyTips') }}</code>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
@@ -92,12 +91,11 @@
</div>
</template>
<script>
import Sticky from '@/components/Sticky'
export default {
name: 'sticky-demo',
name: 'StickyDemo',
components: { Sticky },
data() {
return {

View File

@@ -1,13 +1,13 @@
<template>
<div class="components-container">
<code>
{{$t('components.tinymceTips')}}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{$t('components.documentation')}}</a>
{{ $t('components.tinymceTips') }}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
</code>
<div>
<tinymce :height="300" v-model="content"></tinymce>
<tinymce :height="300" v-model="content"/>
</div>
<div class="editor-content" v-html="content"></div>
<div class="editor-content" v-html="content"/>
</div>
</template>
@@ -15,7 +15,7 @@
import Tinymce from '@/components/Tinymce'
export default {
name: 'tinymce-demo',
name: 'TinymceDemo',
components: { Tinymce },
data() {
return {
@@ -34,4 +34,3 @@ export default {
}
</style>