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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
124 changed files with 1329 additions and 1084 deletions

View file

@ -1,7 +1,7 @@
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
@ -9,22 +9,19 @@ module.exports = {
node: true,
es6: true,
},
extends: 'eslint:recommended',
// required to lint *.vue files
plugins: [
'html'
],
// check if imports actually resolve
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
}
}
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
'rules': {
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/name-property-casing": ["error", "PascalCase"],
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
@ -196,4 +193,3 @@ module.exports = {
'array-bracket-spacing': [2, 'never']
}
}

View file

@ -82,10 +82,10 @@
"eslint": "4.19.1",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0",
"eslint-plugin-html": "4.0.5",
"eslint-plugin-vue": "4.7.1",
"file-loader": "1.1.11",
"friendly-errors-webpack-plugin": "1.7.0",
"hash-sum": "^1.0.2",
"hash-sum": "1.0.2",
"html-webpack-plugin": "^4.0.0-alpha",
"husky": "0.14.3",
"lint-staged": "7.2.2",

View file

@ -1,11 +1,11 @@
<template>
<div id="app">
<router-view></router-view>
<router-view/>
</div>
</template>
<script>
export default{
name: 'App'
}
export default{
name: 'App'
}
</script>

View file

@ -1,10 +1,10 @@
<template>
<transition :name="transitionName">
<div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
<title>回到顶部</title>
<g>
<path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
<path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"/>
</g>
</svg>
</div>

View file

