项目初始化
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="select-tree-template">
|
||||
<el-select
|
||||
v-model="selectValue"
|
||||
:clearable="clearable"
|
||||
:collapse-tags="selectType == 'multiple'"
|
||||
:multiple="selectType == 'multiple'"
|
||||
class="vab-tree-select"
|
||||
value-key="id"
|
||||
@clear="clearHandle"
|
||||
@remove-tag="removeTag"
|
||||
>
|
||||
<el-option :value="selectKey">
|
||||
<el-tree
|
||||
id="treeOption"
|
||||
ref="treeOption"
|
||||
:current-node-key="currentNodeKey"
|
||||
:data="treeOptions"
|
||||
:default-checked-keys="defaultSelectedKeys"
|
||||
:default-expanded-keys="defaultSelectedKeys"
|
||||
:highlight-current="true"
|
||||
:props="defaultProps"
|
||||
:show-checkbox="selectType == 'multiple'"
|
||||
node-key="id"
|
||||
@check="checkNode"
|
||||
@node-click="nodeClick"
|
||||
></el-tree>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectTreeTemplate',
|
||||
props: {
|
||||
/* 树形结构数据 */
|
||||
treeOptions: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
/* 单选/多选 */
|
||||
selectType: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return 'single'
|
||||
},
|
||||
},
|
||||
/* 初始选中值key */
|
||||
selectedKey: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
/* 初始选中值name */
|
||||
selectedValue: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
/* 可做选择的层级 */
|
||||
selectLevel: {
|
||||
type: [String, Number],
|
||||
default: () => {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
/* 可清空选项 */
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
},
|
||||
defaultSelectedKeys: [], //初始选中值数组
|
||||
currentNodeKey: this.selectedKey,
|
||||
selectValue:
|
||||
this.selectType == 'multiple'
|
||||
? this.selectedValue.split(',')
|
||||
: this.selectedValue, //下拉框选中值label
|
||||
selectKey:
|
||||
this.selectType == 'multiple'
|
||||
? this.selectedKey.split(',')
|
||||
: this.selectedKey, //下拉框选中值value
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
this.initTree()
|
||||
},
|
||||
methods: {
|
||||
// 初始化树的值
|
||||
initTree() {
|
||||
const that = this
|
||||
if (that.selectedKey) {
|
||||
that.defaultSelectedKeys = that.selectedKey.split(',') // 设置默认展开
|
||||
if (that.selectType == 'single') {
|
||||
that.$refs.treeOption.setCurrentKey(that.selectedKey) // 设置默认选中
|
||||
} else {
|
||||
that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 清除选中
|
||||
clearHandle() {
|
||||
const that = this
|
||||
this.selectValue = ''
|
||||
this.selectKey = ''
|
||||
this.defaultSelectedKeys = []
|
||||
this.currentNodeKey = ''
|
||||
this.clearSelected()
|
||||
if (that.selectType == 'single') {
|
||||
that.$refs.treeOption.setCurrentKey('') // 设置默认选中
|
||||
} else {
|
||||
that.$refs.treeOption.setCheckedKeys([])
|
||||
}
|
||||
},
|
||||
/* 清空选中样式 */
|
||||
clearSelected() {
|
||||
const allNode = document.querySelectorAll('#treeOption .el-tree-node')
|
||||
allNode.forEach((element) => element.classList.remove('is-current'))
|
||||
},
|
||||
// select多选时移除某项操作
|
||||
removeTag(val) {
|
||||
this.$refs.treeOption.setCheckedKeys([])
|
||||
},
|
||||
// 点击叶子节点
|
||||
nodeClick(data, node, el) {
|
||||
if (data.rank >= this.selectLevel) {
|
||||
this.selectValue = data.name
|
||||
this.selectKey = data.id
|
||||
}
|
||||
},
|
||||
// 节点选中操作
|
||||
checkNode(data, node, el) {
|
||||
const checkedNodes = this.$refs.treeOption.getCheckedNodes()
|
||||
const keyArr = []
|
||||
const valueArr = []
|
||||
checkedNodes.forEach((item) => {
|
||||
if (item.rank >= this.selectLevel) {
|
||||
keyArr.push(item.id)
|
||||
valueArr.push(item.name)
|
||||
}
|
||||
})
|
||||
this.selectValue = valueArr
|
||||
this.selectKey = keyArr
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
|
||||
height: auto;
|
||||
max-height: 274px;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul li > .el-tree .el-tree-node__content {
|
||||
height: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.el-tree > .is-current .el-tree-node__label {
|
||||
font-weight: 700;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
|
||||
font-weight: normal;
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* .vab-tree-select{
|
||||
.el-tag__close.el-icon-close{
|
||||
width:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="g-container" :style="styleObj">
|
||||
<div class="g-number">
|
||||
<vab-count
|
||||
:start-val="startVal"
|
||||
:end-val="endVal"
|
||||
:duration="duration"
|
||||
:separator="separator"
|
||||
:prefix="prefix"
|
||||
:suffix="suffix"
|
||||
:decimals="decimals"
|
||||
/>
|
||||
</div>
|
||||
<div class="g-contrast">
|
||||
<div class="g-circle"></div>
|
||||
<ul class="g-bubbles">
|
||||
<li v-for="(item, index) in 15" :key="index"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VabCharge',
|
||||
props: {
|
||||
styleObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
startVal: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
endVal: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
decimals: 2,
|
||||
prefix: '',
|
||||
suffix: '%',
|
||||
separator: ',',
|
||||
duration: 3000,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
width: 100%;
|
||||
background: #000;
|
||||
|
||||
.g-number {
|
||||
position: absolute;
|
||||
top: 27%;
|
||||
z-index: 99;
|
||||
width: 300px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.g-container {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.g-contrast {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
filter: contrast(15) hue-rotate(0);
|
||||
animation: hueRotate 10s infinite linear;
|
||||
}
|
||||
|
||||
.g-circle {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
filter: blur(8px);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
content: '';
|
||||
background-color: #00ff6f;
|
||||
border-radius: 42% 38% 62% 49% / 45%;
|
||||
transform: translate(-50%, -50%) rotate(0);
|
||||
animation: rotate 10s infinite linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
z-index: 99;
|
||||
width: 176px;
|
||||
height: 176px;
|
||||
content: '';
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.g-bubbles {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #00ff6f;
|
||||
filter: blur(5px);
|
||||
border-radius: 100px 100px 0 0;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
li {
|
||||
position: absolute;
|
||||
background: #00ff6f;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 15 {
|
||||
li:nth-child(#{$i}) {
|
||||
$width: 15 + random(15) + px;
|
||||
|
||||
top: 50%;
|
||||
left: 15 + random(70) + px;
|
||||
width: $width;
|
||||
height: $width;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: moveToTop
|
||||
#{random(6) +
|
||||
3}s
|
||||
ease-in-out -#{random(5000) /
|
||||
1000}s
|
||||
infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
50% {
|
||||
border-radius: 45% / 42% 38% 58% 49%;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(720deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveToTop {
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
transform: translate(-50%, -180px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hueRotate {
|
||||
100% {
|
||||
filter: contrast(15) hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="card" :style="styleObj">
|
||||
<div class="card-borders">
|
||||
<div class="border-top"></div>
|
||||
<div class="border-right"></div>
|
||||
<div class="border-bottom"></div>
|
||||
<div class="border-left"></div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<el-image :src="avatar" class="avatar"></el-image>
|
||||
<div class="username">{{ username }}</div>
|
||||
<div class="social-icons">
|
||||
<a
|
||||
v-for="(item, index) in iconArray"
|
||||
:key="index"
|
||||
class="social-icon"
|
||||
:href="item.url"
|
||||
target="_blank"
|
||||
>
|
||||
<vab-icon :icon="['fas', item.icon]" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VabProfile',
|
||||
props: {
|
||||
styleObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
username: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
iconArray: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
{ icon: 'bell', url: '' },
|
||||
{ icon: 'bookmark', url: '' },
|
||||
{ icon: 'cloud-sun', url: '' },
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
--card-bg-color: hsl(240, 31%, 25%);
|
||||
--card-bg-color-transparent: hsla(240, 31%, 25%, 0.7);
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.card-borders {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.border-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--card-bg-color);
|
||||
transform: translateX(-100%);
|
||||
animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
forwards;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: var(--card-bg-color);
|
||||
transform: translateY(100%);
|
||||
animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
forwards;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--card-bg-color);
|
||||
transform: translateX(100%);
|
||||
animation: slide-in-horizontal-reverse 0.8s
|
||||
cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: var(--card-bg-color);
|
||||
transform: translateY(-100%);
|
||||
animation: slide-in-vertical-reverse 0.8s
|
||||
cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 40px 0 40px 0;
|
||||
background: var(--card-bg-color-transparent);
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
animation: bump-in 0.5s 0.8s forwards;
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px solid $base-color-white;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
animation: bump-in 0.5s 1s forwards;
|
||||
}
|
||||
|
||||
.username {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 26px;
|
||||
color: transparent;
|
||||
letter-spacing: 2px;
|
||||
animation: fill-text-white 1.2s 2s forwards;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: black;
|
||||
content: '';
|
||||
background: #35b9f1;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 1) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
display: flex;
|
||||
|
||||
.social-icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
margin: 0 15px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 50%;
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
&:nth-child(#{$i}) {
|
||||
&::before {
|
||||
animation-delay: 2s + 0.1s * $i;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-delay: 2.1s + 0.1s * $i;
|
||||
}
|
||||
|
||||
svg {
|
||||
animation-delay: 2.2s + 0.1s * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: #f7f1e3;
|
||||
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: #2c3e50;
|
||||
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
|
||||
}
|
||||
|
||||
svg {
|
||||
z-index: 99;
|
||||
transform: scale(0);
|
||||
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bump-in {
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-horizontal {
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-horizontal-reverse {
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-vertical {
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-vertical-reverse {
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-out {
|
||||
50% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
50.1% {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fill-text-white {
|
||||
to {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="content" :style="styleObj">
|
||||
<div v-for="(item, index) in 200" :key="index" class="snow"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VabSnow',
|
||||
props: {
|
||||
styleObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
|
||||
filter: drop-shadow(0 0 10px white);
|
||||
}
|
||||
|
||||
@function random_range($min, $max) {
|
||||
$rand: random();
|
||||
$random_range: $min + floor($rand * (($max - $min) + 1));
|
||||
|
||||
@return $random_range;
|
||||
}
|
||||
|
||||
.snow {
|
||||
$total: 200;
|
||||
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
|
||||
@for $i from 1 through $total {
|
||||
$random-x: random(1000000) * 0.0001vw;
|
||||
$random-offset: random_range(-100000, 100000) * 0.0001vw;
|
||||
$random-x-end: $random-x + $random-offset;
|
||||
$random-x-end-yoyo: $random-x + ($random-offset / 2);
|
||||
$random-yoyo-time: random_range(30000, 80000) / 100000;
|
||||
$random-yoyo-y: $random-yoyo-time * 100vh;
|
||||
$random-scale: random(10000) * 0.0001;
|
||||
$fall-duration: random_range(10, 30) * 1s;
|
||||
$fall-delay: random(30) * -1s;
|
||||
|
||||
&:nth-child(#{$i}) {
|
||||
opacity: random(10000) * 0.0001;
|
||||
transform: translate($random-x, -10px) scale($random-scale);
|
||||
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fall-#{$i} {
|
||||
#{percentage($random-yoyo-time)} {
|
||||
transform: translate($random-x-end, $random-yoyo-y)
|
||||
scale($random-scale);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="dialogFormVisible"
|
||||
width="909px"
|
||||
>
|
||||
<div class="upload">
|
||||
<el-alert
|
||||
:closable="false"
|
||||
:title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
|
||||
type="info"
|
||||
></el-alert>
|
||||
<br />
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:action="action"
|
||||
:auto-upload="false"
|
||||
:close-on-click-modal="false"
|
||||
:data="data"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:limit="limit"
|
||||
:multiple="true"
|
||||
:name="name"
|
||||
:on-change="handleChange"
|
||||
:on-error="handleError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-preview="handlePreview"
|
||||
:on-progress="handleProgress"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleSuccess"
|
||||
accept="image/png, image/jpeg"
|
||||
class="upload-content"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<i slot="trigger" class="el-icon-plus"></i>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
append-to-body
|
||||
title="查看大图"
|
||||
>
|
||||
<div>
|
||||
<img :src="dialogImageUrl" alt="" width="100%" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
style="position: relative; padding-right: 15px; text-align: right"
|
||||
>
|
||||
<div
|
||||
v-if="show"
|
||||
style="position: absolute; top: 10px; left: 15px; color: #999"
|
||||
>
|
||||
正在上传中... 当前上传成功数:{{ imgSuccessNum }}张 当前上传失败数:{{
|
||||
imgErrorNum
|
||||
}}张
|
||||
</div>
|
||||
<el-button type="primary" @click="handleClose">关闭</el-button>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
type="success"
|
||||
@click="submitUpload"
|
||||
>
|
||||
开始上传
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { baseURL, tokenName } from '@/config'
|
||||
|
||||
export default {
|
||||
name: 'VabUpload',
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: '/upload',
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file',
|
||||
required: true,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 50,
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: '',
|
||||
action: 'https://vab-unicloud-3a9da9.service.tcloudbase.com/upload',
|
||||
headers: {},
|
||||
fileList: [],
|
||||
picture: 'picture',
|
||||
imgNum: 0,
|
||||
imgSuccessNum: 0,
|
||||
imgErrorNum: 0,
|
||||
typeList: null,
|
||||
title: '上传',
|
||||
dialogFormVisible: false,
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
if (this.allImgNum == 0) return 0
|
||||
return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
handleProgress(event, file, fileList) {
|
||||
this.loading = true
|
||||
this.show = true
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
if (file.size > 1048576 * this.size) {
|
||||
fileList.map((item, index) => {
|
||||
if (item === file) {
|
||||
fileList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
this.fileList = fileList
|
||||
} else {
|
||||
this.allImgNum = fileList.length
|
||||
}
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.imgNum = this.imgNum + 1
|
||||
this.imgSuccessNum = this.imgSuccessNum + 1
|
||||
if (fileList.length === this.imgNum) {
|
||||
setTimeout(() => {
|
||||
this.$baseMessage(
|
||||
`上传完成! 共上传${fileList.length}张图片`,
|
||||
'success'
|
||||
)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.show = false
|
||||
}, 1000)
|
||||
},
|
||||
handleError(err, file, fileList) {
|
||||
this.imgNum = this.imgNum + 1
|
||||
this.imgErrorNum = this.imgErrorNum + 1
|
||||
this.$baseMessage(
|
||||
`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
|
||||
file.raw.size / 1024,
|
||||
0
|
||||
)}KB`,
|
||||
'error'
|
||||
)
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.show = false
|
||||
}, 1000)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.imgNum = this.imgNum - 1
|
||||
this.allNum = this.allNum - 1
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$baseMessage(
|
||||
`当前限制选择 ${this.limit} 个文件，本次选择了
|
||||
${files.length}
|
||||
个文件`,
|
||||
'error'
|
||||
)
|
||||
},
|
||||
handleShow(data) {
|
||||
this.title = '上传'
|
||||
this.data = data
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleClose() {
|
||||
this.fileList = []
|
||||
this.picture = 'picture'
|
||||
this.allImgNum = 0
|
||||
this.imgNum = 0
|
||||
this.imgSuccessNum = 0
|
||||
this.imgErrorNum = 0
|
||||
/* if ("development" === process.env.NODE_ENV) {
|
||||
this.api = process.env.VUE_APP_BASE_API;
|
||||
} else {
|
||||
this.api = `${window.location.protocol}//${window.location.host}`;
|
||||
}
|
||||
|
||||
this.action = this.api + this.url; */
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload {
|
||||
height: 500px;
|
||||
|
||||
.upload-content {
|
||||
.el-upload__tip {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.el-upload--picture-card {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: 3px 8px 8px 8px;
|
||||
border: 2px dashed #c0ccda;
|
||||
}
|
||||
|
||||
.el-upload-list--picture {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-upload-list--picture-card {
|
||||
.el-upload-list__item {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: 3px 8px 8px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user