From 01dac7e4f595ae2d89b3441ecf43bcfeaf87667c Mon Sep 17 00:00:00 2001
From: "Haelwenn (lanodan) Monnier" <contact@hacktivis.me>
Date: Mon, 8 Aug 2022 06:24:05 +0200
Subject: [PATCH] Remove unused components
---
src/components/element-ui/BackToTop/index.vue | 116 --
.../element-ui/Breadcrumb/index.vue | 72 -
src/components/element-ui/Charts/keyboard.vue | 156 --
.../element-ui/Charts/lineMarker.vue | 227 ---
src/components/element-ui/Charts/mixChart.vue | 271 ----
.../element-ui/Charts/mixins/resize.js | 32 -
src/components/element-ui/DndList/index.vue | 157 --
.../element-ui/DragSelect/index.vue | 61 -
src/components/element-ui/Dropzone/index.vue | 297 ----
src/components/element-ui/ErrorLog/index.vue | 63 -
.../element-ui/GithubCorner/index.vue | 51 -
.../element-ui/HeaderSearch/index.vue | 187 ---
.../element-ui/ImageCropper/index.vue | 1420 -----------------
.../ImageCropper/utils/data2blob.js | 19 -
.../ImageCropper/utils/effectRipple.js | 39 -
.../element-ui/ImageCropper/utils/language.js | 232 ---
.../element-ui/ImageCropper/utils/mimes.js | 7 -
.../element-ui/JsonEditor/index.vue | 72 -
src/components/element-ui/Kanban/index.vue | 89 --
src/components/element-ui/MDinput/index.vue | 354 ----
.../element-ui/Pagination/index.vue | 100 --
src/components/element-ui/PanThumb/index.vue | 140 --
.../element-ui/Share/dropdownMenu.vue | 100 --
.../element-ui/SizeSelect/index.vue | 55 -
src/components/element-ui/Sticky/index.vue | 88 -
.../element-ui/TextHoverEffect/Mallki.vue | 113 --
.../element-ui/ThemePicker/index.vue | 148 --
src/components/element-ui/TreeTable/eval.js | 29 -
src/components/element-ui/TreeTable/index.vue | 127 --
src/components/element-ui/TreeTable/readme.md | 89 --
.../element-ui/Upload/singleImage.vue | 132 --
.../element-ui/Upload/singleImage2.vue | 127 --
.../element-ui/Upload/singleImage3.vue | 154 --
33 files changed, 5324 deletions(-)
delete mode 100644 src/components/element-ui/BackToTop/index.vue
delete mode 100644 src/components/element-ui/Breadcrumb/index.vue
delete mode 100644 src/components/element-ui/Charts/keyboard.vue
delete mode 100644 src/components/element-ui/Charts/lineMarker.vue
delete mode 100644 src/components/element-ui/Charts/mixChart.vue
delete mode 100644 src/components/element-ui/Charts/mixins/resize.js
delete mode 100644 src/components/element-ui/DndList/index.vue
delete mode 100644 src/components/element-ui/DragSelect/index.vue
delete mode 100644 src/components/element-ui/Dropzone/index.vue
delete mode 100644 src/components/element-ui/ErrorLog/index.vue
delete mode 100644 src/components/element-ui/GithubCorner/index.vue
delete mode 100644 src/components/element-ui/HeaderSearch/index.vue
delete mode 100644 src/components/element-ui/ImageCropper/index.vue
delete mode 100755 src/components/element-ui/ImageCropper/utils/data2blob.js
delete mode 100755 src/components/element-ui/ImageCropper/utils/effectRipple.js
delete mode 100755 src/components/element-ui/ImageCropper/utils/language.js
delete mode 100755 src/components/element-ui/ImageCropper/utils/mimes.js
delete mode 100644 src/components/element-ui/JsonEditor/index.vue
delete mode 100644 src/components/element-ui/Kanban/index.vue
delete mode 100644 src/components/element-ui/MDinput/index.vue
delete mode 100644 src/components/element-ui/Pagination/index.vue
delete mode 100644 src/components/element-ui/PanThumb/index.vue
delete mode 100644 src/components/element-ui/Share/dropdownMenu.vue
delete mode 100644 src/components/element-ui/SizeSelect/index.vue
delete mode 100644 src/components/element-ui/Sticky/index.vue
delete mode 100644 src/components/element-ui/TextHoverEffect/Mallki.vue
delete mode 100644 src/components/element-ui/ThemePicker/index.vue
delete mode 100644 src/components/element-ui/TreeTable/eval.js
delete mode 100644 src/components/element-ui/TreeTable/index.vue
delete mode 100644 src/components/element-ui/TreeTable/readme.md
delete mode 100644 src/components/element-ui/Upload/singleImage.vue
delete mode 100644 src/components/element-ui/Upload/singleImage2.vue
delete mode 100644 src/components/element-ui/Upload/singleImage3.vue
diff --git a/src/components/element-ui/BackToTop/index.vue b/src/components/element-ui/BackToTop/index.vue
deleted file mode 100644
index 12ea3ea8..00000000
--- a/src/components/element-ui/BackToTop/index.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
- <transition :name="transitionName">
- <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"/>
- </g>
- </svg>
- </div>
- </transition>
-</template>
-
-<script>
-export default {
- name: 'BackToTop',
- props: {
- visibilityHeight: {
- type: Number,
- default: 400
- },
- backPosition: {
- type: Number,
- default: 0
- },
- customStyle: {
- type: Object,
- default: function() {
- return {
- right: '50px',
- bottom: '50px',
- width: '40px',
- height: '40px',
- 'border-radius': '4px',
- 'line-height': '45px',
- background: '#e7eaf1'
- }
- }
- },
- transitionName: {
- type: String,
- default: 'fade'
- }
- },
- data: function() {
- return {
- visible: false,
- interval: null,
- isMoving: false
- }
- },
- mounted() {
- window.addEventListener('scroll', this.handleScroll)
- },
- beforeDestroy() {
- window.removeEventListener('scroll', this.handleScroll)
- if (this.interval) {
- clearInterval(this.interval)
- }
- },
- methods: {
- handleScroll() {
- this.visible = window.pageYOffset > this.visibilityHeight
- },
- backToTop() {
- if (this.isMoving) return
- const start = window.pageYOffset
- let i = 0
- this.isMoving = true
- this.interval = setInterval(() => {
- const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
- if (next <= this.backPosition) {
- window.scrollTo(0, this.backPosition)
- clearInterval(this.interval)
- this.isMoving = false
- } else {
- window.scrollTo(0, next)
- }
- i++
- }, 16.7)
- },
- easeInOutQuad(t, b, c, d) {
- if ((t /= d / 2) < 1) return c / 2 * t * t + b
- return -c / 2 * (--t * (t - 2) - 1) + b
- }
- }
-}
-</script>
-
-<style scoped>
- .back-to-ceiling {
- position: fixed;
- display: inline-block;
- text-align: center;
- cursor: pointer;
- }
-
- .back-to-ceiling:hover {
- background: #d5dbe7;
- }
-
- .fade-enter-active,
- .fade-leave-active {
- transition: opacity .5s;
- }
-
- .fade-enter,
- .fade-leave-to {
- opacity: 0
- }
-
- .back-to-ceiling .Icon {
- fill: #9aaabf;
- background: none;
- }
-</style>
diff --git a/src/components/element-ui/Breadcrumb/index.vue b/src/components/element-ui/Breadcrumb/index.vue
deleted file mode 100644
index a4e171df..00000000
--- a/src/components/element-ui/Breadcrumb/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
- <el-breadcrumb class="app-breadcrumb" separator="/">
- <transition-group name="breadcrumb">
- <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
- <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{
- generateTitle(item.meta.title) }}</span>
- <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
- </el-breadcrumb-item>
- </transition-group>
- </el-breadcrumb>
-</template>
-
-<script>
-import { generateTitle } from '@/utils/i18n'
-import pathToRegexp from 'path-to-regexp'
-
-export default {
- data: function() {
- return {
- levelList: null
- }
- },
- watch: {
- $route() {
- 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.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
- matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
- }
-
- this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
- },
- pathCompile(path) {
- // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
- const { params } = this.$route
- var toPath = pathToRegexp.compile(path)
- return toPath(params)
- },
- handleLink(item) {
- const { redirect, path } = item
- if (redirect) {
- this.$router.push(redirect)
- return
- }
- this.$router.push(this.pathCompile(path))
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
- .app-breadcrumb.el-breadcrumb {
- display: inline-block;
- font-size: 14px;
- line-height: 50px;
- margin-left: 8px;
- .no-redirect {
- color: #97a8be;
- cursor: text;
- }
- }
-</style>
diff --git a/src/components/element-ui/Charts/keyboard.vue b/src/components/element-ui/Charts/keyboard.vue
deleted file mode 100644
index fd116904..00000000
--- a/src/components/element-ui/Charts/keyboard.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
- <div :class="className" :id="id" :style="{height:height,width:width}"/>
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- id: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '200px'
- },
- height: {
- type: String,
- default: '200px'
- }
- },
- data: function() {
- return {
- chart: null
- }
- },
- mounted() {
- this.initChart()
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(document.getElementById(this.id))
-
- const xAxisData = []
- const data = []
- const data2 = []
- for (let i = 0; i < 50; i++) {
- xAxisData.push(i)
- data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
- data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
- }
- this.chart.setOption(
- {
- backgroundColor: '#08263a',
- grid: {
- left: '5%',
- right: '5%'
- },
- xAxis: [{
- show: false,
- data: xAxisData
- }, {
- show: false,
- data: xAxisData
- }],
- visualMap: {
- show: false,
- min: 0,
- max: 50,
- dimension: 0,
- inRange: {
- color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
- }
- },
- yAxis: {
- axisLine: {
- show: false
- },
- axisLabel: {
- textStyle: {
- color: '#4a657a'
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#08263f'
- }
- },
- axisTick: {
- show: false
- }
- },
- series: [{
- name: 'back',
- type: 'bar',
- data: data2,
- z: 1,
- itemStyle: {
- normal: {
- opacity: 0.4,
- barBorderRadius: 5,
- shadowBlur: 3,
- shadowColor: '#111'
- }
- }
- }, {
- name: 'Simulate Shadow',
- type: 'line',
- data,
- z: 2,
- showSymbol: false,
- animationDelay: 0,
- animationEasing: 'linear',
- animationDuration: 1200,
- lineStyle: {
- normal: {
- color: 'transparent'
- }
- },
- areaStyle: {
- normal: {
- color: '#08263a',
- shadowBlur: 50,
- shadowColor: '#000'
- }
- }
- }, {
- name: 'front',
- type: 'bar',
- data,
- xAxisIndex: 1,
- z: 3,
- itemStyle: {
- normal: {
- barBorderRadius: 5
- }
- }
- }],
- animationEasing: 'elasticOut',
- animationEasingUpdate: 'elasticOut',
- animationDelay(idx) {
- return idx * 20
- },
- animationDelayUpdate(idx) {
- return idx * 20
- }
- })
- }
- }
-}
-</script>
diff --git a/src/components/element-ui/Charts/lineMarker.vue b/src/components/element-ui/Charts/lineMarker.vue
deleted file mode 100644
index fb6f7ec5..00000000
--- a/src/components/element-ui/Charts/lineMarker.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
- <div :class="className" :id="id" :style="{height:height,width:width}"/>
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- id: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '200px'
- },
- height: {
- type: String,
- default: '200px'
- }
- },
- data: function() {
- return {
- chart: null
- }
- },
- mounted() {
- this.initChart()
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(document.getElementById(this.id))
-
- this.chart.setOption({
- backgroundColor: '#394056',
- title: {
- top: 20,
- text: 'Requests',
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#F1F1F3'
- },
- left: '1%'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: '#57617B'
- }
- }
- },
- legend: {
- top: 20,
- icon: 'rect',
- itemWidth: 14,
- itemHeight: 5,
- itemGap: 13,
- data: ['CMCC', 'CTCC', 'CUCC'],
- right: '4%',
- textStyle: {
- fontSize: 12,
- color: '#F1F1F3'
- }
- },
- grid: {
- top: 100,
- left: '2%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: '#57617B'
- }
- },
- data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
- }],
- yAxis: [{
- type: 'value',
- name: '(%)',
- axisTick: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#57617B'
- }
- },
- axisLabel: {
- margin: 10,
- textStyle: {
- fontSize: 14
- }
- },
- splitLine: {
- lineStyle: {
- color: '#57617B'
- }
- }
- }],
- series: [{
- name: 'CMCC',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(137, 189, 27, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(137, 189, 27, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
- color: 'rgb(137,189,27)',
- borderColor: 'rgba(137,189,2,0.27)',
- borderWidth: 12
-
- }
- },
- data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
- }, {
- name: 'CTCC',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(0, 136, 212, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(0, 136, 212, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
- color: 'rgb(0,136,212)',
- borderColor: 'rgba(0,136,212,0.2)',
- borderWidth: 12
-
- }
- },
- data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
- }, {
- name: 'CUCC',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(219, 50, 51, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(219, 50, 51, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
- color: 'rgb(219,50,51)',
- borderColor: 'rgba(219,50,51,0.2)',
- borderWidth: 12
- }
- },
- data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
- }]
- })
- }
- }
-}
-</script>
diff --git a/src/components/element-ui/Charts/mixChart.vue b/src/components/element-ui/Charts/mixChart.vue
deleted file mode 100644
index b7397032..00000000
--- a/src/components/element-ui/Charts/mixChart.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<template>
- <div :class="className" :id="id" :style="{height:height,width:width}"/>
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- id: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '200px'
- },
- height: {
- type: String,
- default: '200px'
- }
- },
- data: function() {
- return {
- chart: null
- }
- },
- mounted() {
- this.initChart()
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(document.getElementById(this.id))
- const xData = (function() {
- const data = []
- for (let i = 1; i < 13; i++) {
- data.push(i + 'month')
- }
- return data
- }())
- this.chart.setOption({
- backgroundColor: '#344b58',
- title: {
- text: 'statistics',
- x: '20',
- top: '20',
- textStyle: {
- color: '#fff',
- fontSize: '22'
- },
- subtextStyle: {
- color: '#90979c',
- fontSize: '16'
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- textStyle: {
- color: '#fff'
- }
- }
- },
- grid: {
- left: '5%',
- right: '5%',
- borderWidth: 0,
- top: 150,
- bottom: 95,
- textStyle: {
- color: '#fff'
- }
- },
- legend: {
- x: '5%',
- top: '10%',
- textStyle: {
- color: '#90979c'
- },
- data: ['female', 'male', 'average']
- },
- calculable: true,
- xAxis: [{
- type: 'category',
- axisLine: {
- lineStyle: {
- color: '#90979c'
- }
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- splitArea: {
- show: false
- },
- axisLabel: {
- interval: 0
-
- },
- data: xData
- }],
- yAxis: [{
- type: 'value',
- splitLine: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#90979c'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- interval: 0
- },
- splitArea: {
- show: false
- }
- }],
- dataZoom: [{
- show: true,
- height: 30,
- xAxisIndex: [
- 0
- ],
- bottom: 30,
- start: 10,
- end: 80,
- handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
- handleSize: '110%',
- handleStyle: {
- color: '#d3dee5'
-
- },
- textStyle: {
- color: '#fff' },
- borderColor: '#90979c'
-
- }, {
- type: 'inside',
- show: true,
- height: 15,
- start: 1,
- end: 35
- }],
- series: [{
- name: 'female',
- type: 'bar',
- stack: 'total',
- barMaxWidth: 35,
- barGap: '10%',
- itemStyle: {
- normal: {
- color: 'rgba(255,144,128,1)',
- label: {
- show: true,
- textStyle: {
- color: '#fff'
- },
- position: 'insideTop',
- formatter(p) {
- return p.value > 0 ? p.value : ''
- }
- }
- }
- },
- data: [
- 709,
- 1917,
- 2455,
- 2610,
- 1719,
- 1433,
- 1544,
- 3285,
- 5208,
- 3372,
- 2484,
- 4078
- ]
- },
-
- {
- name: 'male',
- type: 'bar',
- stack: 'total',
- itemStyle: {
- normal: {
- color: 'rgba(0,191,183,1)',
- barBorderRadius: 0,
- label: {
- show: true,
- position: 'top',
- formatter(p) {
- return p.value > 0 ? p.value : ''
- }
- }
- }
- },
- data: [
- 327,
- 1776,
- 507,
- 1200,
- 800,
- 482,
- 204,
- 1390,
- 1001,
- 951,
- 381,
- 220
- ]
- }, {
- name: 'average',
- type: 'line',
- stack: 'total',
- symbolSize: 10,
- symbol: 'circle',
- itemStyle: {
- normal: {
- color: 'rgba(252,230,48,1)',
- barBorderRadius: 0,
- label: {
- show: true,
- position: 'top',
- formatter(p) {
- return p.value > 0 ? p.value : ''
- }
- }
- }
- },
- data: [
- 1036,
- 3693,
- 2962,
- 3810,
- 2519,
- 1915,
- 1748,
- 4675,
- 6209,
- 4323,
- 2865,
- 4298
- ]
- }
- ]
- })
- }
- }
-}
-</script>
diff --git a/src/components/element-ui/Charts/mixins/resize.js b/src/components/element-ui/Charts/mixins/resize.js
deleted file mode 100644
index cc7b8399..00000000
--- a/src/components/element-ui/Charts/mixins/resize.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
- data: function() {
- return {
- sidebarElm: null
- }
- },
- mounted() {
- this.__resizeHandler = debounce(() => {
- if (this.chart) {
- this.chart.resize()
- }
- }, 100)
- window.addEventListener('resize', this.__resizeHandler)
-
- this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
- this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
- },
- beforeDestroy() {
- window.removeEventListener('resize', this.__resizeHandler)
-
- this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
- },
- methods: {
- sidebarResizeHandler(e) {
- if (e.propertyName === 'width') {
- this.__resizeHandler()
- }
- }
- }
-}
diff --git a/src/components/element-ui/DndList/index.vue b/src/components/element-ui/DndList/index.vue
deleted file mode 100644
index 7587daa7..00000000
--- a/src/components/element-ui/DndList/index.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
- <div class="dndList">
- <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.id }}[{{ 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"/>
- </span>
- </div>
- </div>
- </draggable>
- </div>
- <div :style="{width:width2}" class="dndList-list">
- <h3>{{ list2Title }}</h3>
- <draggable :list="list2" :options="{group:'article'}" class="dragArea">
- <div v-for="element in list2" :key="element.id" class="list-complete-item">
- <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
- </div>
- </draggable>
- </div>
- </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-
-export default {
- name: 'DndList',
- components: { draggable },
- props: {
- list1: {
- type: Array,
- default() {
- return []
- }
- },
- list2: {
- type: Array,
- default() {
- return []
- }
- },
- list1Title: {
- type: String,
- default: 'list1'
- },
- list2Title: {
- type: String,
- default: 'list2'
- },
- width1: {
- type: String,
- default: '48%'
- },
- width2: {
- type: String,
- default: '48%'
- }
- },
- methods: {
- isNotInList1(v) {
- return this.list1.every(k => v.id !== k.id)
- },
- isNotInList2(v) {
- return this.list2.every(k => v.id !== k.id)
- },
- deleteEle(ele) {
- for (const item of this.list1) {
- if (item.id === ele.id) {
- const index = this.list1.indexOf(item)
- this.list1.splice(index, 1)
- break
- }
- }
- if (this.isNotInList2(ele)) {
- this.list2.unshift(ele)
- }
- },
- pushEle(ele) {
- for (const item of this.list2) {
- if (item.id === ele.id) {
- const index = this.list2.indexOf(item)
- this.list2.splice(index, 1)
- break
- }
- }
- if (this.isNotInList1(ele)) {
- this.list1.push(ele)
- }
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dndList {
- background: #fff;
- padding-bottom: 40px;
- &:after {
- content: "";
- display: table;
- clear: both;
- }
- .dndList-list {
- float: left;
- padding-bottom: 30px;
- &:first-of-type {
- margin-right: 2%;
- }
- .dragArea {
- margin-top: 15px;
- min-height: 50px;
- padding-bottom: 30px;
- }
- }
-}
-
-.list-complete-item {
- cursor: pointer;
- position: relative;
- font-size: 14px;
- padding: 5px 12px;
- margin-top: 4px;
- border: 1px solid #bfcbd9;
- transition: all 1s;
-}
-
-.list-complete-item-handle {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin-right: 50px;
-}
-
-.list-complete-item-handle2 {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin-right: 20px;
-}
-
-.list-complete-item.sortable-chosen {
- background: #4AB7BD;
-}
-
-.list-complete-item.sortable-ghost {
- background: #30B08F;
-}
-
-.list-complete-enter,
-.list-complete-leave-active {
- opacity: 0;
-}
-</style>
diff --git a/src/components/element-ui/DragSelect/index.vue b/src/components/element-ui/DragSelect/index.vue
deleted file mode 100644
index 513be006..00000000
--- a/src/components/element-ui/DragSelect/index.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
- <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
- <slot/>
- </el-select>
-</template>
-
-<script>
-import Sortable from 'sortablejs'
-
-export default {
- name: 'DragSelect',
- props: {
- value: {
- type: Array,
- required: true
- }
- },
- computed: {
- selectVal: {
- get() {
- return [...this.value]
- },
- set(val) {
- this.$emit('input', [...val])
- }
- }
- },
- mounted() {
- this.setSort()
- },
- methods: {
- setSort() {
- const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
- this.sortable = Sortable.create(el, {
- ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
- setData: function(dataTransfer) {
- dataTransfer.setData('Text', '')
- // to avoid Firefox bug
- // Detail see : https://github.com/RubaXa/Sortable/issues/1012
- },
- onEnd: evt => {
- const targetRow = this.value.splice(evt.oldIndex, 1)[0]
- this.value.splice(evt.newIndex, 0, targetRow)
- }
- })
- }
- }
-}
-</script>
-
-<style scoped>
-.drag-select >>> .sortable-ghost{
- opacity: .8;
- color: #fff!important;
- background: #42b983!important;
-}
-
-.drag-select >>> .el-tag{
- cursor: pointer;
-}
-</style>
diff --git a/src/components/element-ui/Dropzone/index.vue b/src/components/element-ui/Dropzone/index.vue
deleted file mode 100644
index 187f7f70..00000000
--- a/src/components/element-ui/Dropzone/index.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
- <div :ref="id" :action="url" :id="id" class="dropzone">
- <input type="file" name="file">
- </div>
-</template>
-
-<script>
-import Dropzone from 'dropzone'
-import 'dropzone/dist/dropzone.css'
-// import { getToken } from 'api/qiniu';
-
-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: function() {
- 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
- this.dropzone = new Dropzone(element, {
- clickable: this.clickable,
- thumbnailWidth: this.thumbnailWidth,
- thumbnailHeight: this.thumbnailHeight,
- maxFiles: this.maxFiles,
- maxFilesize: this.maxFilesize,
- dictRemoveFile: 'Remove',
- addRemoveLinks: this.showRemoveLink,
- acceptedFiles: this.acceptedFiles,
- autoProcessQueue: this.autoProcessQueue,
- dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
- dictMaxFilesExceeded: 'åªèƒ½ä¸€ä¸ªå›¾',
- previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div> <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"> <i class="material-icons">done</i> </div> <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
- init() {
- const val = vm.defaultImg
- if (!val) return
- if (Array.isArray(val)) {
- if (val.length === 0) return
- val.map((v, i) => {
- const mockFile = { name: 'name' + i, size: 12345, url: v }
- this.options.addedfile.call(this, mockFile)
- this.options.thumbnail.call(this, mockFile, v)
- mockFile.previewElement.classList.add('dz-success')
- mockFile.previewElement.classList.add('dz-complete')
- vm.initOnce = false
- return true
- })
- } else {
- const mockFile = { name: 'name', size: 12345, url: val }
- this.options.addedfile.call(this, mockFile)
- this.options.thumbnail.call(this, mockFile, val)
- mockFile.previewElement.classList.add('dz-success')
- mockFile.previewElement.classList.add('dz-complete')
- vm.initOnce = false
- }
- },
- accept: (file, done) => {
- /* 七牛*/
- // const token = this.$store.getters.token;
- // getToken(token).then(response => {
- // file.token = response.data.qiniu_token;
- // file.key = response.data.qiniu_key;
- // file.url = response.data.qiniu_url;
- // done();
- // })
- done()
- },
- sending: (file, xhr, formData) => {
- // formData.append('token', file.token);
- // formData.append('key', file.key);
- vm.initOnce = false
- }
- })
-
- if (this.couldPaste) {
- document.addEventListener('paste', this.pasteImg)
- }
-
- this.dropzone.on('success', file => {
- vm.$emit('dropzone-success', file, vm.dropzone.element)
- })
- this.dropzone.on('addedfile', file => {
- vm.$emit('dropzone-fileAdded', file)
- })
- this.dropzone.on('removedfile', file => {
- vm.$emit('dropzone-removedFile', file)
- })
- this.dropzone.on('error', (file, error, xhr) => {
- vm.$emit('dropzone-error', file, error, xhr)
- })
- this.dropzone.on('successmultiple', (file, error, xhr) => {
- vm.$emit('dropzone-successmultiple', file, error, xhr)
- })
- },
- destroyed() {
- document.removeEventListener('paste', this.pasteImg)
- this.dropzone.destroy()
- },
- methods: {
- removeAllFiles() {
- this.dropzone.removeAllFiles(true)
- },
- processQueue() {
- this.dropzone.processQueue()
- },
- pasteImg(event) {
- const items = (event.clipboardData || event.originalEvent.clipboardData).items
- if (items[0].kind === 'file') {
- this.dropzone.addFile(items[0].getAsFile())
- }
- },
- initImages(val) {
- if (!val) return
- if (Array.isArray(val)) {
- val.map((v, i) => {
- const mockFile = { name: 'name' + i, size: 12345, url: v }
- this.dropzone.options.addedfile.call(this.dropzone, mockFile)
- this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
- mockFile.previewElement.classList.add('dz-success')
- mockFile.previewElement.classList.add('dz-complete')
- return true
- })
- } else {
- const mockFile = { name: 'name', size: 12345, url: val }
- this.dropzone.options.addedfile.call(this.dropzone, mockFile)
- this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
- mockFile.previewElement.classList.add('dz-success')
- mockFile.previewElement.classList.add('dz-complete')
- }
- }
-
- }
-}
-</script>
-
-<style scoped>
- .dropzone {
- border: 2px solid #E5E5E5;
- font-family: 'Roboto', sans-serif;
- color: #777;
- transition: background-color .2s linear;
- padding: 5px;
- }
-
- .dropzone:hover {
- background-color: #F6F6F6;
- }
-
- i {
- color: #CCC;
- }
-
- .dropzone .dz-image img {
- width: 100%;
- height: 100%;
- }
-
- .dropzone input[name='file'] {
- display: none;
- }
-
- .dropzone .dz-preview .dz-image {
- border-radius: 0px;
- }
-
- .dropzone .dz-preview:hover .dz-image img {
- transform: none;
- -webkit-filter: none;
- width: 100%;
- height: 100%;
- }
-
- .dropzone .dz-preview .dz-details {
- bottom: 0px;
- top: 0px;
- color: white;
- background-color: rgba(33, 150, 243, 0.8);
- transition: opacity .2s linear;
- text-align: left;
- }
-
- .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
- background-color: transparent;
- }
-
- .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
- border: none;
- }
-
- .dropzone .dz-preview .dz-details .dz-filename:hover span {
- background-color: transparent;
- border: none;
- }
-
- .dropzone .dz-preview .dz-remove {
- position: absolute;
- z-index: 30;
- color: white;
- margin-left: 15px;
- padding: 10px;
- top: inherit;
- bottom: 15px;
- border: 2px white solid;
- text-decoration: none;
- text-transform: uppercase;
- font-size: 0.8rem;
- font-weight: 800;
- letter-spacing: 1.1px;
- opacity: 0;
- }
-
- .dropzone .dz-preview:hover .dz-remove {
- opacity: 1;
- }
-
- .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
- margin-left: -40px;
- margin-top: -50px;
- }
-
- .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
- color: white;
- font-size: 5rem;
- }
-</style>
diff --git a/src/components/element-ui/ErrorLog/index.vue b/src/components/element-ui/ErrorLog/index.vue
deleted file mode 100644
index 793d4e24..00000000
--- a/src/components/element-ui/ErrorLog/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
- <div v-if="errorLogs.length>0">
- <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
- <el-button style="padding: 8px 10px;" size="small" type="danger">
- <svg-icon icon-class="bug" />
- </el-button>
- </el-badge>
-
- <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
- <el-table :data="errorLogs" border>
- <el-table-column label="Message">
- <template slot-scope="scope">
- <div>
- <span class="message-title">Msg:</span>
- <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
- </div>
- <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>
- </div>
- <br>
- <div>
- <span class="message-title" style="padding-right: 16px;">Url: </span>
- <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 }}
- </template>
- </el-table-column>
- </el-table>
- </el-dialog>
-
- </div>
-</template>
-
-<script>
-export default {
- name: 'ErrorLog',
- data: function() {
- return {
- dialogTableVisible: false
- }
- },
- computed: {
- errorLogs() {
- return this.$store.getters.errorLogs
- }
- }
-}
-</script>
-
-<style scoped>
-.message-title {
- font-size: 16px;
- color: #333;
- font-weight: bold;
- padding-right: 8px;
-}
-</style>
diff --git a/src/components/element-ui/GithubCorner/index.vue b/src/components/element-ui/GithubCorner/index.vue
deleted file mode 100644
index b5da8874..00000000
--- a/src/components/element-ui/GithubCorner/index.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<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;"
- aria-hidden="true">
- <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>
-
-<style scoped>
-.github-corner:hover .octo-arm {
- animation: octocat-wave 560ms ease-in-out
-}
-
-@keyframes octocat-wave {
- 0%,
- 100% {
- transform: rotate(0)
- }
- 20%,
- 60% {
- transform: rotate(-25deg)
- }
- 40%,
- 80% {
- transform: rotate(10deg)
- }
-}
-
-@media (max-width:500px) {
- .github-corner:hover .octo-arm {
- animation: none
- }
- .github-corner .octo-arm {
- animation: octocat-wave 560ms ease-in-out
- }
-}
-</style>
diff --git a/src/components/element-ui/HeaderSearch/index.vue b/src/components/element-ui/HeaderSearch/index.vue
deleted file mode 100644
index fdee688a..00000000
--- a/src/components/element-ui/HeaderSearch/index.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
- <div :class="{'show':show}" class="header-search">
- <svg-icon class-name="search-icon" icon-class="search" @click="click" />
- <el-select
- ref="headerSearchSelect"
- v-model="search"
- :remote-method="querySearch"
- filterable
- default-first-option
- remote
- placeholder="Search"
- class="header-search-select"
- @change="change">
- <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')"/>
- </el-select>
- </div>
-</template>
-
-<script>
-import Fuse from 'fuse.js'
-import path from 'path'
-import i18n from '@/lang'
-
-export default {
- name: 'HeaderSearch',
- data: function() {
- return {
- search: '',
- options: [],
- searchPool: [],
- show: false,
- fuse: undefined
- }
- },
- computed: {
- routers() {
- return this.$store.getters.permission_routers
- },
- lang() {
- return this.$store.getters.language
- }
- },
- watch: {
- lang() {
- this.searchPool = this.generateRouters(this.routers)
- },
- routers() {
- this.searchPool = this.generateRouters(this.routers)
- },
- searchPool(list) {
- this.initFuse(list)
- },
- show(value) {
- if (value) {
- document.body.addEventListener('click', this.close)
- } else {
- document.body.removeEventListener('click', this.close)
- }
- }
- },
- mounted() {
- this.searchPool = this.generateRouters(this.routers)
- },
- methods: {
- click() {
- this.show = !this.show
- if (this.show) {
- this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
- }
- },
- close() {
- this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
- this.options = []
- this.show = false
- },
- change(val) {
- this.$router.push(val.path)
- this.search = ''
- this.options = []
- this.$nextTick(() => {
- this.show = false
- })
- },
- initFuse(list) {
- this.fuse = new Fuse(list, {
- shouldSort: true,
- threshold: 0.4,
- location: 0,
- distance: 100,
- maxPatternLength: 32,
- minMatchCharLength: 1,
- keys: [{
- name: 'title',
- weight: 0.7
- }, {
- name: 'path',
- weight: 0.3
- }]
- })
- },
- // Filter out the routes that can be displayed in the sidebar
- // And generate the internationalized title
- generateRouters(routers, basePath = '/', prefixTitle = []) {
- let res = []
-
- for (const router of routers) {
- // skip hidden router
- if (router.hidden) { continue }
-
- const data = {
- path: path.resolve(basePath, router.path),
- title: [...prefixTitle]
- }
-
- if (router.meta && router.meta.title) {
- // generate internationalized title
- const i18ntitle = i18n.t(`route.${router.meta.title}`)
-
- data.title = [...data.title, i18ntitle]
-
- if (router.redirect !== 'noredirect') {
- // only push the routes with title
- // special case: need to exclude parent router without redirect
- res.push(data)
- }
- }
-
- // recursive child routers
- if (router.children) {
- const tempRouters = this.generateRouters(router.children, data.path, data.title)
- if (tempRouters.length >= 1) {
- res = [...res, ...tempRouters]
- }
- }
- }
- return res
- },
- querySearch(query) {
- if (query !== '') {
- this.options = this.fuse.search(query)
- } else {
- this.options = []
- }
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.header-search {
- font-size: 0 !important;
-
- .search-icon {
- cursor: pointer;
- font-size: 18px;
- vertical-align: middle;
- }
-
- .header-search-select {
- font-size: 18px;
- transition: width 0.2s;
- width: 0;
- overflow: hidden;
- background: transparent;
- border-radius: 0;
- display: inline-block;
- vertical-align: middle;
-
- /deep/ .el-input__inner {
- border-radius: 0;
- border: 0;
- padding-left: 0;
- padding-right: 0;
- box-shadow: none !important;
- border-bottom: 1px solid #d9d9d9;
- vertical-align: middle;
- }
- }
-
- &.show {
- .header-search-select {
- width: 210px;
- margin-left: 10px;
- }
- }
-}
-</style>
diff --git a/src/components/element-ui/ImageCropper/index.vue b/src/components/element-ui/ImageCropper/index.vue
deleted file mode 100644
index 007c12aa..00000000
--- a/src/components/element-ui/ImageCropper/index.vue
+++ /dev/null
@@ -1,1420 +0,0 @@
-<template>
- <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 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 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-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 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-operate">
- <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
- <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
- </div>
- </div>
- <canvas v-show="false" ref="canvas" :width="width" :height="height"/>
- </div>
- </div>
-</template>
-
-<script>
-/* eslint-disable */
-'use strict'
-import request from '@/utils/request'
-import language from './utils/language.js'
-import mimes from './utils/mimes.js'
-import data2blob from './utils/data2blob.js'
-import effectRipple from './utils/effectRipple.js'
-export default {
- props: {
- // åŸŸï¼Œä¸Šä¼ æ–‡ä»¶name，触å‘事件会带上（如果一个页é¢å¤šä¸ªå›¾ç‰‡ä¸Šä¼ 控件，å¯ä»¥åšåŒºåˆ†
- field: {
- type: String,
- 'default': 'avatar'
- },
- // 原åkey，类似于id，触å‘事件会带上（如果一个页é¢å¤šä¸ªå›¾ç‰‡ä¸Šä¼ 控件，å¯ä»¥åšåŒºåˆ†
- ki: {
- 'default': 0
- },
- // 显示该控件与å¦
- value: {
- 'default': true
- },
- // ä¸Šä¼ åœ°å€
- url: {
- type: String,
- 'default': ''
- },
- // 其他è¦ä¸Šä¼ 文件附带的数æ®ï¼Œå¯¹è±¡æ ¼å¼
- params: {
- type: Object,
- 'default': null
- },
- // Add custom headers
- headers: {
- type: Object,
- 'default': null
- },
- // 剪è£å›¾ç‰‡çš„宽
- width: {
- type: Number,
- default: 200
- },
- // 剪è£å›¾ç‰‡çš„高
- height: {
- type: Number,
- default: 200
- },
- // ä¸æ˜¾ç¤ºæ—‹è½¬åŠŸèƒ½
- noRotate: {
- type: Boolean,
- default: true
- },
- // ä¸é¢„览圆形图片
- noCircle: {
- type: Boolean,
- default: false
- },
- // ä¸é¢„览方形图片
- noSquare: {
- type: Boolean,
- default: false
- },
- // å•æ–‡ä»¶å¤§å°é™åˆ¶
- maxSize: {
- type: Number,
- 'default': 10240
- },
- // è¯è¨€ç±»åž‹
- langType: {
- type: String,
- 'default': 'zh'
- },
- // è¯è¨€åŒ…
- langExt: {
- type: Object,
- 'default': null
- },
- // å›¾ç‰‡ä¸Šä¼ æ ¼å¼
- imgFormat: {
- type: String,
- 'default': 'png'
- },
- // 是å¦æ”¯æŒè·¨åŸŸ
- withCredentials: {
- type: Boolean,
- 'default': false
- }
- },
- data: function() {
- const that = this
- const {
- imgFormat,
- langType,
- langExt,
- width,
- height
- } = that
- let isSupported = true
- const allowImgFormat = [
- 'jpg',
- 'png'
- ]
- const tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat
- const lang = language[langType] ? language[langType] : language['en']
- const mime = mimes[tempImgFormat]
- // è§„èŒƒå›¾ç‰‡æ ¼å¼
- that.imgFormat = tempImgFormat
- if (langExt) {
- Object.assign(lang, langExt)
- }
- if (typeof FormData !== 'function') {
- isSupported = false
- }
- return {
- // 图片的mime
- mime,
- // è¯è¨€åŒ…
- lang,
- // æµè§ˆå™¨æ˜¯å¦æ”¯æŒè¯¥æŽ§ä»¶
- isSupported,
- // æµè§ˆå™¨æ˜¯å¦æ”¯æŒè§¦å±äº‹ä»¶
- isSupportTouch: document.hasOwnProperty('ontouchstart'),
- // æ¥éª¤
- step: 1, // 1选择文件 2å‰ªè£ 3上ä¼
- // ä¸Šä¼ çŠ¶æ€åŠè¿›åº¦
- loading: 0, // 0未开始 1æ£åœ¨ 2æˆåŠŸ 3错误
- progress: 0,
- // 是å¦æœ‰é”™è¯¯åŠé”™è¯¯ä¿¡æ¯
- hasError: false,
- errorMsg: '',
- // 需求图宽高比
- ratio: width / height,
- // 原图地å€ã€ç”Ÿæˆå›¾ç‰‡åœ°å€
- sourceImg: null,
- sourceImgUrl: '',
- createImgUrl: '',
- // 原图片拖动事件åˆå§‹å€¼
- sourceImgMouseDown: {
- on: false,
- mX: 0, // é¼ æ ‡æŒ‰ä¸‹çš„åæ ‡
- mY: 0,
- x: 0, // scale原图åæ ‡
- y: 0
- },
- // 生æˆå›¾ç‰‡é¢„览的容器大å°
- previewContainer: {
- width: 100,
- height: 100
- },
- // 原图容器宽高
- sourceImgContainer: { // sic
- width: 240,
- height: 184 // 如果生æˆå›¾æ¯”例与æ¤ä¸€è‡´ä¼šå‡ºçŽ°bug，先改æˆç‰¹æ®Šçš„æ ¼å¼å§ï¼Œå“ˆå“ˆå“ˆ
- },
- // 原图展示属性
- scale: {
- zoomAddOn: false, // 按钮缩放事件开å¯
- zoomSubOn: false, // 按钮缩放事件开å¯
- range: 1, // 最大100
- rotateLeft: false, // 按钮å‘左旋转事件开å¯
- rotateRight: false, // 按钮å‘å³æ—‹è½¬äº‹ä»¶å¼€å¯
- degree: 0, // 旋转度数
- x: 0,
- y: 0,
- width: 0,
- height: 0,
- maxWidth: 0,
- maxHeight: 0,
- minWidth: 0, // 最宽
- minHeight: 0,
- naturalWidth: 0, // 原宽
- naturalHeight: 0
- }
- }
- },
- computed: {
- // 进度æ¡æ ·å¼
- progressStyle() {
- const {
- progress
- } = this
- return {
- width: progress + '%'
- }
- },
- // åŽŸå›¾æ ·å¼
- sourceImgStyle() {
- const {
- scale,
- sourceImgMasking
- } = this
- const top = scale.y + sourceImgMasking.y + 'px'
- const left = scale.x + sourceImgMasking.x + 'px'
- return {
- top,
- left,
- width: scale.width + 'px',
- height: scale.height + 'px',
- transform: 'rotate(' + scale.degree + 'deg)', // 旋转时 å·¦ä¾§åŽŸå§‹å›¾æ—‹è½¬æ ·å¼
- '-ms-transform': 'rotate(' + scale.degree + 'deg)', // 兼容IE9
- '-moz-transform': 'rotate(' + scale.degree + 'deg)', // 兼容FireFox
- '-webkit-transform': 'rotate(' + scale.degree + 'deg)', // 兼容Safari 和 chrome
- '-o-transform': 'rotate(' + scale.degree + 'deg)' // 兼容 Opera
- }
- },
- // 原图蒙版属性
- sourceImgMasking() {
- const {
- width,
- height,
- ratio,
- sourceImgContainer
- } = this
- const sic = sourceImgContainer
- const sicRatio = sic.width / sic.height // 原图容器宽高比
- let x = 0
- let y = 0
- let w = sic.width
- let h = sic.height
- let scale = 1
- if (ratio < sicRatio) {
- scale = sic.height / height
- w = sic.height * ratio
- x = (sic.width - w) / 2
- }
- if (ratio > sicRatio) {
- scale = sic.width / width
- h = sic.width / ratio
- y = (sic.height - h) / 2
- }
- return {
- scale, // 蒙版相对需求宽高的缩放
- x,
- y,
- width: w,
- height: h
- }
- },
- // 原图é®ç½©æ ·å¼
- sourceImgShadeStyle() {
- const {
- sourceImgMasking,
- sourceImgContainer
- } = this
- const sic = sourceImgContainer
- const sim = sourceImgMasking
- const w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2
- const h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2
- return {
- width: w + 'px',
- height: h + 'px'
- }
- },
- previewStyle() {
- const {
- width,
- height,
- ratio,
- previewContainer
- } = this
- const pc = previewContainer
- let w = pc.width
- let h = pc.height
- const pcRatio = w / h
- if (ratio < pcRatio) {
- w = pc.height * ratio
- }
- if (ratio > pcRatio) {
- h = pc.width / ratio
- }
- return {
- width: w + 'px',
- height: h + 'px'
- }
- }
- },
- watch: {
- value(newValue) {
- if (newValue && this.loading != 1) {
- this.reset()
- }
- }
- },
- methods: {
- // 点击波纹效果
- ripple(e) {
- effectRipple(e)
- },
- // å…³é—控件
- off() {
- setTimeout(() => {
- this.$emit('input', false)
- this.$emit('close')
- if (this.step == 3 && this.loading == 2) {
- this.setStep(1)
- }
- }, 200)
- },
- // 设置æ¥éª¤
- setStep(no) {
- // 延时是为了显示动画效果呢，哈哈哈
- setTimeout(() => {
- this.step = no
- }, 200)
- },
- /* 图片选择区域函数绑定
- ---------------------------------------------------------------*/
- preventDefault(e) {
- e.preventDefault()
- return false
- },
- handleClick(e) {
- if (this.loading !== 1) {
- if (e.target !== this.$refs.fileinput) {
- e.preventDefault()
- if (document.activeElement !== this.$refs) {
- this.$refs.fileinput.click()
- }
- }
- }
- },
- handleChange(e) {
- e.preventDefault()
- if (this.loading !== 1) {
- const files = e.target.files || e.dataTransfer.files
- this.reset()
- if (this.checkFile(files[0])) {
- this.setSourceImg(files[0])
- }
- }
- },
- /* ---------------------------------------------------------------*/
- // 检测选择的文件是å¦åˆé€‚
- checkFile(file) {
- let that = this,
- {
- lang,
- maxSize
- } = that
- // ä»…é™å›¾ç‰‡
- if (file.type.indexOf('image') === -1) {
- that.hasError = true
- that.errorMsg = lang.error.onlyImg
- return false
- }
- // 超出大å°
- if (file.size / 1024 > maxSize) {
- that.hasError = true
- that.errorMsg = lang.error.outOfSize + maxSize + 'kb'
- return false
- }
- return true
- },
- // é‡ç½®æŽ§ä»¶
- reset() {
- const that = this
- that.loading = 0
- that.hasError = false
- that.errorMsg = ''
- that.progress = 0
- },
- // 设置图片æº
- setSourceImg(file) {
- let that = this,
- fr = new FileReader()
- fr.onload = function(e) {
- that.sourceImgUrl = fr.result
- that.startCrop()
- }
- fr.readAsDataURL(file)
- },
- // 剪è£å‰å‡†å¤‡å·¥ä½œ
- startCrop() {
- let that = this,
- {
- width,
- height,
- ratio,
- scale,
- sourceImgUrl,
- sourceImgMasking,
- lang
- } = that,
- sim = sourceImgMasking,
- img = new Image()
- img.src = sourceImgUrl
- img.onload = function() {
- let nWidth = img.naturalWidth,
- nHeight = img.naturalHeight,
- nRatio = nWidth / nHeight,
- w = sim.width,
- h = sim.height,
- x = 0,
- y = 0
- // 图片åƒç´ ä¸è¾¾æ ‡
- if (nWidth < width || nHeight < height) {
- that.hasError = true
- that.errorMsg = lang.error.lowestPx + width + '*' + height
- return false
- }
- if (ratio > nRatio) {
- h = w / nRatio
- y = (sim.height - h) / 2
- }
- if (ratio < nRatio) {
- w = h * nRatio
- x = (sim.width - w) / 2
- }
- scale.range = 0
- scale.x = x
- scale.y = y
- scale.width = w
- scale.height = h
- scale.degree = 0
- scale.minWidth = w
- scale.minHeight = h
- scale.maxWidth = nWidth * sim.scale
- scale.maxHeight = nHeight * sim.scale
- scale.naturalWidth = nWidth
- scale.naturalHeight = nHeight
- that.sourceImg = img
- that.createImg()
- that.setStep(2)
- }
- },
- // é¼ æ ‡æŒ‰ä¸‹å›¾ç‰‡å‡†å¤‡ç§»åŠ¨
- imgStartMove(e) {
- e.preventDefault()
- // 支æŒè§¦æ‘¸äº‹ä»¶ï¼Œåˆ™é¼ æ ‡äº‹ä»¶æ— æ•ˆ
- if (this.isSupportTouch && !e.targetTouches) {
- return false
- }
- let et = e.targetTouches ? e.targetTouches[0] : e,
- {
- sourceImgMouseDown,
- scale
- } = this,
- simd = sourceImgMouseDown
- simd.mX = et.screenX
- simd.mY = et.screenY
- simd.x = scale.x
- simd.y = scale.y
- simd.on = true
- },
- // é¼ æ ‡æŒ‰ä¸‹çŠ¶æ€ä¸‹ç§»åŠ¨ï¼Œå›¾ç‰‡ç§»åŠ¨
- imgMove(e) {
- e.preventDefault()
- // 支æŒè§¦æ‘¸äº‹ä»¶ï¼Œåˆ™é¼ æ ‡äº‹ä»¶æ— æ•ˆ
- if (this.isSupportTouch && !e.targetTouches) {
- return false
- }
- let et = e.targetTouches ? e.targetTouches[0] : e,
- {
- sourceImgMouseDown: {
- on,
- mX,
- mY,
- x,
- y
- },
- scale,
- sourceImgMasking
- } = this,
- sim = sourceImgMasking,
- nX = et.screenX,
- nY = et.screenY,
- dX = nX - mX,
- dY = nY - mY,
- rX = x + dX,
- rY = y + dY
- if (!on) return
- if (rX > 0) {
- rX = 0
- }
- if (rY > 0) {
- rY = 0
- }
- if (rX < sim.width - scale.width) {
- rX = sim.width - scale.width
- }
- if (rY < sim.height - scale.height) {
- rY = sim.height - scale.height
- }
- scale.x = rX
- scale.y = rY
- },
- // 按钮按下开始å‘å³æ—‹è½¬
- startRotateRight(e) {
- let that = this,
- {
- scale
- } = that
- scale.rotateRight = true
- function rotate() {
- if (scale.rotateRight) {
- const degree = ++scale.degree
- that.createImg(degree)
- setTimeout(function() {
- rotate()
- }, 60)
- }
- }
- rotate()
- },
- // 按钮按下开始å‘å³æ—‹è½¬
- startRotateLeft(e) {
- let that = this,
- {
- scale
- } = that
- scale.rotateLeft = true
- function rotate() {
- if (scale.rotateLeft) {
- const degree = --scale.degree
- that.createImg(degree)
- setTimeout(function() {
- rotate()
- }, 60)
- }
- }
- rotate()
- },
- // åœæ¢æ—‹è½¬
- endRotate() {
- const {
- scale
- } = this
- scale.rotateLeft = false
- scale.rotateRight = false
- },
- // 按钮按下开始放大
- startZoomAdd(e) {
- let that = this,
- {
- scale
- } = that
- scale.zoomAddOn = true
- function zoom() {
- if (scale.zoomAddOn) {
- const range = scale.range >= 100 ? 100 : ++scale.range
- that.zoomImg(range)
- setTimeout(function() {
- zoom()
- }, 60)
- }
- }
- zoom()
- },
- // 按钮æ¾å¼€æˆ–移开å–消放大
- endZoomAdd(e) {
- this.scale.zoomAddOn = false
- },
- // 按钮按下开始缩å°
- startZoomSub(e) {
- let that = this,
- {
- scale
- } = that
- scale.zoomSubOn = true
- function zoom() {
- if (scale.zoomSubOn) {
- const range = scale.range <= 0 ? 0 : --scale.range
- that.zoomImg(range)
- setTimeout(function() {
- zoom()
- }, 60)
- }
- }
- zoom()
- },
- // 按钮æ¾å¼€æˆ–移开å–消缩å°
- endZoomSub(e) {
- const {
- scale
- } = this
- scale.zoomSubOn = false
- },
- zoomChange(e) {
- this.zoomImg(e.target.value)
- },
- // 缩放原图
- zoomImg(newRange) {
- const that = this
- const {
- sourceImgMasking,
- sourceImgMouseDown,
- scale
- } = this
- const {
- maxWidth,
- maxHeight,
- minWidth,
- minHeight,
- width,
- height,
- x,
- y,
- range
- } = scale
- const sim = sourceImgMasking
- // 蒙版宽高
- const sWidth = sim.width
- const sHeight = sim.height
- // 新宽高
- const nWidth = minWidth + (maxWidth - minWidth) * newRange / 100
- const nHeight = minHeight + (maxHeight - minHeight) * newRange / 100
- // æ–°åæ ‡ï¼ˆæ ¹æ®è’™ç‰ˆä¸å¿ƒç‚¹ç¼©æ”¾ï¼‰
- let nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x)
- let nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y)
- // 判æ–æ–°åæ ‡æ˜¯å¦è¶…过蒙版é™åˆ¶
- if (nX > 0) {
- nX = 0
- }
- if (nY > 0) {
- nY = 0
- }
- if (nX < sWidth - nWidth) {
- nX = sWidth - nWidth
- }
- if (nY < sHeight - nHeight) {
- nY = sHeight - nHeight
- }
- // 赋值处ç†
- scale.x = nX
- scale.y = nY
- scale.width = nWidth
- scale.height = nHeight
- scale.range = newRange
- setTimeout(function() {
- if (scale.range == newRange) {
- that.createImg()
- }
- }, 300)
- },
- // 生æˆéœ€æ±‚图片
- createImg(e) {
- let that = this,
- {
- mime,
- sourceImg,
- scale: {
- x,
- y,
- width,
- height,
- degree
- },
- sourceImgMasking: {
- scale
- }
- } = that,
- canvas = that.$refs.canvas,
- ctx = canvas.getContext('2d')
- if (e) {
- // å–æ¶ˆé¼ æ ‡æŒ‰ä¸‹ç§»åŠ¨çŠ¶æ€
- that.sourceImgMouseDown.on = false
- }
- canvas.width = that.width
- canvas.height = that.height
- ctx.clearRect(0, 0, that.width, that.height)
- // å°†é€æ˜ŽåŒºåŸŸè®¾ç½®ä¸ºç™½è‰²åº•è¾¹
- ctx.fillStyle = '#fff'
- ctx.fillRect(0, 0, that.width, that.height)
- ctx.translate(that.width * 0.5, that.height * 0.5)
- ctx.rotate(Math.PI * degree / 180)
- ctx.translate(-that.width * 0.5, -that.height * 0.5)
- ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale)
- that.createImgUrl = canvas.toDataURL(mime)
- },
- prepareUpload() {
- const {
- url,
- createImgUrl,
- field,
- ki
- } = this
- this.$emit('crop-success', createImgUrl, field, ki)
- if (typeof url === 'string' && url) {
- this.upload()
- } else {
- this.off()
- }
- },
- // ä¸Šä¼ å›¾ç‰‡
- upload() {
- let that = this,
- {
- lang,
- imgFormat,
- mime,
- url,
- params,
- headers,
- field,
- ki,
- createImgUrl,
- withCredentials
- } = this,
- fmData = new FormData()
- fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat)
- // æ·»åŠ å…¶ä»–å‚æ•°
- if (typeof params === 'object' && params) {
- Object.keys(params).forEach((k) => {
- fmData.append(k, params[k])
- })
- }
- // 监å¬è¿›åº¦å›žè°ƒ
- const uploadProgress = function(event) {
- if (event.lengthComputable) {
- that.progress = 100 * Math.round(event.loaded) / event.total
- }
- }
- // ä¸Šä¼ æ–‡ä»¶
- that.reset()
- that.loading = 1
- that.setStep(3)
- request({
- url,
- method: 'post',
- data: fmData
- }).then(resData => {
- that.loading = 2
- that.$emit('crop-upload-success', resData.data)
- }).catch(err => {
- if (that.value) {
- that.loading = 3
- that.hasError = true
- that.errorMsg = lang.fail
- that.$emit('crop-upload-fail', err, field, ki)
- }
- })
- }
- },
- created() {
- // 绑定按键escéšè—æ¤æ’件事件
- document.addEventListener('keyup', (e) => {
- if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
- this.off()
- }
- })
- }
-}
-</script>
-
-<!--
-<style lang='sass' src="./scss/upload.scss">
-</style> -->
-
-<style>
-@charset "UTF-8";
-@-webkit-keyframes vicp_progress {
- 0% {
- background-position-y: 0; }
- 100% {
- background-position-y: 40px; } }
-@keyframes vicp_progress {
- 0% {
- background-position-y: 0; }
- 100% {
- background-position-y: 40px; } }
-@-webkit-keyframes vicp {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0) translatey(-60px);
- transform: scale(0) translatey(-60px); }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1) translatey(0);
- transform: scale(1) translatey(0); } }
-@keyframes vicp {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0) translatey(-60px);
- transform: scale(0) translatey(-60px); }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1) translatey(0);
- transform: scale(1) translatey(0); } }
-.vue-image-crop-upload {
- position: fixed;
- display: block;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- z-index: 10000;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.65);
- -webkit-tap-highlight-color: transparent;
- -moz-tap-highlight-color: transparent; }
- .vue-image-crop-upload .vicp-wrap {
- -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- position: fixed;
- display: block;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- z-index: 10000;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: 600px;
- height: 330px;
- padding: 25px;
- background-color: #fff;
- border-radius: 2px;
- -webkit-animation: vicp 0.12s ease-in;
- animation: vicp 0.12s ease-in; }
- .vue-image-crop-upload .vicp-wrap .vicp-close {
- position: absolute;
- right: -30px;
- top: -30px; }
- .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
- position: relative;
- display: block;
- width: 30px;
- height: 30px;
- cursor: pointer;
- -webkit-transition: -webkit-transform 0.18s;
- transition: -webkit-transform 0.18s;
- transition: transform 0.18s;
- transition: transform 0.18s, -webkit-transform 0.18s;
- -webkit-transform: rotate(0);
- -ms-transform: rotate(0);
- transform: rotate(0); }
- .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
- -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- content: '';
- position: absolute;
- top: 12px;
- left: 4px;
- width: 20px;
- height: 3px;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- background-color: #fff; }
- .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg); }
- .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg); }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
- position: relative;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 35px;
- height: 170px;
- background-color: rgba(0, 0, 0, 0.03);
- text-align: center;
- border: 1px dashed rgba(0, 0, 0, 0.08);
- overflow: hidden; }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
- display: block;
- margin: 0 auto 6px;
- width: 42px;
- height: 42px;
- overflow: hidden; }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
- display: block;
- margin: 0 auto;
- width: 0;
- height: 0;
- border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
- border-left: 14.7px solid transparent;
- border-right: 14.7px solid transparent; }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
- display: block;
- width: 12.6px;
- height: 14.7px;
- margin: 0 auto;
- background-color: rgba(0, 0, 0, 0.3); }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: block;
- height: 12.6px;
- border: 6px solid rgba(0, 0, 0, 0.3);
- border-top: none; }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
- display: block;
- padding: 15px;
- font-size: 14px;
- color: #666;
- line-height: 30px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- padding: 30px;
- width: 100%;
- height: 60px;
- line-height: 30px;
- background-color: #eee;
- text-align: center;
- color: #666;
- font-size: 14px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
- cursor: pointer;
- border-color: rgba(0, 0, 0, 0.1);
- background-color: rgba(0, 0, 0, 0.05); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
- overflow: hidden; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
- float: left; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
- position: relative;
- display: block;
- width: 240px;
- height: 180px;
- background-color: #e5e5e0;
- overflow: hidden; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
- position: absolute;
- display: block;
- cursor: move;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
- -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
- position: absolute;
- background-color: rgba(241, 242, 243, 0.8); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
- top: 0;
- left: 0; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
- bottom: 0;
- right: 0; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate {
- position: relative;
- width: 240px;
- height: 18px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i {
- display: block;
- width: 18px;
- height: 18px;
- border-radius: 100%;
- line-height: 18px;
- text-align: center;
- font-size: 12px;
- font-weight: bold;
- background-color: rgba(0, 0, 0, 0.08);
- color: #fff;
- overflow: hidden; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:hover {
- -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- cursor: pointer;
- background-color: rgba(0, 0, 0, 0.14); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:first-child {
- float: left; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:last-child {
- float: right; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
- position: relative;
- margin: 30px 0 10px 0;
- width: 240px;
- height: 18px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
- position: absolute;
- top: 0;
- width: 18px;
- height: 18px;
- border-radius: 100%;
- background-color: rgba(0, 0, 0, 0.08); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
- -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- cursor: pointer;
- background-color: rgba(0, 0, 0, 0.14); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
- left: 0; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
- position: absolute;
- content: '';
- display: block;
- left: 3px;
- top: 8px;
- width: 12px;
- height: 2px;
- background-color: #fff; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
- right: 0; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
- position: absolute;
- content: '';
- display: block;
- left: 3px;
- top: 8px;
- width: 12px;
- height: 2px;
- background-color: #fff; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
- position: absolute;
- content: '';
- display: block;
- top: 3px;
- left: 8px;
- width: 2px;
- height: 12px;
- background-color: #fff; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
- display: block;
- padding-top: 5px;
- margin: 0 auto;
- width: 180px;
- height: 8px;
- vertical-align: top;
- background: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- cursor: pointer;
- /* 滑å—
- ---------------------------------------------------------------*/
- /* 轨é“
- ---------------------------------------------------------------*/ }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
- outline: none; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
- -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
- -webkit-appearance: none;
- appearance: none;
- margin-top: -3px;
- width: 12px;
- height: 12px;
- background-color: #61c091;
- border-radius: 100%;
- border: none;
- -webkit-transition: 0.2s;
- transition: 0.2s; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb {
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
- -moz-appearance: none;
- appearance: none;
- width: 12px;
- height: 12px;
- background-color: #61c091;
- border-radius: 100%;
- border: none;
- -webkit-transition: 0.2s;
- transition: 0.2s; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb {
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
- appearance: none;
- width: 12px;
- height: 12px;
- background-color: #61c091;
- border: none;
- border-radius: 100%;
- -webkit-transition: 0.2s;
- transition: 0.2s; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- width: 14px;
- height: 14px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- width: 14px;
- height: 14px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb {
- -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- margin-top: -4px;
- width: 14px;
- height: 14px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track {
- -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- width: 100%;
- height: 6px;
- cursor: pointer;
- border-radius: 2px;
- border: none;
- background-color: rgba(68, 170, 119, 0.3); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track {
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- width: 100%;
- height: 6px;
- cursor: pointer;
- border-radius: 2px;
- border: none;
- background-color: rgba(68, 170, 119, 0.3); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track {
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
- width: 100%;
- cursor: pointer;
- background: transparent;
- border-color: transparent;
- color: transparent;
- height: 6px;
- border-radius: 2px;
- border: none; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
- background-color: rgba(68, 170, 119, 0.3); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
- background-color: rgba(68, 170, 119, 0.15); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
- background-color: rgba(68, 170, 119, 0.5); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
- background-color: rgba(68, 170, 119, 0.5); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
- background-color: rgba(68, 170, 119, 0.45); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
- background-color: rgba(68, 170, 119, 0.25); }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
- float: right; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
- height: 150px;
- overflow: hidden; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
- position: relative;
- padding: 5px;
- width: 100px;
- height: 100px;
- float: left;
- margin-right: 16px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
- position: absolute;
- bottom: -30px;
- width: 100%;
- font-size: 14px;
- color: #bbb;
- display: block;
- text-align: center; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
- position: absolute;
- display: block;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- padding: 3px;
- background-color: #fff;
- border: 1px solid rgba(0, 0, 0, 0.15);
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle {
- margin-right: 0; }
- .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle img {
- border-radius: 100%; }
- .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
- position: relative;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 35px;
- height: 170px;
- background-color: rgba(0, 0, 0, 0.03);
- text-align: center;
- border: 1px dashed #ddd; }
- .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
- display: block;
- padding: 15px;
- font-size: 16px;
- color: #999;
- line-height: 30px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
- margin-top: 12px;
- background-color: rgba(0, 0, 0, 0.08);
- border-radius: 3px; }
- .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
- position: relative;
- display: block;
- height: 5px;
- border-radius: 3px;
- background-color: #4a7;
- -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
- box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
- -webkit-transition: width 0.15s linear;
- transition: width 0.15s linear;
- background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
- background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
- background-size: 40px 40px;
- -webkit-animation: vicp_progress 0.5s linear infinite;
- animation: vicp_progress 0.5s linear infinite; }
- .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
- content: '';
- position: absolute;
- display: block;
- top: -3px;
- right: -3px;
- width: 9px;
- height: 9px;
- border: 1px solid rgba(245, 246, 247, 0.7);
- -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
- box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
- border-radius: 100%;
- background-color: #4a7; }
- .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
- .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
- height: 100px;
- line-height: 100px; }
- .vue-image-crop-upload .vicp-wrap .vicp-operate {
- position: absolute;
- right: 20px;
- bottom: 20px; }
- .vue-image-crop-upload .vicp-wrap .vicp-operate a {
- position: relative;
- float: left;
- display: block;
- margin-left: 10px;
- width: 100px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- cursor: pointer;
- font-size: 14px;
- color: #4a7;
- border-radius: 2px;
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none; }
- .vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
- background-color: rgba(0, 0, 0, 0.03); }
- .vue-image-crop-upload .vicp-wrap .vicp-error,
- .vue-image-crop-upload .vicp-wrap .vicp-success {
- display: block;
- font-size: 14px;
- line-height: 24px;
- height: 24px;
- color: #d10;
- text-align: center;
- vertical-align: top; }
- .vue-image-crop-upload .vicp-wrap .vicp-success {
- color: #4a7; }
- .vue-image-crop-upload .vicp-wrap .vicp-icon3 {
- position: relative;
- display: inline-block;
- width: 20px;
- height: 20px;
- top: 4px; }
- .vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
- position: absolute;
- top: 3px;
- left: 6px;
- width: 6px;
- height: 10px;
- border-width: 0 2px 2px 0;
- border-color: #4a7;
- border-style: solid;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- content: ''; }
- .vue-image-crop-upload .vicp-wrap .vicp-icon2 {
- position: relative;
- display: inline-block;
- width: 20px;
- height: 20px;
- top: 4px; }
- .vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
- content: '';
- position: absolute;
- top: 9px;
- left: 4px;
- width: 13px;
- height: 2px;
- background-color: #d10;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg); }
- .vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg); }
-.e-ripple {
- position: absolute;
- border-radius: 100%;
- background-color: rgba(0, 0, 0, 0.15);
- background-clip: padding-box;
- pointer-events: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-transform: scale(0);
- -ms-transform: scale(0);
- transform: scale(0);
- opacity: 1; }
- .e-ripple.z-active {
- opacity: 0;
- -webkit-transform: scale(2);
- -ms-transform: scale(2);
- transform: scale(2);
- -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
- transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
- transition: opacity 1.2s ease-out, transform 0.6s ease-out;
- transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; }
-</style>
diff --git a/src/components/element-ui/ImageCropper/utils/data2blob.js b/src/components/element-ui/ImageCropper/utils/data2blob.js
deleted file mode 100755
index 9c47f8af..00000000
--- a/src/components/element-ui/ImageCropper/utils/data2blob.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * database64æ–‡ä»¶æ ¼å¼è½¬æ¢ä¸º2进制
- *
- * @param {[String]} data dataURL çš„æ ¼å¼ä¸º “data:image/png;base64,****â€,逗å·ä¹‹å‰éƒ½æ˜¯ä¸€äº›è¯´æ˜Žæ€§çš„æ–‡å—，我们åªéœ€è¦é€—å·ä¹‹åŽçš„就行了
- * @param {[String]} mime [description]
- * @return {[blob]} [description]
- */
-export default function(data, mime) {
- data = data.split(',')[1]
- data = window.atob(data)
- var ia = new Uint8Array(data.length)
- for (var i = 0; i < data.length; i++) {
- ia[i] = data.charCodeAt(i)
- }
- // canvas.toDataURL è¿”å›žçš„é»˜è®¤æ ¼å¼å°±æ˜¯ image/png
- return new Blob([ia], {
- type: mime
- })
-}
diff --git a/src/components/element-ui/ImageCropper/utils/effectRipple.js b/src/components/element-ui/ImageCropper/utils/effectRipple.js
deleted file mode 100755
index 46a01640..00000000
--- a/src/components/element-ui/ImageCropper/utils/effectRipple.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 点击波纹效果
- *
- * @param {[event]} e [description]
- * @param {[Object]} arg_opts [description]
- * @return {[bollean]} [description]
- */
-export default function(e, arg_opts) {
- var opts = Object.assign({
- ele: e.target, // 波纹作用元ç´
- type: 'hit', // hit点击ä½ç½®æ‰©æ•£centerä¸å¿ƒç‚¹æ‰©å±•
- bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
- }, arg_opts)
- var target = opts.ele
- if (target) {
- var rect = target.getBoundingClientRect()
- var ripple = target.querySelector('.e-ripple')
- if (!ripple) {
- ripple = document.createElement('span')
- ripple.className = 'e-ripple'
- ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
- target.appendChild(ripple)
- } else {
- ripple.className = 'e-ripple'
- }
- switch (opts.type) {
- case 'center':
- ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
- ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
- break
- default:
- ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
- ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
- }
- ripple.style.backgroundColor = opts.bgc
- ripple.className = 'e-ripple z-active'
- return false
- }
-}
diff --git a/src/components/element-ui/ImageCropper/utils/language.js b/src/components/element-ui/ImageCropper/utils/language.js
deleted file mode 100755
index 727872d9..00000000
--- a/src/components/element-ui/ImageCropper/utils/language.js
+++ /dev/null
@@ -1,232 +0,0 @@
-export default {
- zh: {
- hint: '点击，或拖动图片至æ¤å¤„',
- loading: 'æ£åœ¨ä¸Šä¼ ……',
- noSupported: 'æµè§ˆå™¨ä¸æ”¯æŒè¯¥åŠŸèƒ½ï¼Œè¯·ä½¿ç”¨IE10以上或其他现在æµè§ˆå™¨ï¼',
- success: 'ä¸Šä¼ æˆåŠŸ',
- fail: 'å›¾ç‰‡ä¸Šä¼ å¤±è´¥',
- preview: '头åƒé¢„览',
- btn: {
- off: 'å–消',
- close: 'å…³é—',
- back: '上一æ¥',
- save: 'ä¿å˜'
- },
- error: {
- onlyImg: 'ä»…é™å›¾ç‰‡æ ¼å¼',
- outOfSize: 'å•æ–‡ä»¶å¤§å°ä¸èƒ½è¶…过 ',
- lowestPx: '图片最低åƒç´ 为（宽*高）：'
- }
- },
- 'zh-tw': {
- hint: '點擊，或拖動圖片至æ¤è™•',
- loading: 'æ£åœ¨ä¸Šå‚³â€¦â€¦',
- noSupported: 'ç€è¦½å™¨ä¸æ”¯æŒè©²åŠŸèƒ½ï¼Œè«‹ä½¿ç”¨IE10以上或其他ç¾ä»£ç€è¦½å™¨ï¼',
- success: '上傳æˆåŠŸ',
- fail: '圖片上傳失敗',
- preview: 'é åƒé 覽',
- btn: {
- off: 'å–消',
- close: '關閉',
- back: '上一æ¥',
- save: 'ä¿å˜'
- },
- error: {
- onlyImg: '僅é™åœ–ç‰‡æ ¼å¼',
- outOfSize: '單文件大å°ä¸èƒ½è¶…éŽ ',
- lowestPx: '圖片最低åƒç´ 為（寬*高）：'
- }
- },
- en: {
- hint: 'Click or drag the file here to upload',
- loading: 'Uploading…',
- noSupported: 'Browser is not supported, please use IE10+ or other browsers',
- success: 'Upload success',
- fail: 'Upload failed',
- preview: 'Preview',
- btn: {
- off: 'Cancel',
- close: 'Close',
- back: 'Back',
- save: 'Save'
- },
- error: {
- onlyImg: 'Image only',
- outOfSize: 'Image exceeds size limit: ',
- lowestPx: 'Image\'s size is too low. Expected at least: '
- }
- },
- ro: {
- hint: 'Atinge sau trage fișierul aici',
- loading: 'Se încarcă',
- noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
- success: 'S-a încărcat cu succes',
- fail: 'A apărut o problemă la încărcare',
- preview: 'Previzualizează',
-
- btn: {
- off: 'Anulează',
- close: 'ÃŽnchide',
- back: 'ÃŽnapoi',
- save: 'Salvează'
- },
-
- error: {
- onlyImg: 'Doar imagini',
- outOfSize: 'Imaginea depășește limita de: ',
- loewstPx: 'Imaginea este prea mică; Minim: '
- }
- },
- ru: {
- hint: 'Ðажмите, или перетащите файл в Ñто окно',
- loading: 'Загружаю……',
- noSupported: 'Ваш браузер не поддерживаетÑÑ, пожалуйÑта, иÑпользуйте IE10 + или другие браузеры',
- success: 'Загрузка выполнена уÑпешно',
- fail: 'Ошибка загрузки',
- preview: 'ПредпроÑмотр',
- btn: {
- off: 'Отменить',
- close: 'Закрыть',
- back: 'Ðазад',
- save: 'Сохранить'
- },
- error: {
- onlyImg: 'Только изображениÑ',
- outOfSize: 'Изображение превышает предельный размер: ',
- lowestPx: 'Минимальный размер изображениÑ: '
- }
- },
- 'pt-br': {
- hint: 'Clique ou arraste o arquivo aqui para carregar',
- loading: 'Carregando…',
- noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
- success: 'Sucesso ao carregar imagem',
- fail: 'Falha ao carregar imagem',
- preview: 'Pré-visualizar',
- btn: {
- off: 'Cancelar',
- close: 'Fechar',
- back: 'Voltar',
- save: 'Salvar'
- },
- error: {
- onlyImg: 'Apenas imagens',
- outOfSize: 'A imagem excede o limite de tamanho: ',
- lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mÃnimo: '
- }
- },
- fr: {
- hint: 'Cliquez ou glissez le fichier ici.',
- loading: 'Téléchargement…',
- noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
- success: 'Téléchargement réussit',
- fail: 'Téléchargement echoué',
- preview: 'Aperçu',
- btn: {
- off: 'Annuler',
- close: 'Fermer',
- back: 'Retour',
- save: 'Enregistrer'
- },
- error: {
- onlyImg: 'Image uniquement',
- outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
- lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
- }
- },
- nl: {
- hint: 'Klik hier of sleep een afbeelding in dit vlak',
- loading: 'Uploaden…',
- noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
- success: 'Upload succesvol',
- fail: 'Upload mislukt',
- preview: 'Voorbeeld',
- btn: {
- off: 'Annuleren',
- close: 'Sluiten',
- back: 'Terug',
- save: 'Opslaan'
- },
- error: {
- onlyImg: 'Alleen afbeeldingen',
- outOfSize: 'De afbeelding is groter dan: ',
- lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
- }
- },
- tr: {
- hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
- loading: 'Yükleniyor…',
- noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
- success: 'Yükleme başarılı',
- fail: 'Yüklemede hata oluştu',
- preview: 'Önizle',
- btn: {
- off: 'Ä°ptal',
- close: 'Kapat',
- back: 'Geri',
- save: 'Kaydet'
- },
- error: {
- onlyImg: 'Sadece resim',
- outOfSize: 'Resim yükleme limitini aşıyor: ',
- lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
- }
- },
- 'es-MX': {
- hint: 'Selecciona o arrastra una imagen',
- loading: 'Subiendo...',
- noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
- success: 'Subido exitosamente',
- fail: 'Sucedió un error',
- preview: 'Vista previa',
- btn: {
- off: 'Cancelar',
- close: 'Cerrar',
- back: 'Atras',
- save: 'Guardar'
- },
- error: {
- onlyImg: 'Unicamente imagenes',
- outOfSize: 'La imagen excede el tamaño maximo:',
- lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
- }
- },
- de: {
- hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
- loading: 'Hochladen…',
- noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
- success: 'Upload erfolgreich',
- fail: 'Upload fehlgeschlagen',
- preview: 'Vorschau',
- btn: {
- off: 'Abbrechen',
- close: 'Schließen',
- back: 'Zurück',
- save: 'Speichern'
- },
- error: {
- onlyImg: 'Nur Bilder',
- outOfSize: 'Das Bild ist zu groß: ',
- lowestPx: 'Das Bild ist zu klein. Mindestens: '
- }
- },
- ja: {
- hint: 'クリック・ドラッグã—ã¦ãƒ•ã‚¡ã‚¤ãƒ«ã‚’アップãƒãƒ¼ãƒ‰',
- loading: 'アップãƒãƒ¼ãƒ‰ä¸...',
- noSupported: 'ã“ã®ãƒ–ラウザã¯å¯¾å¿œã•ã‚Œã¦ã„ã¾ã›ã‚“。IE10+ã‹ãã®ä»–ã®ä¸»è¦ãƒ–ラウザをãŠä½¿ã„ãã ã•ã„。',
- success: 'アップãƒãƒ¼ãƒ‰æˆåŠŸ',
- fail: 'アップãƒãƒ¼ãƒ‰å¤±æ•—',
- preview: 'プレビュー',
- btn: {
- off: 'ã‚ャンセル',
- close: 'é–‰ã˜ã‚‹',
- back: '戻る',
- save: 'ä¿å˜'
- },
- error: {
- onlyImg: 'ç”»åƒã®ã¿',
- outOfSize: 'ç”»åƒã‚µã‚¤ã‚ºãŒä¸Šé™ã‚’超ãˆã¦ã„ã¾ã™ã€‚上é™: ',
- lowestPx: 'ç”»åƒãŒå°ã•ã™ãŽã¾ã™ã€‚最å°ã‚µã‚¤ã‚º: '
- }
- }
-}
diff --git a/src/components/element-ui/ImageCropper/utils/mimes.js b/src/components/element-ui/ImageCropper/utils/mimes.js
deleted file mode 100755
index e20c085c..00000000
--- a/src/components/element-ui/ImageCropper/utils/mimes.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
- 'jpg': 'image/jpeg',
- 'png': 'image/png',
- 'gif': 'image/gif',
- 'svg': 'image/svg+xml',
- 'psd': 'image/photoshop'
-}
diff --git a/src/components/element-ui/JsonEditor/index.vue b/src/components/element-ui/JsonEditor/index.vue
deleted file mode 100644
index b44a4a2c..00000000
--- a/src/components/element-ui/JsonEditor/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
- <div class="json-editor">
- <textarea ref="textarea"/>
- </div>
-</template>
-
-<script>
-import CodeMirror from 'codemirror'
-import 'codemirror/addon/lint/lint.css'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/rubyblue.css'
-require('script-loader!jsonlint')
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/lint/json-lint'
-
-export default {
- name: 'JsonEditor',
- /* eslint-disable vue/require-prop-types */
- props: ['value'],
- data: function() {
- return {
- jsonEditor: false
- }
- },
- watch: {
- value(value) {
- const editor_value = this.jsonEditor.getValue()
- if (value !== editor_value) {
- this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
- }
- }
- },
- mounted() {
- this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
- lineNumbers: true,
- mode: 'application/json',
- gutters: ['CodeMirror-lint-markers'],
- theme: 'rubyblue',
- lint: true
- })
-
- this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
- this.jsonEditor.on('change', cm => {
- this.$emit('changed', cm.getValue())
- this.$emit('input', cm.getValue())
- })
- },
- methods: {
- getValue() {
- return this.jsonEditor.getValue()
- }
- }
-}
-</script>
-
-<style scoped>
-.json-editor{
- height: 100%;
- position: relative;
-}
-.json-editor >>> .CodeMirror {
- height: auto;
- min-height: 300px;
-}
-.json-editor >>> .CodeMirror-scroll{
- min-height: 300px;
-}
-.json-editor >>> .cm-s-rubyblue span.cm-string {
- color: #F08047;
-}
-</style>
diff --git a/src/components/element-ui/Kanban/index.vue b/src/components/element-ui/Kanban/index.vue
deleted file mode 100644
index dadeb648..00000000
--- a/src/components/element-ui/Kanban/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
- <div class="board-column">
- <div class="board-column-header">
- {{ headerText }}
- </div>
- <draggable
- :list="list"
- :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>
-</template>
-<script>
-import draggable from 'vuedraggable'
-
-export default {
- name: 'DragKanbanDemo',
- components: {
- draggable
- },
- props: {
- headerText: {
- type: String,
- default: 'Header'
- },
- options: {
- type: Object,
- default() {
- return {}
- }
- },
- list: {
- type: Array,
- default() {
- return []
- }
- }
- }
-}
-</script>
-<style lang="scss" scoped>
-.board-column {
- min-width: 300px;
- min-height: 100px;
- height: auto;
- overflow: hidden;
- background: #f0f0f0;
- border-radius: 3px;
-
- .board-column-header {
- height: 50px;
- line-height: 50px;
- overflow: hidden;
- padding: 0 20px;
- text-align: center;
- background: #333;
- color: #fff;
- border-radius: 3px 3px 0 0;
- }
-
- .board-column-content {
- height: auto;
- overflow: hidden;
- border: 10px solid transparent;
- min-height: 60px;
- display: flex;
- justify-content: flex-start;
- flex-direction: column;
- align-items: center;
-
- .board-item {
- cursor: pointer;
- width: 100%;
- height: 64px;
- margin: 5px 0;
- background-color: #fff;
- text-align: left;
- line-height: 54px;
- padding: 5px 10px;
- box-sizing: border-box;
- box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
- }
- }
-}
-</style>
-
diff --git a/src/components/element-ui/MDinput/index.vue b/src/components/element-ui/MDinput/index.vue
deleted file mode 100644
index 3db8cfc3..00000000
--- a/src/components/element-ui/MDinput/index.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<template>
- <div :class="computedClasses" class="material-input__component">
- <div :class="{iconClass:icon}">
- <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/>
- </label>
- </div>
- </div>
-</template>
-
-<script>
-// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
-
-export default {
- name: 'MdInput',
- props: {
- /* eslint-disable */
- icon: String,
- name: String,
- type: {
- type: String,
- default: 'text'
- },
- value: [String, Number],
- placeholder: String,
- readonly: Boolean,
- disabled: Boolean,
- min: String,
- max: String,
- step: String,
- minlength: Number,
- maxlength: Number,
- required: {
- type: Boolean,
- default: true
- },
- autoComplete: {
- type: String,
- default: 'off'
- },
- validateEvent: {
- type: Boolean,
- default: true
- }
- },
- data: function() {
- return {
- currentValue: this.value,
- focus: false,
- fillPlaceHolder: null
- }
- },
- computed: {
- computedClasses() {
- return {
- 'material--active': this.focus,
- 'material--disabled': this.disabled,
- 'material--raised': Boolean(this.focus || this.currentValue) // has value
- }
- }
- },
- watch: {
- value(newValue) {
- this.currentValue = newValue
- }
- },
- methods: {
- handleModelInput(event) {
- const value = event.target.value
- this.$emit('input', value)
- if (this.$parent.$options.componentName === 'ElFormItem') {
- if (this.validateEvent) {
- this.$parent.$emit('el.form.change', [value])
- }
- }
- this.$emit('change', value)
- },
- handleMdFocus(event) {
- this.focus = true
- this.$emit('focus', event)
- if (this.placeholder && this.placeholder !== '') {
- this.fillPlaceHolder = this.placeholder
- }
- },
- handleMdBlur(event) {
- this.focus = false
- this.$emit('blur', event)
- this.fillPlaceHolder = null
- if (this.$parent.$options.componentName === 'ElFormItem') {
- if (this.validateEvent) {
- this.$parent.$emit('el.form.blur', [this.currentValue])
- }
- }
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
- // Fonts:
- $font-size-base: 16px;
- $font-size-small: 18px;
- $font-size-smallest: 12px;
- $font-weight-normal: normal;
- $font-weight-bold: bold;
- $apixel: 1px;
- // Utils
- $spacer: 12px;
- $transition: 0.2s ease all;
- $index: 0px;
- $index-has-icon: 30px;
- // Theme:
- $color-white: white;
- $color-grey: #9E9E9E;
- $color-grey-light: #E0E0E0;
- $color-blue: #2196F3;
- $color-red: #F44336;
- $color-black: black;
- // Base clases:
- %base-bar-pseudo {
- content: '';
- height: 1px;
- width: 0;
- bottom: 0;
- position: absolute;
- transition: $transition;
- }
-
- // Mixins:
- @mixin slided-top() {
- top: - ($font-size-base + $spacer);
- left: 0;
- font-size: $font-size-base;
- font-weight: $font-weight-bold;
- }
-
- // Component:
- .material-input__component {
- margin-top: 36px;
- position: relative;
- * {
- box-sizing: border-box;
- }
- .iconClass {
- .material-input__icon {
- position: absolute;
- left: 0;
- line-height: $font-size-base;
- color: $color-blue;
- top: $spacer;
- width: $index-has-icon;
- height: $font-size-base;
- font-size: $font-size-base;
- font-weight: $font-weight-normal;
- pointer-events: none;
- }
- .material-label {
- left: $index-has-icon;
- }
- .material-input {
- text-indent: $index-has-icon;
- }
- }
- .material-input {
- font-size: $font-size-base;
- padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
- display: block;
- width: 100%;
- border: none;
- line-height: 1;
- border-radius: 0;
- &:focus {
- outline: none;
- border: none;
- border-bottom: 1px solid transparent; // fixes the height issue
- }
- }
- .material-label {
- font-weight: $font-weight-normal;
- position: absolute;
- pointer-events: none;
- left: $index;
- top: 0;
- transition: $transition;
- font-size: $font-size-small;
- }
- .material-input-bar {
- position: relative;
- display: block;
- width: 100%;
- &:before {
- @extend %base-bar-pseudo;
- left: 50%;
- }
- &:after {
- @extend %base-bar-pseudo;
- right: 50%;
- }
- }
- // Disabled state:
- &.material--disabled {
- .material-input {
- border-bottom-style: dashed;
- }
- }
- // Raised state:
- &.material--raised {
- .material-label {
- @include slided-top();
- }
- }
- // Active state:
- &.material--active {
- .material-input-bar {
- &:before,
- &:after {
- width: 50%;
- }
- }
- }
- }
-
- .material-input__component {
- background: $color-white;
- .material-input {
- background: none;
- color: $color-black;
- text-indent: $index;
- border-bottom: 1px solid $color-grey-light;
- }
- .material-label {
- color: $color-grey;
- }
- .material-input-bar {
- &:before,
- &:after {
- background: $color-blue;
- }
- }
- // Active state:
- &.material--active {
- .material-label {
- color: $color-blue;
- }
- }
- // Errors:
- &.material--has-errors {
- &.material--active .material-label {
- color: $color-red;
- }
- .material-input-bar {
- &:before,
- &:after {
- background: transparent;
- }
- }
- }
- }
-</style>
diff --git a/src/components/element-ui/Pagination/index.vue b/src/components/element-ui/Pagination/index.vue
deleted file mode 100644
index 8d104e84..00000000
--- a/src/components/element-ui/Pagination/index.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
- <div :class="{'hidden':hidden}" class="pagination-container">
- <el-pagination
- :background="background"
- :current-page.sync="currentPage"
- :page-size.sync="pageSize"
- :layout="layout"
- :page-sizes="pageSizes"
- :total="total"
- v-bind="$attrs"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"/>
- </div>
-</template>
-
-<script>
-import { scrollTo } from '@/utils/scrollTo'
-
-export default {
- name: 'Pagination',
- props: {
- total: {
- required: true,
- type: Number
- },
- page: {
- type: Number,
- default: 1
- },
- limit: {
- type: Number,
- default: 20
- },
- pageSizes: {
- type: Array,
- default() {
- return [10, 20, 30, 50]
- }
- },
- layout: {
- type: String,
- default: 'total, sizes, prev, pager, next, jumper'
- },
- background: {
- type: Boolean,
- default: true
- },
- autoScroll: {
- type: Boolean,
- default: true
- },
- hidden: {
- type: Boolean,
- default: false
- }
- },
- computed: {
- currentPage: {
- get() {
- return this.page
- },
- set(val) {
- this.$emit('update:page', val)
- }
- },
- pageSize: {
- get() {
- return this.limit
- },
- set(val) {
- this.$emit('update:limit', val)
- }
- }
- },
- methods: {
- handleSizeChange(val) {
- this.$emit('pagination', { page: this.currentPage, limit: val })
- if (this.autoScroll) {
- scrollTo(0, 800)
- }
- },
- handleCurrentChange(val) {
- this.$emit('pagination', { page: val, limit: this.pageSize })
- if (this.autoScroll) {
- scrollTo(0, 800)
- }
- }
- }
-}
-</script>
-
-<style scoped>
-.pagination-container {
- background: #fff;
- padding: 32px 16px;
-}
-.pagination-container.hidden {
- display: none;
-}
-</style>
diff --git a/src/components/element-ui/PanThumb/index.vue b/src/components/element-ui/PanThumb/index.vue
deleted file mode 100644
index ec549f43..00000000
--- a/src/components/element-ui/PanThumb/index.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
- <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
- <div class="pan-info">
- <div class="pan-info-roles-container">
- <slot/>
- </div>
- </div>
- <img :src="image" class="pan-thumb">
- </div>
-</template>
-
-<script>
-export default {
- name: 'PanThumb',
- props: {
- image: {
- type: String,
- required: true
- },
- zIndex: {
- type: Number,
- default: 1
- },
- width: {
- type: String,
- default: '150px'
- },
- height: {
- type: String,
- default: '150px'
- }
- }
-}
-</script>
-
-<style scoped>
-.pan-item {
- width: 200px;
- height: 200px;
- border-radius: 50%;
- display: inline-block;
- position: relative;
- cursor: default;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.pan-info-roles-container {
- padding: 20px;
- text-align: center;
-}
-
-.pan-thumb {
- width: 100%;
- height: 100%;
- background-size: 100%;
- border-radius: 50%;
- overflow: hidden;
- position: absolute;
- transform-origin: 95% 40%;
- transition: all 0.3s ease-in-out;
-}
-
-.pan-thumb:after {
- content: '';
- width: 8px;
- height: 8px;
- position: absolute;
- border-radius: 50%;
- top: 40%;
- left: 95%;
- margin: -4px 0 0 -4px;
- background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
- box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-}
-
-.pan-info {
- position: absolute;
- width: inherit;
- height: inherit;
- border-radius: 50%;
- overflow: hidden;
- box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
-}
-
-.pan-info h3 {
- color: #fff;
- text-transform: uppercase;
- position: relative;
- letter-spacing: 2px;
- font-size: 18px;
- margin: 0 60px;
- padding: 22px 0 0 0;
- height: 85px;
- font-family: 'Open Sans', Arial, sans-serif;
- text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.pan-info p {
- color: #fff;
- padding: 10px 5px;
- font-style: italic;
- margin: 0 30px;
- font-size: 12px;
- border-top: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.pan-info p a {
- display: block;
- color: #333;
- width: 80px;
- height: 80px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 50%;
- color: #fff;
- font-style: normal;
- font-weight: 700;
- text-transform: uppercase;
- font-size: 9px;
- letter-spacing: 1px;
- padding-top: 24px;
- margin: 7px auto 0;
- font-family: 'Open Sans', Arial, sans-serif;
- opacity: 0;
- transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
- transform: translateX(60px) rotate(90deg);
-}
-
-.pan-info p a:hover {
- background: rgba(255, 255, 255, 0.5);
-}
-
-.pan-item:hover .pan-thumb {
- transform: rotate(-110deg);
-}
-
-.pan-item:hover .pan-info p a {
- opacity: 1;
- transform: translateX(0px) rotate(0deg);
-}
-</style>
diff --git a/src/components/element-ui/Share/dropdownMenu.vue b/src/components/element-ui/Share/dropdownMenu.vue
deleted file mode 100644
index 8b78e7bd..00000000
--- a/src/components/element-ui/Share/dropdownMenu.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
- <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 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>
-</template>
-
-<script>
-export default {
- props: {
- items: {
- type: Array,
- default: function() {
- return []
- }
- },
- title: {
- type: String,
- default: 'vue'
- }
- },
- data: function() {
- return {
- isActive: false
- }
- },
- methods: {
- clickTitle() {
- this.isActive = !this.isActive
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" >
-$n: 8; //å’Œitems.length 相åŒ
-$t: .1s;
-.share-dropdown-menu {
- width: 250px;
- position: relative;
- z-index: 1;
- &-title {
- width: 100%;
- display: block;
- cursor: pointer;
- background: black;
- color: white;
- height: 60px;
- line-height: 60px;
- font-size: 20px;
- text-align: center;
- z-index: 2;
- transform: translate3d(0,0,0);
- }
- &-wrapper {
- position: relative;
- }
- &-item {
- text-align: center;
- position: absolute;
- width: 100%;
- background: #e0e0e0;
- line-height: 60px;
- height: 60px;
- cursor: pointer;
- font-size: 20px;
- opacity: 1;
- transition: transform 0.28s ease;
- &:hover {
- background: black;
- color: white;
- }
- @for $i from 1 through $n {
- &:nth-of-type(#{$i}) {
- z-index: -1;
- transition-delay: $i*$t;
- transform: translate3d(0, -60px, 0);
- }
- }
- }
- &.active {
- .share-dropdown-menu-wrapper {
- z-index: 1;
- }
- .share-dropdown-menu-item {
- @for $i from 1 through $n {
- &:nth-of-type(#{$i}) {
- transition-delay: ($n - $i)*$t;
- transform: translate3d(0, ($i - 1)*60px, 0);
- }
- }
- }
- }
-}
-</style>
diff --git a/src/components/element-ui/SizeSelect/index.vue b/src/components/element-ui/SizeSelect/index.vue
deleted file mode 100644
index 3527a768..00000000
--- a/src/components/element-ui/SizeSelect/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
- <el-dropdown trigger="click" @command="handleSetSize">
- <div>
- <svg-icon class-name="size-icon" icon-class="size" />
- </div>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">{{
- item.label }}</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
-</template>
-
-<script>
-export default {
- data: function() {
- return {
- sizeOptions: [
- { label: 'Default', value: 'default' },
- { label: 'Medium', value: 'medium' },
- { label: 'Small', value: 'small' },
- { label: 'Mini', value: 'mini' }
- ]
- }
- },
- computed: {
- size() {
- return this.$store.getters.size
- }
- },
- methods: {
- handleSetSize(size) {
- this.$ELEMENT.size = size
- this.$store.dispatch('setSize', size)
- this.refreshView()
- this.$message({
- message: 'Switch Size Success',
- type: 'success'
- })
- },
- refreshView() {
- // In order to make the cached page re-rendered
- this.$store.dispatch('delAllCachedViews', this.$route)
-
- const { fullPath } = this.$route
-
- this.$nextTick(() => {
- this.$router.replace({
- path: '/redirect' + fullPath
- })
- })
- }
- }
-
-}
-</script>
diff --git a/src/components/element-ui/Sticky/index.vue b/src/components/element-ui/Sticky/index.vue
deleted file mode 100644
index 3e4ce8e4..00000000
--- a/src/components/element-ui/Sticky/index.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
- <div :style="{height:height+'px',zIndex:zIndex}">
- <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
- <slot>
- <div>sticky</div>
- </slot>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: 'Sticky',
- props: {
- stickyTop: {
- type: Number,
- default: 0
- },
- zIndex: {
- type: Number,
- default: 1
- },
- className: {
- type: String,
- default: ''
- }
- },
- data: function() {
- return {
- active: false,
- position: '',
- width: undefined,
- height: undefined,
- isSticky: false
- }
- },
- mounted() {
- this.height = this.$el.getBoundingClientRect().height
- window.addEventListener('scroll', this.handleScroll)
- window.addEventListener('resize', this.handleReize)
- },
- activated() {
- this.handleScroll()
- },
- destroyed() {
- window.removeEventListener('scroll', this.handleScroll)
- window.removeEventListener('resize', this.handleReize)
- },
- methods: {
- sticky() {
- if (this.active) {
- return
- }
- this.position = 'fixed'
- this.active = true
- this.width = this.width + 'px'
- this.isSticky = true
- },
- handleReset() {
- if (!this.active) {
- return
- }
- this.reset()
- },
- reset() {
- this.position = ''
- this.width = 'auto'
- this.active = false
- this.isSticky = false
- },
- handleScroll() {
- const width = this.$el.getBoundingClientRect().width
- this.width = width || 'auto'
- const offsetTop = this.$el.getBoundingClientRect().top
- if (offsetTop < this.stickyTop) {
- this.sticky()
- return
- }
- this.handleReset()
- },
- handleReize() {
- if (this.isSticky) {
- this.width = this.$el.getBoundingClientRect().width + 'px'
- }
- }
- }
-}
-</script>
diff --git a/src/components/element-ui/TextHoverEffect/Mallki.vue b/src/components/element-ui/TextHoverEffect/Mallki.vue
deleted file mode 100644
index 4ea29fc2..00000000
--- a/src/components/element-ui/TextHoverEffect/Mallki.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
- <a :class="className" class="link--mallki" href="#">
- {{ text }}
- <span :data-letters="text"/>
- <span :data-letters="text"/>
- </a>
-</template>
-
-<script>
-export default {
- props: {
- className: {
- type: String,
- default: ''
- },
- text: {
- type: String,
- default: 'vue-element-admin'
- }
- }
-}
-</script>
-
-<style>
-/* Mallki */
-
-.link--mallki {
- font-weight: 800;
- color: #4dd9d5;
- font-family: 'Dosis', sans-serif;
- -webkit-transition: color 0.5s 0.25s;
- transition: color 0.5s 0.25s;
- overflow: hidden;
- position: relative;
- display: inline-block;
- line-height: 1;
- outline: none;
- text-decoration: none;
-}
-
-.link--mallki:hover {
- -webkit-transition: none;
- transition: none;
- color: transparent;
-}
-
-.link--mallki::before {
- content: '';
- width: 100%;
- height: 6px;
- margin: -3px 0 0 0;
- background: #3888fa;
- position: absolute;
- left: 0;
- top: 50%;
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- -webkit-transition: -webkit-transform 0.4s;
- transition: transform 0.4s;
- -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
- transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-}
-
-.link--mallki:hover::before {
- -webkit-transform: translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0);
-}
-
-.link--mallki span {
- position: absolute;
- height: 50%;
- width: 100%;
- left: 0;
- top: 0;
- overflow: hidden;
-}
-
-.link--mallki span::before {
- content: attr(data-letters);
- color: red;
- position: absolute;
- left: 0;
- width: 100%;
- color: #3888fa;
- -webkit-transition: -webkit-transform 0.5s;
- transition: transform 0.5s;
-}
-
-.link--mallki span:nth-child(2) {
- top: 50%;
-}
-
-.link--mallki span:first-child::before {
- top: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
-}
-
-.link--mallki span:nth-child(2)::before {
- bottom: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
-}
-
-.link--mallki:hover span::before {
- -webkit-transition-delay: 0.3s;
- transition-delay: 0.3s;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
- transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-}
-</style>
diff --git a/src/components/element-ui/ThemePicker/index.vue b/src/components/element-ui/ThemePicker/index.vue
deleted file mode 100644
index ff6fbf21..00000000
--- a/src/components/element-ui/ThemePicker/index.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
- <el-color-picker
- v-model="theme"
- class="theme-picker"
- popper-class="theme-picker-dropdown"/>
-</template>
-
-<script>
-
-const version = require('element-ui/package.json').version // element-ui version from node_modules
-const ORIGINAL_THEME = '#409EFF' // default color
-
-export default {
- data: function() {
- return {
- chalk: '', // content of theme-chalk css
- theme: ORIGINAL_THEME
- }
- },
- watch: {
- theme(val) {
- const oldVal = this.theme
- if (typeof val !== 'string') return
- const themeCluster = this.getThemeCluster(val.replace('#', ''))
- const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
- console.log(themeCluster, originalCluster)
- const getHandler = (variable, id) => {
- return () => {
- const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
- const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
-
- let styleTag = document.getElementById(id)
- if (!styleTag) {
- styleTag = document.createElement('style')
- styleTag.setAttribute('id', id)
- document.head.appendChild(styleTag)
- }
- styleTag.innerText = newStyle
- }
- }
-
- const chalkHandler = getHandler('chalk', 'chalk-style')
-
- if (!this.chalk) {
- const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
- this.getCSSString(url, chalkHandler, 'chalk')
- } else {
- chalkHandler()
- }
-
- const styles = [].slice.call(document.querySelectorAll('style'))
- .filter(style => {
- const text = style.innerText
- return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
- })
- styles.forEach(style => {
- const { innerText } = style
- if (typeof innerText !== 'string') return
- style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
- })
- this.$message({
- message: 'æ¢è‚¤æˆåŠŸ',
- type: 'success'
- })
- }
- },
-
- methods: {
- updateStyle(style, oldCluster, newCluster) {
- let newStyle = style
- oldCluster.forEach((color, index) => {
- newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
- })
- return newStyle
- },
-
- getCSSString(url, callback, variable) {
- const xhr = new XMLHttpRequest()
- xhr.onreadystatechange = () => {
- if (xhr.readyState === 4 && xhr.status === 200) {
- this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
- callback()
- }
- }
- xhr.open('GET', url)
- xhr.send()
- },
-
- getThemeCluster(theme) {
- const tintColor = (color, tint) => {
- let red = parseInt(color.slice(0, 2), 16)
- let green = parseInt(color.slice(2, 4), 16)
- let blue = parseInt(color.slice(4, 6), 16)
-
- if (tint === 0) { // when primary color is in its rgb space
- return [red, green, blue].join(',')
- } else {
- red += Math.round(tint * (255 - red))
- green += Math.round(tint * (255 - green))
- blue += Math.round(tint * (255 - blue))
-
- red = red.toString(16)
- green = green.toString(16)
- blue = blue.toString(16)
-
- return `#${red}${green}${blue}`
- }
- }
-
- const shadeColor = (color, shade) => {
- let red = parseInt(color.slice(0, 2), 16)
- let green = parseInt(color.slice(2, 4), 16)
- let blue = parseInt(color.slice(4, 6), 16)
-
- red = Math.round((1 - shade) * red)
- green = Math.round((1 - shade) * green)
- blue = Math.round((1 - shade) * blue)
-
- red = red.toString(16)
- green = green.toString(16)
- blue = blue.toString(16)
-
- return `#${red}${green}${blue}`
- }
-
- const clusters = [theme]
- for (let i = 0; i <= 9; i++) {
- clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
- }
- clusters.push(shadeColor(theme, 0.1))
- return clusters
- }
- }
-}
-</script>
-
-<style>
-.theme-picker .el-color-picker__trigger {
- margin-top: 12px;
- height: 26px!important;
- width: 26px!important;
- padding: 2px;
-}
-
-.theme-picker-dropdown .el-color-dropdown__link-btn {
- display: none;
-}
-</style>
diff --git a/src/components/element-ui/TreeTable/eval.js b/src/components/element-ui/TreeTable/eval.js
deleted file mode 100644
index d9b89e1c..00000000
--- a/src/components/element-ui/TreeTable/eval.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
-* @Author: jianglei
-* @Date: 2017-10-12 12:06:49
-*/
-'use strict'
-import Vue from 'vue'
-export default function treeToArray(data, expandAll, parent = null, level = null) {
- let tmp = []
- Array.from(data).forEach(function(record) {
- if (record._expanded === undefined) {
- Vue.set(record, '_expanded', expandAll)
- }
- let _level = 1
- if (level !== undefined && level !== null) {
- _level = level + 1
- }
- Vue.set(record, '_level', _level)
- // 如果有父元ç´
- if (parent) {
- Vue.set(record, 'parent', parent)
- }
- tmp.push(record)
- if (record.children && record.children.length > 0) {
- const children = treeToArray(record.children, expandAll, record, _level)
- tmp = tmp.concat(children)
- }
- })
- return tmp
-}
diff --git a/src/components/element-ui/TreeTable/index.vue b/src/components/element-ui/TreeTable/index.vue
deleted file mode 100644
index a48765c8..00000000
--- a/src/components/element-ui/TreeTable/index.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
- <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" :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 }}
- </template>
- </el-table-column>
- <el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
- <template slot-scope="scope">
- <!-- 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] }}
- </template>
- </el-table-column>
- <slot/>
- </el-table>
-</template>
-
-<script>
-/**
- Auth: Lei.j1ang
- Created: 2018/1/19-13:59
-*/
-import treeToArray from './eval'
-export default {
- name: 'TreeTable',
- props: {
- /* eslint-disable */
- data: {
- type: [Array, Object],
- required: true
- },
- columns: {
- type: Array,
- default: () => []
- },
- evalFunc: Function,
- evalArgs: Array,
- expandAll: {
- type: Boolean,
- default: false
- }
- },
- computed: {
- // æ ¼å¼åŒ–æ•°æ®æº
- formatData: function() {
- let tmp
- if (!Array.isArray(this.data)) {
- tmp = [this.data]
- } else {
- tmp = this.data
- }
- const func = this.evalFunc || treeToArray
- const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
- return func.apply(null, args)
- }
- },
- methods: {
- showRow: function(row) {
- const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
- row.row._show = show
- return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
- },
- // 切æ¢ä¸‹çº§æ˜¯å¦å±•å¼€
- toggleExpanded: function(trIndex) {
- const record = this.formatData[trIndex]
- record._expanded = !record._expanded
- },
- // å›¾æ ‡æ˜¾ç¤º
- iconShow(index, record) {
- return (index === 0 && record.children && record.children.length > 0)
- }
- }
-}
-</script>
-<style rel="stylesheet/css">
- @keyframes treeTableShow {
- from {opacity: 0;}
- to {opacity: 1;}
- }
- @-webkit-keyframes treeTableShow {
- from {opacity: 0;}
- to {opacity: 1;}
- }
-</style>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
- $color-blue: #2196F3;
- $space-width: 18px;
- .ms-tree-space {
- position: relative;
- top: 1px;
- display: inline-block;
- font-style: normal;
- font-weight: 400;
- line-height: 1;
- width: $space-width;
- height: 14px;
- &::before {
- content: ""
- }
- }
- .processContainer{
- width: 100%;
- height: 100%;
- }
- table td {
- line-height: 26px;
- }
-
- .tree-ctrl{
- position: relative;
- cursor: pointer;
- color: $color-blue;
- margin-left: -$space-width;
- }
-</style>
diff --git a/src/components/element-ui/TreeTable/readme.md b/src/components/element-ui/TreeTable/readme.md
deleted file mode 100644
index 5b598e11..00000000
--- a/src/components/element-ui/TreeTable/readme.md
+++ /dev/null
@@ -1,89 +0,0 @@
-## 写在å‰é¢
-æ¤ç»„件仅æ供一个创建TreeTable的解决æ€è·¯
-
-## prop说明
-#### *data*
- **å¿…å¡«**
-
- 原始数æ®,è¦æ±‚是一个数组或者对象
- ```javascript
- [{
- key1: value1,
- key2: value2,
- children: [{
- key1: value1
- },
- {
- key1: value1
- }]
- },
- {
- key1: value1
- }]
- ```
- 或者
- ```javascript
- {
- key1: value1,
- key2: value2,
- children: [{
- key1: value1
- },
- {
- key1: value1
- }]
- }
- ```
-
-#### columns
- 列属性,è¦æ±‚是一个数组
-
- 1. text: 显示在表头的文å—
- 2. value: 对应data的key。treeTable将显示相应的value
- 3. width: æ¯åˆ—的宽度，为一个数å—(å¯é€‰)
-
- å¦‚æžœä½ æƒ³è¦æ¯ä¸ªå—æ®µéƒ½æœ‰è‡ªå®šä¹‰çš„æ ·å¼æˆ–者嵌套其他组件，columnså¯ä¸æ供，直接åƒåœ¨el-tableä¸€æ ·å†™å³å¯ï¼Œå¦‚果没有自定义内容，æä¾›columnså°†æ›´åŠ çš„ä¾¿æ·æ–¹ä¾¿
-
- å¦‚æžœä½ æœ‰å‡ ä¸ªå—段是需è¦è‡ªå®šä¹‰çš„ï¼Œå‡ ä¸ªä¸éœ€è¦ï¼Œé‚£ä¹ˆå¯ä»¥å°†ä¸éœ€è¦è‡ªå®šä¹‰çš„å—段放入columns，将需è¦è‡ªå®šä¹‰çš„内容放入到slotä¸ï¼Œè¯¦æƒ…è§åŽæ–‡
- ```javascript
- [{
- value:string,
- text:string,
- width:number
- },{
- value:string,
- text:string,
- width:number
- }]
- ```
-
-#### expandAll
- 是å¦é»˜è®¤å…¨éƒ¨å±•å¼€ï¼Œboolean值，默认为false
-
-#### evalFunc
- 解æžå‡½æ•°ï¼Œfunction，éžå¿…é¡»
-
- 如果ä¸æ供，将使用默认的[evalFunc](./eval.js)
-
- 如果æ供了evalFunc,那么会用æ供的evalFunc去解æždata，并返回treeTable渲染所需è¦çš„值。如何编写一个evalFunc，请å‚考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customEval.js)
-
-#### evalArgs
- 解æžå‡½æ•°çš„å‚数，是一个数组
-
- **请注æ„，自定义的解æžå‡½æ•°å‚数第一个为this.data，第二个å‚数为， this.expandAll,ä½ ä¸éœ€è¦åœ¨evalArgs填写。一定记ä½ï¼Œè¿™ä¸¤ä¸ªå‚数是强制性的，并且ä½ç½®ä¸å¯é¢ 倒** *this.data为需è¦è§£æžçš„æ•°æ®ï¼Œthis.expandAll为是å¦é»˜è®¤å±•å¼€*
-
- å¦‚ä½ çš„è§£æžå‡½æ•°éœ€è¦çš„å‚数为`(this.data, this.expandAll,1,2,3,4)`ï¼Œé‚£ä¹ˆä½ åªéœ€è¦å°†`[1,2,3,4]`赋值给`evalArgs`å°±å¯ä»¥äº†
-
- å¦‚æžœä½ çš„è§£æžå‡½æ•°å‚æ•°åªæœ‰`(this.data, this.expandAll)`,那么就å¯ä»¥ä¸ç”¨å¡«å†™evalArgs了
-
- 具体å¯å‚考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customEval.js)的函数å‚æ•°å’Œ[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue)çš„`evalArgs`属性值
-
- ## slot
- 这是一个自定义列的æ’槽。
-
- 默认情况下，treeTableåªæœ‰ä¸€è¡Œè¡Œå±•ç¤ºæ•°æ®çš„功能。但是一般情况下，我们会è¦ç»™è¡ŒåŠ 上一个æ“ä½œæŒ‰é’®æˆ–è€…æ ¹æ®å½“行数æ®å±•ç¤ºä¸åŒçš„æ ·å¼ï¼Œè¿™æ—¶æˆ‘们就需è¦è‡ªå®šä¹‰åˆ—了。请å‚考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue)，[实例效果](https://panjiachen.github.io/vue-element-admin/#/table/tree-table)
-
- `slot`å’Œ`columns属性`å¯åŒæ—¶å˜åœ¨,columns里é¢çš„æ•°æ®åˆ—会在slot自定义列的左边展示
-
- ## 其他
- 如果有其他的需求，请å‚考[el-table](http://element-cn.eleme.io/#/en-US/component/table)çš„api自行修改index.vue
diff --git a/src/components/element-ui/Upload/singleImage.vue b/src/components/element-ui/Upload/singleImage.vue
deleted file mode 100644
index 89a1bfa4..00000000
--- a/src/components/element-ui/Upload/singleImage.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
- <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>
-// 预览效果è§ä»˜è´¹æ–‡ç«
-import { getToken } from '@/api/qiniu'
-
-export default {
- name: 'SingleImageUpload',
- props: {
- value: {
- type: String,
- default: ''
- }
- },
- data: function() {
- return {
- tempUrl: '',
- dataObj: { token: '', key: '' }
- }
- },
- computed: {
- imageUrl() {
- return this.value
- }
- },
- methods: {
- rmImage() {
- this.emitInput('')
- },
- emitInput(val) {
- this.$emit('input', val)
- },
- handleImageSuccess() {
- this.emitInput(this.tempUrl)
- },
- beforeUpload() {
- const _self = this
- return new Promise((resolve, reject) => {
- getToken().then(response => {
- const key = response.data.qiniu_key
- const token = response.data.qiniu_token
- _self._data.dataObj.token = token
- _self._data.dataObj.key = key
- this.tempUrl = response.data.qiniu_url
- resolve(true)
- }).catch(err => {
- console.log(err)
- reject(false)
- })
- })
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
- @import "src/styles/mixin.scss";
- .upload-container {
- width: 100%;
- position: relative;
- @include clearfix;
- .image-uploader {
- width: 60%;
- float: left;
- }
- .image-preview {
- width: 200px;
- height: 200px;
- position: relative;
- border: 1px dashed #d9d9d9;
- float: left;
- margin-left: 50px;
- .image-preview-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .image-preview-action {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- cursor: default;
- text-align: center;
- color: #fff;
- opacity: 0;
- font-size: 20px;
- background-color: rgba(0, 0, 0, .5);
- transition: opacity .3s;
- cursor: pointer;
- text-align: center;
- line-height: 200px;
- .el-icon-delete {
- font-size: 36px;
- }
- }
- &:hover {
- .image-preview-action {
- opacity: 1;
- }
- }
- }
- }
-
-</style>
diff --git a/src/components/element-ui/Upload/singleImage2.vue b/src/components/element-ui/Upload/singleImage2.vue
deleted file mode 100644
index 96c4402b..00000000
--- a/src/components/element-ui/Upload/singleImage2.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
- <div class="singleImageUpload2 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">Drag或<em>ç‚¹å‡»ä¸Šä¼ </em></div>
- </el-upload>
- <div v-show="imageUrl.length>0" class="image-preview">
- <div v-show="imageUrl.length>1" class="image-preview-wrapper">
- <img :src="imageUrl">
- <div class="image-preview-action">
- <i class="el-icon-delete" @click="rmImage"/>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import { getToken } from '@/api/qiniu'
-
-export default {
- name: 'SingleImageUpload2',
- props: {
- value: {
- type: String,
- default: ''
- }
- },
- data: function() {
- return {
- tempUrl: '',
- dataObj: { token: '', key: '' }
- }
- },
- computed: {
- imageUrl() {
- return this.value
- }
- },
- methods: {
- rmImage() {
- this.emitInput('')
- },
- emitInput(val) {
- this.$emit('input', val)
- },
- handleImageSuccess() {
- this.emitInput(this.tempUrl)
- },
- beforeUpload() {
- const _self = this
- return new Promise((resolve, reject) => {
- getToken().then(response => {
- const key = response.data.qiniu_key
- const token = response.data.qiniu_token
- _self._data.dataObj.token = token
- _self._data.dataObj.key = key
- this.tempUrl = response.data.qiniu_url
- resolve(true)
- }).catch(() => {
- reject(false)
- })
- })
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.upload-container {
- width: 100%;
- height: 100%;
- position: relative;
- .image-uploader {
- height: 100%;
- }
- .image-preview {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0px;
- top: 0px;
- border: 1px dashed #d9d9d9;
- .image-preview-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .image-preview-action {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- cursor: default;
- text-align: center;
- color: #fff;
- opacity: 0;
- font-size: 20px;
- background-color: rgba(0, 0, 0, .5);
- transition: opacity .3s;
- cursor: pointer;
- text-align: center;
- line-height: 200px;
- .el-icon-delete {
- font-size: 36px;
- }
- }
- &:hover {
- .image-preview-action {
- opacity: 1;
- }
- }
- }
-}
-</style>
diff --git a/src/components/element-ui/Upload/singleImage3.vue b/src/components/element-ui/Upload/singleImage3.vue
deleted file mode 100644
index efa5b2d2..00000000
--- a/src/components/element-ui/Upload/singleImage3.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
- <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 image-app-preview">
- <div v-show="imageUrl.length>1" class="image-preview-wrapper">
- <img :src="imageUrl">
- <div class="image-preview-action">
- <i class="el-icon-delete" @click="rmImage"/>
- </div>
- </div>
- </div>
- <div class="image-preview">
- <div v-show="imageUrl.length>1" class="image-preview-wrapper">
- <img :src="imageUrl">
- <div class="image-preview-action">
- <i class="el-icon-delete" @click="rmImage"/>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import { getToken } from '@/api/qiniu'
-
-export default {
- name: 'SingleImageUpload3',
- props: {
- value: {
- type: String,
- default: ''
- }
- },
- data: function() {
- return {
- tempUrl: '',
- dataObj: { token: '', key: '' }
- }
- },
- computed: {
- imageUrl() {
- return this.value
- }
- },
- methods: {
- rmImage() {
- this.emitInput('')
- },
- emitInput(val) {
- this.$emit('input', val)
- },
- handleImageSuccess(file) {
- this.emitInput(file.files.file)
- },
- beforeUpload() {
- const _self = this
- return new Promise((resolve, reject) => {
- getToken().then(response => {
- const key = response.data.qiniu_key
- const token = response.data.qiniu_token
- _self._data.dataObj.token = token
- _self._data.dataObj.key = key
- this.tempUrl = response.data.qiniu_url
- resolve(true)
- }).catch(err => {
- console.log(err)
- reject(false)
- })
- })
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import "~@/styles/mixin.scss";
-.upload-container {
- width: 100%;
- position: relative;
- @include clearfix;
- .image-uploader {
- width: 35%;
- float: left;
- }
- .image-preview {
- width: 200px;
- height: 200px;
- position: relative;
- border: 1px dashed #d9d9d9;
- float: left;
- margin-left: 50px;
- .image-preview-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .image-preview-action {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- cursor: default;
- text-align: center;
- color: #fff;
- opacity: 0;
- font-size: 20px;
- background-color: rgba(0, 0, 0, .5);
- transition: opacity .3s;
- cursor: pointer;
- text-align: center;
- line-height: 200px;
- .el-icon-delete {
- font-size: 36px;
- }
- }
- &:hover {
- .image-preview-action {
- opacity: 1;
- }
- }
- }
- .image-app-preview {
- width: 320px;
- height: 180px;
- position: relative;
- border: 1px dashed #d9d9d9;
- float: left;
- margin-left: 50px;
- .app-fake-conver {
- height: 44px;
- position: absolute;
- width: 100%; // background: rgba(0, 0, 0, .1);
- text-align: center;
- line-height: 64px;
- color: #fff;
- }
- }
-}
-</style>
--
GitLab