@ -1,9 +1,9 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if='item.meta.title'>
<span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
<router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
<el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
<span v-if="item.redirect===&quot;noredirect&quot;||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span>
<router-link v-else :to="item.redirect||item.path">{{ generateTitle(item.meta.title) }}</router-link>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
@ -13,9 +13,6 @@
import { generateTitle } from '@/utils/i18n'
export default {
created() {
this.getBreadcrumb()
},
data() {
return {
levelList: null
@ -26,12 +23,15 @@ export default {
this.getBreadcrumb()
}
},
created() {
this.getBreadcrumb()
},
methods: {
generateTitle,
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name)
const first = matched[0]
if (first && first.name !== 'dashboard') {
if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
}
this.levelList = matched

View file

@ -1,5 +1,5 @@
<template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
<div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>
<script>

View file

@ -1,5 +1,5 @@
<template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
<div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>
<script>

View file

@ -1,5 +1,5 @@
<template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
<div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>
<script>

View file

@ -1,23 +1,23 @@
<template>
<div class="dndList">
<div class="dndList-list" :style="{width:width1}">
<h3>{{list1Title}}</h3>
<draggable :list="list1" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in list1" :key='element.id'>
<div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
<div :style="{width:width1}" class="dndList-list">
<h3>{{ list1Title }}</h3>
<draggable :list="list1" :options="{group:'article'}" class="dragArea">
<div v-for="element in list1" :key="element.id" class="list-complete-item">
<div class="list-complete-item-handle">[{{ element.author }}] {{ element.title }}</div>
<div style="position:absolute;right:0px;">
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete"></i>
<i style="color:#ff4949" class="el-icon-delete"/>
</span>
</div>
</div>
</draggable>
</div>
<div class="dndList-list" :style="{width:width2}">
<h3>{{list2Title}}</h3>
<draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
<div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
<div :style="{width:width2}" class="dndList-list">
<h3>{{ list2Title }}</h3>
<draggable :list="filterList2" :options="{group:'article'}" class="dragArea">
<div v-for="element in filterList2" :key="element.id" class="list-complete-item">
<div class="list-complete-item-handle2" @click="pushEle(element)"> [{{ element.author }}] {{ element.title }}</div>
</div>
</draggable>
</div>
@ -30,16 +30,6 @@ import draggable from 'vuedraggable'
export default {
name: 'DndList',
components: { draggable },
computed: {
filterList2() {
return this.list2.filter(v => {
if (this.isNotInList1(v)) {
return v
}
return false
})
}
},
props: {
list1: {
type: Array,
@ -70,6 +60,16 @@ export default {
default: '48%'
}
},
computed: {
filterList2() {
return this.list2.filter(v => {
if (this.isNotInList1(v)) {
return v
}
return false
})
}
},
methods: {
isNotInList1(v) {
return this.list1.every(k => v.id !== k.id)

View file

@ -1,5 +1,5 @@
<template>
<div :ref="id" :action="url" class="dropzone" :id="id">
<div :ref="id" :action="url" :id="id" class="dropzone">
<input type="file" name="file">
</div>
</template>
@ -12,12 +12,81 @@ import 'dropzone/dist/dropzone.css'
Dropzone.autoDiscover = false
export default {
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
defaultMsg: {
type: String,
default: '上传图片'
},
acceptedFiles: {
type: String,
default: ''
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFilesize: {
type: Number,
default: 2
},
maxFiles: {
type: Number,
default: 3
},
autoProcessQueue: {
type: Boolean,
default: true
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
defaultImg: {
default: '',
type: [String, Array]
},
couldPaste: {
type: Boolean,
default: false
}
},
data() {
return {
dropzone: '',
initOnce: true
}
},
watch: {
defaultImg(val) {
if (val.length === 0) {
this.initOnce = false
return
}
if (!this.initOnce) return
this.initImages(val)
this.initOnce = false
}
},
mounted() {
const element = document.getElementById(this.id)
const vm = this
@ -95,6 +164,10 @@ export default {
vm.$emit('dropzone-successmultiple', file, error, xhr)
})
},
destroyed() {
document.removeEventListener('paste', this.pasteImg)
this.dropzone.destroy()
},
methods: {
removeAllFiles() {
this.dropzone.removeAllFiles(true)
@ -128,76 +201,6 @@ export default {
}
}
},
destroyed() {
document.removeEventListener('paste', this.pasteImg)
this.dropzone.destroy()
},
watch: {
defaultImg(val) {
if (val.length === 0) {
this.initOnce = false
return
}
if (!this.initOnce) return
this.initImages(val)
this.initOnce = false
}
},
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
defaultMsg: {
type: String,
default: '上传图片'
},
acceptedFiles: {
type: String
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFilesize: {
type: Number,
default: 2
},
maxFiles: {
type: Number,
default: 3
},
autoProcessQueue: {
type: Boolean,
default: true
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
defaultImg: {
default: false
},
couldPaste: {
default: false
}
}
}
</script>

View file

@ -2,15 +2,24 @@
<div v-if="errorLogs.length>0">
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
<el-button size="small" type="danger" class="bug-btn">
<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
p-id="1864"></path>
<svg
t="1492682037685"
class="bug-svg"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1863"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="128"
height="128">
<path
d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
p-id="1864"/>
</svg>
</el-button>
</el-badge>
<el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
<el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
<el-table :data="errorLogs" border>
<el-table-column label="Message">
<template slot-scope="scope">
@ -18,21 +27,21 @@
<span class="message-title">Msg:</span>
<el-tag type="danger">{{ scope.row.err.message }}</el-tag>
</div>
<br/>
<br>
<div>
<span class="message-title" style="padding-right: 10px;">Info: </span>
<el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag>
<el-tag type="warning">{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}</el-tag>
</div>
<br/>
<br>
<div>
<span class="message-title" style="padding-right: 16px;">Url: </span>
<el-tag type="success">{{scope.row.url}}</el-tag>
<el-tag type="success">{{ scope.row.url }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="Stack">
<template slot-scope="scope">
{{ scope.row.err.stack}}
{{ scope.row.err.stack }}
</template>
</el-table-column>
</el-table>
@ -43,7 +52,7 @@
<script>
export default {
name: 'errorLog',
name: 'ErrorLog',
data() {
return {
dialogTableVisible: false

View file

@ -1,12 +1,21 @@
<template>
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff;"
<svg
width="80"
height="80"
viewBox="0 0 250 250"
style="fill:#40c9c6; color:#fff;"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px;"
class="octo-arm"/>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"/>
</svg>
</a>
</template>

View file

@ -1,20 +1,34 @@
<template>
<div>
<svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
<path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
p-id="1692"></path>
<path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
p-id="1693"></path>
<path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
p-id="1694"></path>
<svg
:class="{'is-active':isActive}"
t="1492500959545"
class="hamburger"
style=""
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1691"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
@click="toggleClick">
<path
d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
p-id="1692"/>
<path
d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
p-id="1693"/>
<path
d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
p-id="1694"/>
</svg>
</div>
</template>
<script>
export default {
name: 'hamburger',
name: 'Hamburger',
props: {
isActive: {
type: Boolean,

View file

@ -1,109 +1,113 @@
<template>
<div class="vue-image-crop-upload" v-show="value">
<div class="vicp-wrap">
<div class="vicp-close" @click="off">
<i class="vicp-icon4"></i>
</div>
<div class="vicp-step1" v-show="step == 1">
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
<i class="vicp-icon1" v-show="loading != 1">
<i class="vicp-icon1-arrow"></i>
<i class="vicp-icon1-body"></i>
<i class="vicp-icon1-bottom"></i>
</i>
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
<div v-show="value" class="vue-image-crop-upload">
<div class="vicp-wrap">
<div class="vicp-close" @click="off">
<i class="vicp-icon4"/>
</div>
<div class="vicp-error" v-show="hasError">
<i class="vicp-icon2"></i> {{ errorMsg }}
</div>
<div class="vicp-operate">
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
</div>
</div>
<div class="vicp-step2" v-if="step == 2">
<div class="vicp-crop">
<div class="vicp-crop-left" v-show="true">
<div class="vicp-img-container">
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
@drag="preventDefault"
@dragstart="preventDefault"
@dragend="preventDefault"
@dragleave="preventDefault"
@dragover="preventDefault"
@dragenter="preventDefault"
@drop="preventDefault"
@touchstart="imgStartMove"
@touchmove="imgMove"
@touchend="createImg"
@touchcancel="createImg"
@mousedown="imgStartMove"
@mousemove="imgMove"
@mouseup="createImg"
@mouseout="createImg"
ref="img">
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
</div>
<div class="vicp-range">
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
</div>
<div class="vicp-rotate" v-if="!noRotate">
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate"></i>
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate"></i>
</div>
<div v-show="step == 1" class="vicp-step1">
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
<i v-show="loading != 1" class="vicp-icon1">
<i class="vicp-icon1-arrow"/>
<i class="vicp-icon1-body"/>
<i class="vicp-icon1-bottom"/>
</i>
<span v-show="loading !== 1" class="vicp-hint">{{ lang.hint }}</span>
<span v-show="!isSupported" class="vicp-no-supported-hint">{{ lang.noSupported }}</span>
<input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange">
</div>
<div class="vicp-crop-right" v-show="true">
<div class="vicp-preview">
<div class="vicp-preview-item" v-if="!noSquare">
<img :src="createImgUrl" :style="previewStyle">
<span>{{ lang.preview }}</span>
<div v-show="hasError" class="vicp-error">
<i class="vicp-icon2"/> {{ errorMsg }}
</div>
<div class="vicp-operate">
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
</div>
</div>
<div v-if="step == 2" class="vicp-step2">
<div class="vicp-crop">
<div v-show="true" class="vicp-crop-left">
<div class="vicp-img-container">
<img
ref="img"
:src="sourceImgUrl"
:style="sourceImgStyle"
class="vicp-img"
draggable="false"
@drag="preventDefault"
@dragstart="preventDefault"
@dragend="preventDefault"
@dragleave="preventDefault"
@dragover="preventDefault"
@dragenter="preventDefault"
@drop="preventDefault"
@touchstart="imgStartMove"
@touchmove="imgMove"
@touchend="createImg"
@touchcancel="createImg"
@mousedown="imgStartMove"
@mousemove="imgMove"
@mouseup="createImg"
@mouseout="createImg">
<div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1"/>
<div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2"/>
</div>
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
<img :src="createImgUrl" :style="previewStyle">
<span>{{ lang.preview }}</span>
<div class="vicp-range">
<input :value="scale.range" type="range" step="1" min="0" max="100" @input="zoomChange">
<i class="vicp-icon5" @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"/>
<i class="vicp-icon6" @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"/>
</div>
<div v-if="!noRotate" class="vicp-rotate">
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate"></i>
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate"></i>
</div>
</div>
<div v-show="true" class="vicp-crop-right">
<div class="vicp-preview">
<div v-if="!noSquare" class="vicp-preview-item">
<img :src="createImgUrl" :style="previewStyle">
<span>{{ lang.preview }}</span>
</div>
<div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle">
<img :src="createImgUrl" :style="previewStyle">
<span>{{ lang.preview }}</span>
</div>
</div>
</div>
</div>
<div class="vicp-operate">
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
</div>
</div>
<div class="vicp-operate">
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
</div>
</div>
<div class="vicp-step3" v-if="step == 3">
<div class="vicp-upload">
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
<div class="vicp-progress-wrap">
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
<div v-if="step == 3" class="vicp-step3">
<div class="vicp-upload">
<span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span>
<div class="vicp-progress-wrap">
<span v-show="loading === 1" :style="progressStyle" class="vicp-progress"/>
</div>
<div v-show="hasError" class="vicp-error">
<i class="vicp-icon2"/> {{ errorMsg }}
</div>
<div v-show="loading === 2" class="vicp-success">
<i class="vicp-icon3"/> {{ lang.success }}
</div>
</div>
<div class="vicp-error" v-show="hasError">
<i class="vicp-icon2"></i> {{ errorMsg }}
</div>
<div class="vicp-success" v-show="loading === 2">
<i class="vicp-icon3"></i> {{ lang.success }}
<div class="vicp-operate">
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
</div>
</div>
<div class="vicp-operate">
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
</div>
<canvas v-show="false" ref="canvas" :width="width" :height="height"/>
</div>
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
</div>
</div>
</template>
<script>
/* eslint-disable */
/* eslint-disable */
'use strict'
import request from '@/utils/request'
import language from './utils/language.js'

View file

@ -1,6 +1,6 @@
<template>
<div class="json-editor">
<textarea ref="textarea"></textarea>
<textarea ref="textarea"/>
</div>
</template>
@ -15,13 +15,14 @@ import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'
export default {
name: 'jsonEditor',
name: 'JsonEditor',
/* eslint-disable vue/require-prop-types */
props: ['value'],
data() {
return {
jsonEditor: false
}
},
props: ['value'],
watch: {
value(value) {
const editor_value = this.jsonEditor.getValue()

View file

@ -1,14 +1,14 @@
<template>
<div class="board-column">
<div class="board-column-header">
{{headerText}}
{{ headerText }}
</div>
<draggable
class="board-column-content"
:list="list"
:options="options">
<div class="board-item" v-for="element in list" :key="element.id">
{{element.name}} {{element.id}}
:options="options"
class="board-column-content">
<div v-for="element in list" :key="element.id" class="board-item">
{{ element.name }} {{ element.id }}
</div>
</draggable>
</div>
@ -17,7 +17,7 @@
import draggable from 'vuedraggable'
export default {
name: 'dragKanban-demo',
name: 'DragKanbanDemo',
components: {
draggable
},

View file

@ -1,11 +1,11 @@
<template>
<el-dropdown trigger="click" class='international' @command="handleSetLanguage">
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
<div>
<svg-icon class-name='international-icon' icon-class="language" />
<svg-icon class-name="international-icon" icon-class="language" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
<el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
<el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
@ -38,4 +38,3 @@ export default {
}
</style>

View file

@ -1,28 +1,103 @@
<template>
<div class="material-input__component" :class="computedClasses">
<div :class="computedClasses" class="material-input__component">
<div :class="{iconClass:icon}">
<i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
<input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
@blur="handleMdBlur" @input="handleModelInput">
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
@blur="handleMdBlur" @input="handleModelInput">
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
:step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
:maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
<input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
@blur="handleMdBlur" @input="handleModelInput">
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
@blur="handleMdBlur" @input="handleModelInput">
<input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
:required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
<span class="material-input-bar"></span>
<i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon"/>
<input
v-if="type === 'email'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:required="required"
type="email"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'url'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:required="required"
type="url"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'number'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:step="step"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:max="max"
:min="min"
:minlength="minlength"
:maxlength="maxlength"
:required="required"
type="number"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'password'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:max="max"
:min="min"
:required="required"
type="password"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'tel'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:required="required"
type="tel"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'text'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:minlength="minlength"
:maxlength="maxlength"
:required="required"
type="text"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<span class="material-input-bar"/>
<label class="material-label">
<slot></slot>
<slot/>
</label>
</div>
</div>
@ -32,8 +107,9 @@
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
export default {
name: 'md-input',
name: 'MdInput',
props: {
/* eslint-disable */
icon: String,
name: String,
type: {
@ -62,6 +138,13 @@ export default {
default: true
}
},
data() {
return {
currentValue: this.value,
focus: false,
fillPlaceHolder: null
}
},
computed: {
computedClasses() {
return {
@ -76,13 +159,6 @@ export default {
this.currentValue = newValue
}
},
data() {
return {
currentValue: this.value,
focus: false,
fillPlaceHolder: null
}
},
methods: {
handleModelInput(event) {
const value = event.target.value

View file

@ -1,7 +1,6 @@
<template>
<div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
<textarea :id="id">
</textarea>
<div :style="{height:height+'px',zIndex:zIndex}" class="simplemde-container">
<textarea :id="id"/>
</div>
</template>
@ -11,11 +10,16 @@ import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from 'simplemde'
export default {
name: 'simplemde-md',
name: 'SimplemdeMd',
props: {
value: String,
value: {
type: String,
default: ''
},
id: {
type: String
type: String,
required: false,
default: 'markdown-editor-' + +new Date()
},
autofocus: {
type: Boolean,
@ -34,7 +38,10 @@ export default {
default: 10
},
toolbar: {
type: Array
type: Array,
default: function() {
return []
}
}
},
data() {
@ -51,10 +58,10 @@ export default {
},
mounted() {
this.simplemde = new SimpleMDE({
element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
element: document.getElementById(this.id),
autoDownloadFontAwesome: false,
autofocus: this.autofocus,
toolbar: this.toolbar,
toolbar: this.toolbar.length > 0 ? this.toolbar : undefined,
spellChecker: false,
insertTexts: {
link: ['[', ']( )']

View file

@ -1,11 +1,11 @@
<template>
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
<div class="pan-info">
<div class="pan-info-roles-container">
<slot></slot>
<slot/>
</div>
</div>
<img class="pan-thumb" :src="image">
<img :src="image" class="pan-thumb">
</div>
</template>

View file

@ -1,15 +1,28 @@
<template>
<div>
<svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
<path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id="2070"></path>
<path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id="2071"></path>
<path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id="2072"></path>
<path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id="2073"></path>
<svg
t="1508738709248"
class="screenfull-svg"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2069"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32"
height="32"
@click="click">
<path
d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id="2070"/>
<path
d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id="2071"/>
<path
d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id="2072"/>
<path
d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id="2073"/>
</svg>
</div>
</template>
@ -18,7 +31,7 @@
import screenfull from 'screenfull'
export default {
name: 'screenfull',
name: 'Screenfull',
props: {
width: {
type: Number,

View file

@ -1,7 +1,7 @@
<template>
<div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
<div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
<slot></slot>
<div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
<div ref="scrollWrapper" :style="{left: left + 'px'}" class="scroll-wrapper">
<slot/>
</div>
</div>
</template>
@ -10,7 +10,7 @@
const padding = 15 // tag's padding
export default {
name: 'scrollPane',
name: 'ScrollPane',
data() {
return {
left: 0

View file

@ -1,10 +1,10 @@
<template>
<div class="share-dropdown-menu" :class="{active:isActive}">
<div :class="{active:isActive}" class="share-dropdown-menu">
<div class="share-dropdown-menu-wrapper">
<span class="share-dropdown-menu-title" @click.self="clickTitle">{{title}}</span>
<div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'>
<a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
<span v-else>{{item.title}}</span>
<span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
<div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
<a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
<span v-else>{{ item.title }}</span>
</div>
</div>
</div>
@ -14,7 +14,10 @@
export default {
props: {
items: {
type: Array
type: Array,
default: function() {
return []
}
},
title: {
type: String,

View file

@ -21,7 +21,8 @@ export default {
default: 1
},
className: {
type: String
type: String,
default: ''
}
},
data() {

View file

@ -1,19 +1,20 @@
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use>
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'svg-icon',
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String
type: String,
default: ''
}
},
computed: {

View file

@ -1,8 +1,8 @@
<template>
<a class="link--mallki" :class="className" href="#">
{{text}}
<span :data-letters="text"></span>
<span :data-letters="text"></span>
<a :class="className" class="link--mallki" href="#">
{{ text }}
<span :data-letters="text"/>
<span :data-letters="text"/>
</a>
</template>
@ -10,7 +10,8 @@
export default {
props: {
className: {
type: String
type: String,
default: ''
},
text: {
type: String,
@ -20,7 +21,6 @@ export default {
}
</script>
<style>
/* Mallki */

View file

@ -1,8 +1,8 @@
<template>
<el-color-picker
v-model="theme"
class="theme-picker"
popper-class="theme-picker-dropdown"
v-model="theme"></el-color-picker>
popper-class="theme-picker-dropdown"/>
</template>
<script>

View file

@ -1,10 +1,18 @@
<template>
<div class="upload-container">
<el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
</el-button>
<el-dialog :visible.sync="dialogVisible">
<el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
<el-upload
:multiple="true"
:file-list="fileList"
:show-file-list="true"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
class="editor-slide-upload"
action="https://httpbin.org/post"
list-type="picture-card">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-button @click="dialogVisible = false"> </el-button>
@ -17,7 +25,7 @@
// import { getToken } from 'api/qiniu'
export default {
name: 'editorSlideUpload',
name: 'EditorSlideUpload',
props: {
color: {
type: String,

View file

@ -1,8 +1,8 @@
<template>
<div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
<textarea class="tinymce-textarea" :id="tinymceId"></textarea>
<div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
<textarea :id="tinymceId" class="tinymce-textarea"/>
<div class="editor-custom-btn-container">
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
</div>
</div>
</template>
@ -13,11 +13,12 @@ import plugins from './plugins'
import toolbar from './toolbar'
export default {
name: 'tinymce',
name: 'Tinymce',
components: { editorImage },
props: {
id: {
type: String
type: String,
default: 'vue-tinymce-' + +new Date()
},
value: {
type: String,
@ -31,6 +32,7 @@ export default {
}
},
menubar: {
type: String,
default: 'file edit insert view format table'
},
height: {
@ -43,7 +45,7 @@ export default {
return {
hasChange: false,
hasInit: false,
tinymceId: this.id || 'vue-tinymce-' + +new Date(),
tinymceId: this.id,
fullscreen: false
}
},
@ -64,6 +66,9 @@ export default {
deactivated() {
this.destroyTinymce()
},
destroyed() {
this.destroyTinymce()
},
methods: {
initTinymce() {
const _this = this
@ -152,9 +157,6 @@ export default {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
})
}
},
destroyed() {
this.destroyTinymce()
}
}
</script>

View file

@ -2,25 +2,27 @@
<el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
<el-table-column v-if="columns.length===0" width="150">
<template slot-scope="scope">
<span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
<span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
<i v-else class="el-icon-minus"></i>
<span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
<span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"/>
<i v-else class="el-icon-minus"/>
</span>
{{scope.$index}}
{{ scope.$index }}
</template>
</el-table-column>
<el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
<el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
<template slot-scope="scope">
<span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
<span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
<i v-else class="el-icon-minus"></i>
<!-- Todo -->
<!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
<span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
<span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"/>
<i v-else class="el-icon-minus"/>
</span>
{{scope.row[column.value]}}
{{ scope.row[column.value] }}
</template>
</el-table-column>
<slot></slot>
<slot/>
</el-table>
</template>
@ -31,8 +33,9 @@
*/
import treeToArray from './eval'
export default {
name: 'treeTable',
name: 'TreeTable',
props: {
/* eslint-disable */
data: {
type: [Array, Object],
required: true

View file

@ -1,19 +1,25 @@
<template>
<div class="upload-container">
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
:on-success="handleImageSuccess">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload>
<div class="image-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
<img :src="imageUrl+'?imageView2/1/w/200/h/200'">
<div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i>
</div>
</div>
<div class="upload-container">
<el-upload
:data="dataObj"
:multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post">
<i class="el-icon-upload"/>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload>
<div class="image-preview">
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl+'?imageView2/1/w/200/h/200'">
<div class="image-preview-action">
<i class="el-icon-delete" @click="rmImage"/>
</div>
</div>
</div>
</div>
</template>
<script>
@ -21,13 +27,11 @@
import { getToken } from '@/api/qiniu'
export default {
name: 'singleImageUpload',
name: 'SingleImageUpload',
props: {
value: String
},
computed: {
imageUrl() {
return this.value
value: {
type: String,
default: ''
}
},
data() {
@ -36,6 +40,11 @@ export default {
dataObj: { token: '', key: '' }
}
},
computed: {
imageUrl() {
return this.value
}
},
methods: {
rmImage() {
this.emitInput('')

View file

@ -1,15 +1,21 @@
<template>
<div class="singleImageUpload2 upload-container">
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
:on-success="handleImageSuccess">
<i class="el-icon-upload"></i>
<el-upload
:data="dataObj"
:multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post">
<i class="el-icon-upload"/>
<div class="el-upload__text">Drag或<em>点击上传</em></div>
</el-upload>
<div v-show="imageUrl.length>0" class="image-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl">
<div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i>
<i class="el-icon-delete" @click="rmImage"/>
</div>
</div>
</div>
@ -20,13 +26,11 @@
import { getToken } from '@/api/qiniu'
export default {
name: 'singleImageUpload2',
name: 'SingleImageUpload2',
props: {
value: String
},
computed: {
imageUrl() {
return this.value
value: {
type: String,
default: ''
}
},
data() {
@ -35,6 +39,11 @@ export default {
dataObj: { token: '', key: '' }
}
},
computed: {
imageUrl() {
return this.value
}
},
methods: {
rmImage() {
this.emitInput('')

View file

@ -1,23 +1,29 @@
<template>
<div class="upload-container">
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
:on-success="handleImageSuccess">
<i class="el-icon-upload"></i>
<el-upload
:data="dataObj"
:multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post">
<i class="el-icon-upload"/>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload>
<div class="image-preview image-app-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl">
<div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i>
<i class="el-icon-delete" @click="rmImage"/>
</div>
</div>
</div>
<div class="image-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl">
<div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i>
<i class="el-icon-delete" @click="rmImage"/>
</div>
</div>
</div>
@ -28,13 +34,11 @@
import { getToken } from '@/api/qiniu'
export default {
name: 'singleImageUpload3',
name: 'SingleImageUpload3',
props: {
value: String
},
computed: {
imageUrl() {
return this.value
value: {
type: String,
default: ''
}
},
data() {
@ -43,6 +47,11 @@ export default {
dataObj: { token: '', key: '' }
}
},
computed: {
imageUrl() {
return this.value
}
},
methods: {
rmImage() {
this.emitInput('')

View file

@ -13,8 +13,8 @@ import XLSX from 'xlsx'
export default {
props: {
beforeUpload: Function,
onSuccess: Function
beforeUpload: Function, // eslint-disable-line
onSuccess: Function// eslint-disable-line
},
data() {
return {

View file

@ -132,7 +132,7 @@ export default {
},
excel: {
export: 'Export',
selectedExport: 'Export selected items',
selectedExport: 'Export Selected Items',
placeholder: 'Please enter the file name(default excel-list)'
},
zip: {
@ -140,7 +140,7 @@ export default {
placeholder: 'Please enter the file name(default file)'
},
theme: {
change: 'Theme change',
change: 'Change Theme',
documentation: 'Theme documentation',
tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
},

View file

@ -59,7 +59,7 @@ export const constantRouterMap = [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'dashboard',
name: 'Dashboard',
meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
}
]
@ -72,7 +72,7 @@ export const constantRouterMap = [
{
path: 'index',
component: () => import('@/views/documentation/index'),
name: 'documentation',
name: 'Documentation',
meta: { title: 'documentation', icon: 'documentation', noCache: true }
}
]
@ -85,7 +85,7 @@ export const constantRouterMap = [
{
path: 'index',
component: () => import('@/views/guide/index'),
name: 'guide',
name: 'Guide',
meta: { title: 'guide', icon: 'guide', noCache: true }
}
]
@ -113,7 +113,7 @@ export const asyncRouterMap = [
{
path: 'page',
component: () => import('@/views/permission/page'),
name: 'pagePermission',
name: 'PagePermission',
meta: {
title: 'pagePermission',
roles: ['admin'] // or you can only set roles in sub nav
@ -122,7 +122,7 @@ export const asyncRouterMap = [
{
path: 'directive',
component: () => import('@/views/permission/directive'),
name: 'directivePermission',
name: 'DirectivePermission',
meta: {
title: 'directivePermission'
// if do not set roles, means: this page does not require permission
@ -138,7 +138,7 @@ export const asyncRouterMap = [
{
path: 'index',
component: () => import('@/views/svg-icons/index'),
name: 'icons',
name: 'Icons',
meta: { title: 'icons', icon: 'icon', noCache: true }
}
]
@ -154,7 +154,7 @@ export const asyncRouterMap = [
path: '/example',
component: Layout,
redirect: '/example/list',
name: 'example',
name: 'Example',
meta: {
title: 'example',
icon: 'example'
@ -163,20 +163,20 @@ export const asyncRouterMap = [
{
path: 'create',
component: () => import('@/views/example/create'),
name: 'createArticle',
name: 'CreateArticle',
meta: { title: 'createArticle', icon: 'edit' }
},
{
path: 'edit/:id(\\d+)',
component: () => import('@/views/example/edit'),
name: 'editArticle',
name: 'EditArticle',
meta: { title: 'editArticle', noCache: true },
hidden: true
},
{
path: 'list',
component: () => import('@/views/example/list'),
name: 'articleList',
name: 'ArticleList',
meta: { title: 'articleList', icon: 'list' }
}
]
@ -189,7 +189,7 @@ export const asyncRouterMap = [
{
path: 'index',
component: () => import('@/views/tab/index'),
name: 'tab',
name: 'Tab',
meta: { title: 'tab', icon: 'tab' }
}
]
@ -199,7 +199,7 @@ export const asyncRouterMap = [
path: '/error',
component: Layout,
redirect: 'noredirect',
name: 'errorPages',
name: 'ErrorPages',
meta: {
title: 'errorPages',
icon: '404'
@ -208,13 +208,13 @@ export const asyncRouterMap = [
{
path: '401',
component: () => import('@/views/errorPage/401'),
name: 'page401',
name: 'Page401',
meta: { title: 'page401', noCache: true }
},
{
path: '404',
component: () => import('@/views/errorPage/404'),
name: 'page404',
name: 'Page404',
meta: { title: 'page404', noCache: true }
}
]
@ -228,7 +228,7 @@ export const asyncRouterMap = [
{
path: 'log',
component: () => import('@/views/errorLog/index'),
name: 'errorLog',
name: 'ErrorLog',
meta: { title: 'errorLog', icon: 'bug' }
}
]
@ -238,7 +238,7 @@ export const asyncRouterMap = [
path: '/excel',
component: Layout,
redirect: '/excel/export-excel',
name: 'excel',
name: 'Excel',
meta: {
title: 'excel',
icon: 'excel'
@ -247,19 +247,19 @@ export const asyncRouterMap = [
{
path: 'export-excel',
component: () => import('@/views/excel/exportExcel'),
name: 'exportExcel',
name: 'ExportExcel',
meta: { title: 'exportExcel' }
},
{
path: 'export-selected-excel',
component: () => import('@/views/excel/selectExcel'),
name: 'selectExcel',
name: 'EelectExcel',
meta: { title: 'selectExcel' }
},
{
path: 'upload-excel',
component: () => import('@/views/excel/uploadExcel'),
name: 'uploadExcel',
name: 'UploadExcel',
meta: { title: 'uploadExcel' }
}
]
@ -275,7 +275,7 @@ export const asyncRouterMap = [
{
path: 'download',
component: () => import('@/views/zip/index'),
name: 'exportZip',
name: 'ExportZip',
meta: { title: 'exportZip' }
}
]
@ -289,7 +289,7 @@ export const asyncRouterMap = [
{
path: 'index',
component: () => import('@/views/theme/index'),
name: 'theme',
name: 'Theme',
meta: { title: 'theme', icon: 'theme' }
}
]
@ -303,7 +303,7 @@ export const asyncRouterMap = [
{
path: 'index',
component: () => import('@/views/clipboard/index'),
name: 'clipboardDemo',
name: 'ClipboardDemo',
meta: { title: 'clipboardDemo', icon: 'clipboard' }
}
]
@ -316,7 +316,7 @@ export const asyncRouterMap = [
{
path: 'index',
component: () => import('@/views/i18n-demo/index'),
name: 'i18n',
name: 'I18n',
meta: { title: 'i18n', icon: 'international' }
}
]

View file

@ -6,7 +6,7 @@ const chartsRouter = {
path: '/charts',
component: Layout,
redirect: 'noredirect',
name: 'charts',
name: 'Charts',
meta: {
title: 'charts',
icon: 'chart'
@ -15,19 +15,19 @@ const chartsRouter = {
{
path: 'keyboard',
component: () => import('@/views/charts/keyboard'),
name: 'keyboardChart',
name: 'KeyboardChart',
meta: { title: 'keyboardChart', noCache: true }
},
{
path: 'line',
component: () => import('@/views/charts/line'),
name: 'lineChart',
name: 'LineChart',
meta: { title: 'lineChart', noCache: true }
},
{
path: 'mixchart',
component: () => import('@/views/charts/mixChart'),
name: 'mixChart',
name: 'MixChart',
meta: { title: 'mixChart', noCache: true }
}
]

View file

@ -6,7 +6,7 @@ const componentsRouter = {
path: '/components',
component: Layout,
redirect: 'noredirect',
name: 'component-demo',
name: 'ComponentDemo',
meta: {
title: 'components',
icon: 'component'
@ -15,79 +15,79 @@ const componentsRouter = {
{
path: 'tinymce',
component: () => import('@/views/components-demo/tinymce'),
name: 'tinymce-demo',
name: 'TinymceDemo',
meta: { title: 'tinymce' }
},
{
path: 'markdown',
component: () => import('@/views/components-demo/markdown'),
name: 'markdown-demo',
name: 'MarkdownDemo',
meta: { title: 'markdown' }
},
{
path: 'json-editor',
component: () => import('@/views/components-demo/jsonEditor'),
name: 'jsonEditor-demo',
name: 'JsonEditorDemo',
meta: { title: 'jsonEditor' }
},
{
path: 'splitpane',
component: () => import('@/views/components-demo/splitpane'),
name: 'splitpane-demo',
name: 'SplitpaneDemo',
meta: { title: 'splitPane' }
},
{
path: 'avatar-upload',
component: () => import('@/views/components-demo/avatarUpload'),
name: 'avatarUpload-demo',
name: 'AvatarUploadDemo',
meta: { title: 'avatarUpload' }
},
{
path: 'dropzone',
component: () => import('@/views/components-demo/dropzone'),
name: 'dropzone-demo',
name: 'DropzoneDemo',
meta: { title: 'dropzone' }
},
{
path: 'sticky',
component: () => import('@/views/components-demo/sticky'),
name: 'sticky-demo',
name: 'StickyDemo',
meta: { title: 'sticky' }
},
{
path: 'count-to',
component: () => import('@/views/components-demo/countTo'),
name: 'countTo-demo',
name: 'CountToDemo',
meta: { title: 'countTo' }
},
{
path: 'mixin',
component: () => import('@/views/components-demo/mixin'),
name: 'componentMixin-demo',
name: 'ComponentMixinDemo',
meta: { title: 'componentMixin' }
},
{
path: 'back-to-top',
component: () => import('@/views/components-demo/backToTop'),
name: 'backToTop-demo',
name: 'BackToTopDemo',
meta: { title: 'backToTop' }
},
{
path: 'drag-dialog',
component: () => import('@/views/components-demo/dragDialog'),
name: 'dragDialog-demo',
name: 'DragDialogDemo',
meta: { title: 'dragDialog' }
},
{
path: 'dnd-list',
component: () => import('@/views/components-demo/dndList'),
name: 'dndList-demo',
name: 'DndListDemo',
meta: { title: 'dndList' }
},
{
path: 'drag-kanban',
component: () => import('@/views/components-demo/dragKanban'),
name: 'dragKanban-demo',
name: 'DragKanbanDemo',
meta: { title: 'dragKanban' }
}
]

View file

@ -6,7 +6,7 @@ const nestedRouter = {
path: '/nested',
component: Layout,
redirect: '/nested/menu1/menu1-1',
name: 'nested',
name: 'Nested',
meta: {
title: 'nested',
icon: 'nested'
@ -15,33 +15,33 @@ const nestedRouter = {
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'menu1',
name: 'Menu1',
meta: { title: 'menu1' },
redirect: '/nested/menu1/menu1-1',
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'menu1-1',
name: 'Menu1-1',
meta: { title: 'menu1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'menu1-2',
name: 'Menu1-2',
redirect: '/nested/menu1/menu1-2/menu1-2-1',
meta: { title: 'menu1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'menu1-2-1',
name: 'Menu1-2-1',
meta: { title: 'menu1-2-1' }
},
{
path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'menu1-2-2',
name: 'Menu1-2-2',
meta: { title: 'menu1-2-2' }
}
]
@ -49,14 +49,14 @@ const nestedRouter = {
{
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'menu1-3',
name: 'Menu1-3',
meta: { title: 'menu1-3' }
}
]
},
{
path: 'menu2',
name: 'menu2',
name: 'Menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
}

View file

@ -6,7 +6,7 @@ const tableRouter = {
path: '/table',
component: Layout,
redirect: '/table/complex-table',
name: 'table',
name: 'Table',
meta: {
title: 'Table',
icon: 'table'
@ -15,37 +15,37 @@ const tableRouter = {
{
path: 'dynamic-table',
component: () => import('@/views/table/dynamicTable/index'),
name: 'dynamicTable',
name: 'DynamicTable',
meta: { title: 'dynamicTable' }
},
{
path: 'drag-table',
component: () => import('@/views/table/dragTable'),
name: 'dragTable',
name: 'DragTable',
meta: { title: 'dragTable' }
},
{
path: 'inline-edit-table',
component: () => import('@/views/table/inlineEditTable'),
name: 'inlineEditTable',
name: 'InlineEditTable',
meta: { title: 'inlineEditTable' }
},
{
path: 'tree-table',
component: () => import('@/views/table/treeTable/treeTable'),
name: 'treeTableDemo',
name: 'TreeTableDemo',
meta: { title: 'treeTable' }
},
{
path: 'custom-tree-table',
component: () => import('@/views/table/treeTable/customTreeTable'),
name: 'customTreeTableDemo',
name: 'CustomTreeTableDemo',
meta: { title: 'customTreeTable' }
},
{
path: 'complex-table',
component: () => import('@/views/table/complexTable'),
name: 'complexTable',
name: 'ComplexTable',
meta: { title: 'complexTable' }
}
]

View file

@ -46,7 +46,6 @@
border-radius: 8px;
border: none;
outline: none;
margin-right: 25px;
transition: 600ms ease all;
position: relative;
display: inline-block;

View file

@ -1,6 +1,6 @@
<template>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
<div class="chart-container">
<chart height="100%" width="100%"/>
</div>
</template>
@ -8,7 +8,7 @@
import Chart from '@/components/Charts/keyboard'
export default {
name: 'keyboardChart',
name: 'KeyboardChart',
components: { Chart }
}
</script>

View file

@ -1,6 +1,6 @@
<template>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
<div class="chart-container">
<chart height="100%" width="100%"/>
</div>
</template>
@ -8,7 +8,7 @@
import Chart from '@/components/Charts/lineMarker'
export default {
name: 'lineChart',
name: 'LineChart',
components: { Chart }
}
</script>

View file

@ -1,6 +1,6 @@
<template>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
<div class="chart-container">
<chart height="100%" width="100%"/>
</div>
</template>
@ -8,7 +8,7 @@
import Chart from '@/components/Charts/mixChart'
export default {
name: 'mixChart',
name: 'MixChart',
components: { Chart }
}
</script>

View file

@ -2,12 +2,12 @@
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane label="use clipboard directly" name="directly">
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
<el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
<el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
<el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
</el-tab-pane>
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
<el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
<el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
</el-tab-pane>
</el-tabs>
</div>
@ -18,7 +18,7 @@ import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
export default {
name: 'clipboardDemo',
name: 'ClipboardDemo',
directives: {
clipboard
},

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>

View file

@ -1,5 +1,5 @@
<template>
<div :class="className" :style="{height:height,width:width}"></div>
<div :class="className" :style="{height:height,width:width}"/>
</template>
<script>

View file

@ -1,26 +1,26 @@
<template>
<el-card class="box-card-component" style="margin-left:8px;">
<div slot="header" class="box-card-header">
<img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
</div>
<div style="position:relative;">
<pan-thumb class="panThumb" :image="avatar"></pan-thumb>
<mallki className='mallki-text' text='vue-element-admin'></mallki>
<div style="padding-top:35px;" class='progress-item'>
<pan-thumb :image="avatar" class="panThumb"/>
<mallki class-name="mallki-text" text="vue-element-admin"/>
<div style="padding-top:35px;" class="progress-item">
<span>Vue</span>
<el-progress :percentage="70"></el-progress>
<el-progress :percentage="70"/>
</div>
<div class='progress-item'>
<div class="progress-item">
<span>JavaScript</span>
<el-progress :percentage="18"></el-progress>
<el-progress :percentage="18"/>
</div>
<div class='progress-item'>
<div class="progress-item">
<span>Css</span>
<el-progress :percentage="12"></el-progress>
<el-progress :percentage="12"/>
</div>
<div class='progress-item'>
<div class="progress-item">
<span>ESLint</span>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="success"/>
</div>
</div>
</el-card>
@ -34,6 +34,15 @@ import Mallki from '@/components/TextHoverEffect/Mallki'
export default {
components: { PanThumb, Mallki },
filters: {
statusFilter(status) {
const statusMap = {
success: 'success',
pending: 'danger'
}
return statusMap[status]
}
},
data() {
return {
statisticsData: {
@ -48,15 +57,6 @@ export default {
'avatar',
'roles'
])
},
filters: {
statusFilter(status) {
const statusMap = {
success: 'success',
pending: 'danger'
}
return statusMap[status]
}
}
}
</script>

View file

@ -1,5 +1,5 @@
<template>
<div :class="className" :style="{height:height,width:width}"></div>
<div :class="className" :style="{height:height,width:width}"/>
</template>
<script>
@ -26,7 +26,8 @@ export default {
default: true
},
chartData: {
type: Object
type: Object,
required: true
}
},
data() {
@ -34,6 +35,14 @@ export default {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.initChart()
if (this.autoResize) {
@ -63,14 +72,6 @@ export default {
this.chart.dispose()
this.chart = null
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
methods: {
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({

View file

@ -1,13 +1,13 @@
<template>
<el-row class="panel-group" :gutter="40">
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class='card-panel' @click="handleSetLineChartData('newVisitis')">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">New Visits</div>
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -18,7 +18,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">Messages</div>
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to>
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -29,7 +29,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">Purchases</div>
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to>
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -40,7 +40,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">Shoppings</div>
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to>
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num"/>
</div>
</div>
</el-col>

View file

@ -1,5 +1,5 @@
<template>
<div :class="className" :style="{height:height,width:width}"></div>
<div :class="className" :style="{height:height,width:width}"/>
</template>
<script>

View file

@ -1,5 +1,5 @@
<template>
<div :class="className" :style="{height:height,width:width}"></div>
<div :class="className" :style="{height:height,width:width}"/>
</template>
<script>

View file

@ -1,17 +1,19 @@
<template>
<li class="todo" :class="{ completed: todo.done, editing: editing }">
<li :class="{ completed: todo.done, editing: editing }" class="todo">
<div class="view">
<input class="toggle"
type="checkbox"
<input
:checked="todo.done"
class="toggle"
type="checkbox"
@change="toggleTodo( todo)">
<label v-text="todo.text" @dblclick="editing = true"></label>
<button class="destroy" @click="deleteTodo( todo )"></button>
<label @dblclick="editing = true" v-text="todo.text"/>
<button class="destroy" @click="deleteTodo( todo )"/>
</div>
<input class="edit"
v-show="editing"
<input
v-focus="editing"
v-show="editing"
:value="todo.text"
class="edit"
@keyup.enter="doneEdit"
@keyup.esc="cancelEdit"
@blur="doneEdit">
@ -21,12 +23,6 @@
<script>
export default {
name: 'Todo',
props: ['todo'],
data() {
return {
editing: false
}
},
directives: {
focus(el, { value }, { context }) {
if (value) {
@ -36,6 +32,19 @@ export default {
}
}
},
props: {
todo: {
type: Object,
default: function() {
return {}
}
}
},
data() {
return {
editing: false
}
},
methods: {
deleteTodo(todo) {
this.$emit('deleteTodo', todo)

View file

@ -201,6 +201,7 @@
font-size: 30px;
color: #cc9a9a;
transition: color 0.2s ease-out;
cursor: pointer;
}
.todo-list li .destroy:hover {
color: #af5b5e;

View file

@ -5,16 +5,21 @@
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
</header>
<!-- main section -->
<section class="main" v-show="todos.length">
<input class="toggle-all" id="toggle-all" type="checkbox" :checked="allChecked" @change="toggleAll({ done: !allChecked })">
<label for="toggle-all"></label>
<section v-show="todos.length" class="main">
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
<label for="toggle-all"/>
<ul class="todo-list">
<todo @toggleTodo='toggleTodo' @editTodo='editTodo' @deleteTodo='deleteTodo' v-for="(todo, index) in filteredTodos" :key="index"
:todo="todo"></todo>
<todo
v-for="(todo, index) in filteredTodos"
:key="index"
:todo="todo"
@toggleTodo="toggleTodo"
@editTodo="editTodo"
@deleteTodo="deleteTodo"/>
</ul>
</section>
<!-- footer -->
<footer class="footer" v-show="todos.length">
<footer v-show="todos.length" class="footer">
<span class="todo-count">
<strong>{{ remaining }}</strong>
{{ remaining | pluralize('item') }} left
@ -52,6 +57,10 @@ const defalutList = [
]
export default {
components: { Todo },
filters: {
pluralize: (n, w) => n === 1 ? w : w + 's',
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
},
data() {
return {
visibility: 'all',
@ -108,10 +117,6 @@ export default {
this.setLocalStorage()
})
}
},
filters: {
pluralize: (n, w) => n === 1 ? w : w + 's',
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
}
}
</script>

View file

@ -2,17 +2,17 @@
<el-table :data="list" style="width: 100%;padding-top: 15px;">
<el-table-column label="Order_No" min-width="200">
<template slot-scope="scope">
{{scope.row.order_no | orderNoFilter}}
{{ scope.row.order_no | orderNoFilter }}
</template>
</el-table-column>
<el-table-column label="Price" width="195" align="center">
<template slot-scope="scope">
¥{{scope.row.price | toThousandslsFilter}}
¥{{ scope.row.price | toThousandslsFilter }}
</template>
</el-table-column>
<el-table-column label="Status" width="100" align="center">
<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>
@ -22,11 +22,6 @@
import { fetchList } from '@/api/transaction'
export default {
data() {
return {
list: null
}
},
filters: {
statusFilter(status) {
const statusMap = {
@ -39,6 +34,11 @@ export default {
return str.substring(0, 30)
}
},
data() {
return {
list: null
}
},
created() {
this.fetchData()
},

View file

@ -1,48 +1,47 @@
<template>
<div class="dashboard-editor-container">
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
<panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
<panel-group @handleSetLineChartData="handleSetLineChartData"/>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData"></line-chart>
<line-chart :chart-data="lineChartData"/>
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart></raddar-chart>
<raddar-chart/>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart></pie-chart>
<pie-chart/>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart></bar-chart>
<bar-chart/>
</div>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
<transaction-table></transaction-table>
<transaction-table/>
</el-col>
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
<todo-list></todo-list>
<todo-list/>
</el-col>
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
<box-card></box-card>
<box-card/>
</el-col>
</el-row>
</div>
</template>
<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
@ -74,7 +73,7 @@ const lineChartData = {
}
export default {
name: 'dashboard-admin',
name: 'DashboardAdmin',
components: {
GithubCorner,
PanelGroup,

View file

@ -1,17 +1,17 @@
<template>
<div class="dashboard-editor-container">
<div class=" clearfix">
<pan-thumb style="float: left" :image="avatar"> Your roles:
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
<pan-thumb :image="avatar" style="float: left"> Your roles:
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
</pan-thumb>
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
<div class="info-container">
<span class="display_name">{{name}}</span>
<span class="display_name">{{ name }}</span>
<span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
</div>
</div>
<div>
<img class="emptyGif" :src="emptyGif">
<img :src="emptyGif" class="emptyGif">
</div>
</div>
</template>
@ -22,7 +22,7 @@ import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner'
export default {
name: 'dashboard-editor',
name: 'DashboardEditor',
components: { PanThumb, GithubCorner },
data() {
return {

View file

@ -1,6 +1,6 @@
<template>
<div class="dashboard-container">
<component :is="currentRole"></component>
<component :is="currentRole"/>
</div>
</template>
@ -10,7 +10,7 @@ import adminDashboard from './admin'
import editorDashboard from './editor'
export default {
name: 'dashboard',
name: 'Dashboard',
components: { adminDashboard, editorDashboard },
data() {
return {

View file

@ -1,15 +1,15 @@
<template>
<div class="app-container documentation-container">
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/">{{$t('documentation.documentation')}}</a>
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a>
<dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
<a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">{{ $t('documentation.documentation') }}</a>
<a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">{{ $t('documentation.github') }}</a>
<dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章"/>
</div>
</template>
<script>
import DropdownMenu from '@/components/Share/dropdownMenu'
export default {
name: 'documentation',
name: 'Documentation',
components: { DropdownMenu },
data() {
return {

View file

@ -1,13 +1,13 @@
<template>
<div>
<!--error code-->
{{a.a}}
{{ a.a }}
<!--error code-->
</div>
</template>
<script>
export default {
name: 'errorTestA'
name: 'ErrorTestA'
}
</script>

View file

@ -1,5 +1,5 @@
<template>
<div></div>
<div/>
</template>
<script>

View file

@ -1,17 +1,17 @@
<template>
<div class="errPage-container">
<errorA></errorA>
<errorB></errorB>
<errorA/>
<errorB/>
<!-- $t is vue-i18n global function to translate lang -->
<h3>{{$t('errorLog.tips')}}</h3>
<h3>{{ $t('errorLog.tips') }}</h3>
<code>
{{$t('errorLog.description')}}
{{ $t('errorLog.description') }}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
{{$t('errorLog.documentation')}}
{{ $t('errorLog.documentation') }}
</a>
</code>
<a href="#">
<img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
<img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
</a>
</div>
</template>
@ -21,7 +21,7 @@ import errorA from './errorTestA'
import errorB from './errorTestB'
export default {
name: 'errorLog',
name: 'ErrorLog',
components: { errorA, errorB }
}
</script>

View file

@ -1,10 +1,10 @@
<template>
<div class="errPage-container">
<el-button @click="back" icon='arrow-left' class="pan-back-btn">返回</el-button>
<el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
<el-row>
<el-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1>
gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
<h2>你没有权限去该页面</h2>
<h6>如有不满请联系你领导</h6>
<ul class="list-unstyled">
@ -13,15 +13,15 @@
<router-link to="/dashboard">回首页</router-link>
</li>
<li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
<li><a @click.prevent="dialogVisible=true" href="#">点我看图</a></li>
<li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
</ul>
</el-col>
<el-col :span="12">
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
</el-col>
</el-row>
<el-dialog title="随便看" :visible.sync="dialogVisible">
<img class="pan-img" :src="ewizardClap">
<el-dialog :visible.sync="dialogVisible" title="随便看">
<img :src="ewizardClap" class="pan-img">
</el-dialog>
</div>
</template>
@ -30,7 +30,7 @@
import errGif from '@/assets/401_images/401.gif'
export default {
name: 'page401',
name: 'Page401',
data() {
return {
errGif: errGif + '?' + +new Date(),

View file

@ -10,7 +10,7 @@
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">版权所有
<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
<a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
</div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请检查您输入的网址是否正确请点击以下按钮返回主页或者发送错误报告</div>
@ -23,7 +23,7 @@
<script>
export default {
name: 'page404',
name: 'Page404',
computed: {
message() {
return '网管说这个页面你不能进......'

View file

@ -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()

View file

@ -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() {

View file

@ -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: [

View file

@ -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() {

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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()
},

View file

@ -3,39 +3,39 @@
<div class="app-container">
<label class="radio-label" style="padding-left:0;">Filename: </label>
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<label class="radio-label">Cell Auto Width: </label>
<el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
<label class="radio-label">Cell Auto-Width: </label>
<el-radio-group v-model="autoWidth">
<el-radio :label="true" border>True</el-radio>
<el-radio :label="false" border>False</el-radio>
</el-radio-group>
<el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
<el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='Id' width="95">
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label="Id" width="95">
<template slot-scope="scope">
{{scope.$index}}
{{ scope.$index }}
</template>
</el-table-column>
<el-table-column label="Title">
<template slot-scope="scope">
{{scope.row.title}}
{{ scope.row.title }}
</template>
</el-table-column>
<el-table-column label="Author" width="110" align="center">
<template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag>
<el-tag>{{ scope.row.author }}</el-tag>
</template>
</el-table-column>
<el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope">
{{scope.row.pageviews}}
{{ scope.row.pageviews }}
</template>
</el-table-column>
<el-table-column align="center" label="Date" width="220">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
<i class="el-icon-time"/>
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
</el-table>
@ -47,7 +47,7 @@ import { fetchList } from '@/api/article'
import { parseTime } from '@/utils'
export default {
name: 'exportExcel',
name: 'ExportExcel',
data() {
return {
list: null,

View file

@ -1,35 +1,42 @@
<template>
<div class="app-container">
<!-- $t is vue-i18n global function to translate lang -->
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
<el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
ref="multipleTable">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column align="center" label='Id' width="95">
<el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">{{ $t('excel.selectedExport') }}</el-button>
<el-table
v-loading="listLoading"
ref="multipleTable"
:data="list"
element-loading-text="拼命加载中"
border
fit
highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" align="center"/>
<el-table-column align="center" label="Id" width="95">
<template slot-scope="scope">
{{scope.$index}}
{{ scope.$index }}
</template>
</el-table-column>
<el-table-column label="Title">
<template slot-scope="scope">
{{scope.row.title}}
{{ scope.row.title }}
</template>
</el-table-column>
<el-table-column label="Author" width="110" align="center">
<template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag>
<el-tag>{{ scope.row.author }}</el-tag>
</template>
</el-table-column>
<el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope">
{{scope.row.pageviews}}
{{ scope.row.pageviews }}
</template>
</el-table-column>
<el-table-column align="center" label="PDate" width="220">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span>{{scope.row.display_time}}</span>
<i class="el-icon-time"/>
<span>{{ scope.row.display_time }}</span>
</template>
</el-table-column>
</el-table>
@ -40,7 +47,7 @@
import { fetchList } from '@/api/article'
export default {
name: 'selectExcel',
name: 'SelectExcel',
data() {
return {
list: null,

View file

@ -1,9 +1,8 @@
<template>
<div class="app-container">
<upload-excel-component :on-success='handleSuccess' :before-upload="beforeUpload"></upload-excel-component>
<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
<el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
</el-table-column>
<el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>
</el-table>
</div>
</template>
@ -12,7 +11,7 @@
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
export default {
name: 'uploadExcel',
name: 'UploadExcel',
components: { UploadExcelComponent },
data() {
return {

View file

@ -1,11 +1,11 @@
<template>
<div class="app-container">
<p class="warn-content">
{{$t('guide.description')}}
{{ $t('guide.description') }}
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
</a>
</p>
<el-button icon='el-icon-question' type="primary" @click.prevent.stop="guide">{{$t('guide.button')}}</el-button>
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">{{ $t('guide.button') }}</el-button>
</div>
</template>
@ -15,7 +15,7 @@ import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from './defineSteps'
export default {
name: 'guide',
name: 'Guide',
data() {
return {
driver: null

View file

@ -3,41 +3,45 @@
<el-card class="box-card" style="margin-top:40px;">
<div slot="header" class="clearfix">
<svg-icon icon-class="international" />
<span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
<span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
</div>
<div>
<el-radio-group v-model="lang" size="small">
<el-radio label="zh" border>简体中文</el-radio>
<el-radio label="en" border>English</el-radio>
</el-radio-group>
<el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
<el-tag style="margin-top:15px;display:block;" type="info">{{ $t('i18nView.note') }}</el-tag>
</div>
</el-card>
<el-row :gutter="20" style="margin:100px 15px 50px;">
<el-col :span="12">
<div class="block">
<el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
<el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
</div>
<div class="block">
<el-pagination background :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next"
:total="400">
</el-pagination>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
:total="400"
background
layout="total, sizes, prev, pager, next"/>
</div>
<div class="block">
<el-button class="item-btn" size="small">{{$t('i18nView.default')}}</el-button>
<el-button class="item-btn" size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
<el-button class="item-btn" size="small" type="success">{{$t('i18nView.success')}}</el-button>
<el-button class="item-btn" size="small" type="info">{{$t('i18nView.info')}}</el-button>
<el-button class="item-btn" size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
<el-button class="item-btn" size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
<el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
<el-button class="item-btn" size="small" type="primary">{{ $t('i18nView.primary') }}</el-button>
<el-button class="item-btn" size="small" type="success">{{ $t('i18nView.success') }}</el-button>
<el-button class="item-btn" size="small" type="info">{{ $t('i18nView.info') }}</el-button>
<el-button class="item-btn" size="small" type="warning">{{ $t('i18nView.warning') }}</el-button>
<el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
</div>
</el-col>
<el-col :span="12">
<el-table :data="tableData" fit highlight-current-row border style="width: 100%">
<el-table-column prop="name" :label="$t('i18nView.tableName')" width="100" align="center"></el-table-column>
<el-table-column prop="date" :label="$t('i18nView.tableDate')" width="120" align="center"></el-table-column>
<el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
<el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center"/>
<el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center"/>
<el-table-column :label="$t('i18nView.tableAddress')" prop="address"/>
</el-table>
</el-col>
</el-row>
@ -49,7 +53,7 @@ import local from './local'
const viewName = 'i18nView'
export default {
name: 'i18n',
name: 'I18n',
data() {
return {
date: '',
@ -76,12 +80,6 @@ export default {
}]
}
},
created() {
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)
}
},
computed: {
lang: {
get() {
@ -92,6 +90,12 @@ export default {
this.$store.dispatch('setLanguage', lang)
}
}
},
created() {
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)
}
}
}
</script>

View file

@ -3,7 +3,7 @@ export default {
zh: {
i18nView: {
title: '切换语言',
note: '目前只翻译了当前页面和侧边栏和导航,未完待续,敬请期待...',
note: '本项目国际化基于 vue-i18n',
datePlaceholder: '请选择日期',
tableDate: '日期',
tableName: '姓名',
@ -20,7 +20,7 @@ export default {
en: {
i18nView: {
title: 'Switch Language',
note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
note: 'The internationalization of this project is based on vue-i18n',
datePlaceholder: 'Pick a day',
tableDate: 'tableDate',
tableName: 'tableName',

View file

@ -1,11 +1,11 @@
<template>
<div class="app-wrapper" :class="classObj">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
<sidebar class="sidebar-container"></sidebar>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar class="sidebar-container"/>
<div class="main-container">
<navbar></navbar>
<tags-view></tags-view>
<app-main></app-main>
<navbar/>
<tags-view/>
<app-main/>
</div>
</div>
</template>
@ -15,7 +15,7 @@ import { Navbar, Sidebar, AppMain, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'layout',
name: 'Layout',
components: {
Navbar,
Sidebar,

View file

@ -2,7 +2,7 @@
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view :key="key"></router-view>
<router-view :key="key"/>
</keep-alive>
</transition>
</section>

View file

@ -1,40 +1,40 @@
<template>
<el-menu class="navbar" mode="horizontal">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
<breadcrumb class="breadcrumb-container"></breadcrumb>
<breadcrumb class="breadcrumb-container"/>
<div class="right-menu">
<error-log class="errLog-container right-menu-item"></error-log>
<error-log class="errLog-container right-menu-item"/>
<el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
<screenfull class="screenfull right-menu-item"></screenfull>
<el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
<screenfull class="screenfull right-menu-item"/>
</el-tooltip>
<lang-select class="international right-menu-item"></lang-select>
<lang-select class="international right-menu-item"/>
<el-tooltip effect="dark" :content="$t('navbar.theme')" placement="bottom">
<theme-picker class="theme-switch right-menu-item"></theme-picker>
<el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
<theme-picker class="theme-switch right-menu-item"/>
</el-tooltip>
<el-dropdown class="avatar-container right-menu-item" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
<i class="el-icon-caret-bottom"></i>
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom"/>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/">
<el-dropdown-item>
{{$t('navbar.dashboard')}}
{{ $t('navbar.dashboard') }}
</el-dropdown-item>
</router-link>
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item>
{{$t('navbar.github')}}
{{ $t('navbar.github') }}
</el-dropdown-item>
</a>
<el-dropdown-item divided>
<span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
<span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

View file

@ -1,30 +1,30 @@
<template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
</el-menu-item>
</router-link>
<router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
</el-menu-item>
</router-link>
<el-submenu v-else :index="item.name||item.path">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
<span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
</template>
<el-submenu v-else :index="item.name||item.path">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
<span v-if="item.meta&&item.meta.title" slot="title">{{ generateTitle(item.meta.title) }}</span>
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item v-if="child.children&&child.children.length>0" :is-nest="true" :item="child" :key="child.path" :base-path="resolvePath(child.path)" class="nest-menu"/>
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
<span v-if="child.meta&&child.meta.title" slot="title">{{ generateTitle(child.meta.title) }}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</div>
</template>

View file

@ -1,15 +1,15 @@
<template>
<el-scrollbar wrapClass="scrollbar-wrapper">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
mode="vertical"
:show-timeout="200"
:default-active="$route.path"
:collapse="isCollapse"
mode="vertical"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
>
<sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
<sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
</el-menu>
</el-scrollbar>
</template>

View file

@ -1,16 +1,22 @@
<template>
<div class="tags-view-container">
<scroll-pane class='tags-view-wrapper' ref='scrollPane'>
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)"
:to="tag" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
{{generateTitle(tag.title)}}
<span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
<scroll-pane ref="scrollPane" class="tags-view-wrapper">
<router-link
v-for="tag in Array.from(visitedViews)"
ref="tag"
:class="isActive(tag)?'active':''"
:to="tag"
:key="tag.path"
class="tags-view-item"
@contextmenu.prevent.native="openMenu(tag,$event)">
{{ generateTitle(tag.title) }}
<span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
</router-link>
</scroll-pane>
<ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
<li @click="closeSelectedTag(selectedTag)">{{$t('tagsView.close')}}</li>
<li @click="closeOthersTags">{{$t('tagsView.closeOthers')}}</li>
<li @click="closeAllTags">{{$t('tagsView.closeAll')}}</li>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
<li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
<li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
</ul>
</div>
</template>

View file

@ -1,10 +1,10 @@
<script>
export default {
name: 'authredirect',
created() {
const hash = window.location.search.slice(1)
window.opener.location.href = window.location.origin + '/login#' + hash
window.close()
}
export default {
name: 'Authredirect',
created() {
const hash = window.location.search.slice(1)
window.opener.location.href = window.location.origin + '/login#' + hash
window.close()
}
}
</script>

View file

@ -1,18 +1,23 @@
<template>
<div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<div class="title-container">
<h3 class="title">{{$t('login.title')}}</h3>
<lang-select class="set-language"></lang-select>
<h3 class="title">{{ $t('login.title') }}</h3>
<lang-select class="set-language"/>
</div>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" :placeholder="$t('login.username')"
<el-input
v-model="loginForm.username"
:placeholder="$t('login.username')"
name="username"
type="text"
auto-complete="on"
/>
</el-form-item>
@ -20,32 +25,37 @@
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
:placeholder="$t('login.password')" />
<el-input
:type="passwordType"
v-model="loginForm.password"
:placeholder="$t('login.password')"
name="password"
auto-complete="on"
@keyup.enter.native="handleLogin" />
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
<div class="tips">
<span>{{$t('login.username')}} : admin</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
<span>{{ $t('login.username') }} : admin</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<div class="tips">
<span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
<span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{$t('login.thirdparty')}}</el-button>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
</el-form>
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
{{$t('login.thirdpartyTips')}}
<br/>
<br/>
<br/>
{{ $t('login.thirdpartyTips') }}
<br>
<br>
<br>
<social-sign />
</el-dialog>
@ -58,8 +68,8 @@ import LangSelect from '@/components/LangSelect'
import SocialSign from './socialsignin'
export default {
name: 'Login',
components: { LangSelect, SocialSign },
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
@ -89,6 +99,12 @@ export default {
showDialog: false
}
},
created() {
// window.addEventListener('hashchange', this.afterQRScan)
},
destroyed() {
// window.removeEventListener('hashchange', this.afterQRScan)
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
@ -131,12 +147,6 @@ export default {
// })
// }
}
},
created() {
// window.addEventListener('hashchange', this.afterQRScan)
},
destroyed() {
// window.removeEventListener('hashchange', this.afterQRScan)
}
}
</script>
@ -144,7 +154,7 @@ export default {
<style rel="stylesheet/scss" lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443;
$light_gray:#eee;
$cursor: #fff;

View file

@ -1,10 +1,10 @@
<template>
<div class="social-signup-container">
<div class="sign-btn" @click="wechatHandleClick('wechat')">
<span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon"></svg-icon></span> 微信
<span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon"/></span> 微信
</div>
<div class="sign-btn" @click="tencentHandleClick('tencent')">
<span class="qq-svg-container"><svg-icon icon-class="qq" class="icon"></svg-icon></span> QQ
<span class="qq-svg-container"><svg-icon icon-class="qq" class="icon"/></span> QQ
</div>
</div>
</template>
@ -13,7 +13,7 @@
import openWindow from '@/utils/openWindow'
export default {
name: 'social-signin',
name: 'SocialSignin',
methods: {
wechatHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart)

Some files were not shown because too many files have changed in this diff Show more