mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-06 03:58:00 +08:00
🐛移除不常用的二维码组件
This commit is contained in:
chuzhixin
parent
4014b65a10
commit
0108eb755c
@ -238,12 +238,6 @@ const data = [
|
||||
component: "@/views/vab/editor/index",
|
||||
meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" },
|
||||
},
|
||||
{
|
||||
path: "qrCode",
|
||||
name: "QrCode",
|
||||
component: "@/views/vab/qrCode/index",
|
||||
meta: { title: "二维码", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "backToTop",
|
||||
name: "BackToTop",
|
||||
@ -281,12 +275,6 @@ const data = [
|
||||
component: "@/views/vab/upload/index",
|
||||
meta: { title: "上传", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "sticky",
|
||||
name: "Sticky",
|
||||
component: "@/views/vab/sticky/index",
|
||||
meta: { title: "sticky吸附", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "log",
|
||||
name: "Log",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -314,12 +314,6 @@ export const asyncRoutes = [
|
||||
badge: "New",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "qrCode",
|
||||
name: "QrCode",
|
||||
component: () => import("@/views/vab/qrCode/index"),
|
||||
meta: { title: "二维码", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "backToTop",
|
||||
name: "BackToTop",
|
||||
@ -357,12 +351,6 @@ export const asyncRoutes = [
|
||||
component: () => import("@/views/vab/upload/index"),
|
||||
meta: { title: "上传", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "sticky",
|
||||
name: "Sticky",
|
||||
component: () => import("@/views/vab/sticky/index"),
|
||||
meta: { title: "sticky吸附", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "log",
|
||||
name: "Log",
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user