Skip to content

V
vipSupplier
Commit 0108eb75 by chuzhixin
Options

:bug:移除不常用的二维码组件

parent 4014b65a
Showing with 0 additions and 524 deletions
mock/controller/router.js
......@@ -239,12 +239,6 @@ const data = [
meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" },
},
{
path: "qrCode",
name: "QrCode",
component: "@/views/vab/qrCode/index",
meta: { title: "二维码", permissions: ["admin"] },
},
{
path: "backToTop",
name: "BackToTop",
component: "@/views/vab/backToTop/index",
......@@ -282,12 +276,6 @@ const data = [
meta: { title: "上传", permissions: ["admin"] },
},
{
path: "sticky",
name: "Sticky",
component: "@/views/vab/sticky/index",
meta: { title: "sticky吸附", permissions: ["admin"] },
},
{
path: "log",
name: "Log",
component: "@/views/vab/errorLog/index",
......
package.json
......@@ -57,7 +57,6 @@
"screenfull": "^5.0.2",
"vue": "^2.6.12",
"vue-echarts": "^5.0.0-beta.0",
"vue-qart": "^2.2.0",
"vue-router": "^3.4.5",
"vuex": "^3.5.1",
"zx-comparison": "^1.0.3",
......
src/components/VabQrCode/index.vue deleted 100644 → 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>
src/components/VabSticky/index.vue deleted 100644 → 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>
src/router/index.js
......@@ -315,12 +315,6 @@ export const asyncRoutes = [
},
},
{
path: "qrCode",
name: "QrCode",
component: () => import("@/views/vab/qrCode/index"),
meta: { title: "二维码", permissions: ["admin"] },
},
{
path: "backToTop",
name: "BackToTop",
component: () => import("@/views/vab/backToTop/index"),
......@@ -358,12 +352,6 @@ export const asyncRoutes = [
meta: { title: "上传", permissions: ["admin"] },
},
{
path: "sticky",
name: "Sticky",
component: () => import("@/views/vab/sticky/index"),
meta: { title: "sticky吸附", permissions: ["admin"] },
},
{
path: "log",
name: "Log",
component: () => import("@/views/vab/errorLog/index"),
......
src/views/vab/qrCode/index.vue deleted 100644 → 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>
src/views/vab/sticky/index.vue deleted 100644 → 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment