JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-09-15 17:19:46 +08:00
Code Issues Projects Releases Wiki Activity

🐛移除不常用的二维码组件

Browse Source
This commit is contained in:
chuzhixin 2020-10-02 01:40:46 +08:00
parent 4014b65a10
commit 0108eb755c
7 changed files with 0 additions and 524 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
mock/controller/router.js
View File

@ -238,12 +238,6 @@ const data = [
component: "@/views/vab/editor/index", component: "@/views/vab/editor/index",
meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" }, meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" },
}, },
{
path: "qrCode",
name: "QrCode",
component: "@/views/vab/qrCode/index",
meta: { title: "二维码", permissions: ["admin"] },
},
{ {
path: "backToTop", path: "backToTop",
name: "BackToTop", name: "BackToTop",
@ -281,12 +275,6 @@ const data = [
component: "@/views/vab/upload/index", component: "@/views/vab/upload/index",
meta: { title: "上传", permissions: ["admin"] }, meta: { title: "上传", permissions: ["admin"] },
}, },
{
path: "sticky",
name: "Sticky",
component: "@/views/vab/sticky/index",
meta: { title: "sticky吸附", permissions: ["admin"] },
},
{ {
path: "log", path: "log",
name: "Log", name: "Log",

1
package.json
View File

@ -57,7 +57,6 @@
"screenfull": "^5.0.2", "screenfull": "^5.0.2",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-echarts": "^5.0.0-beta.0", "vue-echarts": "^5.0.0-beta.0",
"vue-qart": "^2.2.0",
"vue-router": "^3.4.5", "vue-router": "^3.4.5",
"vuex": "^3.5.1", "vuex": "^3.5.1",
"zx-comparison": "^1.0.3", "zx-comparison": "^1.0.3",

44
src/components/VabQrCode/index.vue
View File

@ -1,44 +0,0 @@
<template>
<div class="app-container">
<vue-q-art :config="config"></vue-q-art>
</div>
</template>
<script>
import VueQArt from "vue-qart";
import qrImg from "@/assets/qr_logo/lqr_logo.png";
export default {
name: "VabQrCode",
components: {
VueQArt,
},
props: {
imagePath: {
type: String,
default: qrImg,
},
url: {
type: String,
default: "http://www.boyunvision.com/",
},
size: {
type: Number,
default: 500,
},
},
data() {
return {
config: {
value: this.url,
imagePath: this.imagePath,
filter: "color",
size: this.size,
},
};
},
created() {},
mounted() {},
methods: {},
};
</script>

95
src/components/VabSticky/index.vue
View File

@ -1,95 +0,0 @@
<template>
<div :style="{ height: height + 'px', zIndex: zIndex }">
<div
:class="className"
:style="{
top: isSticky ? stickyTop + 'px' : '',
zIndex: zIndex,
position: position,
width: width,
height: height + 'px',
}"
>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "VabSticky",
props: {
stickyTop: {
type: Number,
default: 0,
},
zIndex: {
type: Number,
default: 1,
},
className: {
type: String,
default: "",
},
},
data() {
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.handleResize);
},
activated() {
this.handleScroll();
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleResize);
},
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();
},
handleResize() {
if (this.isSticky) {
this.width = this.$el.getBoundingClientRect().width + "px";
}
},
},
};
</script>

12
src/router/index.js
View File

@ -314,12 +314,6 @@ export const asyncRoutes = [
badge: "New", badge: "New",
}, },
}, },
{
path: "qrCode",
name: "QrCode",
component: () => import("@/views/vab/qrCode/index"),
meta: { title: "二维码", permissions: ["admin"] },
},
{ {
path: "backToTop", path: "backToTop",
name: "BackToTop", name: "BackToTop",
@ -357,12 +351,6 @@ export const asyncRoutes = [
component: () => import("@/views/vab/upload/index"), component: () => import("@/views/vab/upload/index"),
meta: { title: "上传", permissions: ["admin"] }, meta: { title: "上传", permissions: ["admin"] },
}, },
{
path: "sticky",
name: "Sticky",
component: () => import("@/views/vab/sticky/index"),
meta: { title: "sticky吸附", permissions: ["admin"] },
},
{ {
path: "log", path: "log",
name: "Log", name: "Log",

46
src/views/vab/qrCode/index.vue
View File

@ -1,46 +0,0 @@
<template>
<div class="qr-code-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<el-card shadow="hover">
<div slot="header"><span>二维码示例</span></div>
<a target="_blank" :href="url">
<vab-qr-code :image-path="imagePath" :url="url"></vab-qr-code>
</a>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import VabQrCode from "@/components/VabQrCode";
export default {
name: "QrCode",
components: {
VabQrCode,
},
data() {
return {
url: "https://www.baidu.com",
imagePath: require("@/assets/qr_logo/lqr_logo.png"),
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.qr-code-container {
::v-deep {
.el-card__body {
display: flex;
align-content: center;
justify-content: center;
}
}
}
</style>

314
src/views/vab/sticky/index.vue
View File

@ -1,314 +0,0 @@
<template>
<div class="sticky-container">
<vab-sticky :sticky-top="100">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="150">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="200">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="250">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="300">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="350">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="400">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="450">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="500">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="550">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="600">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<vab-sticky :sticky-top="650">
<el-alert title="我会吸附" type="success" :closable="false"></el-alert>
</vab-sticky>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
<div>sticky</div>
</div>
</template>
<script>
import VabSticky from "@/components/VabSticky";
export default {
name: "Sticky",
components: { VabSticky },
data() {
return {
time: "",
url: "",
platforms: ["a-platform"],
platformsOptions: [
{ key: "a-platform", name: "platformA" },
{ key: "b-platform", name: "platformB" },
{ key: "c-platform", name: "platformC" },
],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
};
},
};
</script>
<style lang="scss" scoped>
.sticky-container {
div {
height: 40px;
line-height: 40px;
}
}
</style>