From 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 30 Aug 2022 21:57:42 +0800
Subject: [PATCH] 自定义表情组件
---
src/components/group/platformGroup.vue | 101 ++++++++++++++++++++++++++++++--------------------
1 files changed, 60 insertions(+), 41 deletions(-)
diff --git a/src/components/group/platformGroup.vue b/src/components/group/platformGroup.vue
index 6e1af1b..2830b59 100644
--- a/src/components/group/platformGroup.vue
+++ b/src/components/group/platformGroup.vue
@@ -1,51 +1,70 @@
<template>
- <div>
- <button type="button" class="button" @click="previewURL">URL Array</button>
- <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
- </div>
+
+ <a-tabs :defaultActiveKey="activeKey" @change="changeKey"
+ :tabBarStyle="{'display': 'flex','justify-content': 'center'}">
+ <a-tab-pane :key="keyType.type_1" tab="片刻">
+ <videoList v-on="$listeners" :activeKey="activeKey"></videoList>
+ </a-tab-pane>
+ <a-tab-pane :key="keyType.type_2" tab="流影">
+ <videoList v-on="$listeners" :activeKey="activeKey"></videoList>
+ </a-tab-pane>
+ <a-tab-pane :key="keyType.type_3" tab="谱库">
+ <photoShow :activeKey="activeKey"></photoShow>
+ </a-tab-pane>
+ </a-tabs>
+
</template>
+
<script>
- import 'viewerjs/dist/viewer.css'
- import {
- api as viewerApi
- } from "v-viewer"
+ import videoList from "../mini/box14-video.vue"
+ import photoShow from "../mini/box18-photoShow.vue"
+ import myConstant from "../../config/myConstant.js"
+
export default {
- data() {
- return {
- sourceImageURLs: [
- 'https://picsum.photos/200/200?random=1',
- 'https://picsum.photos/200/200?random=2',
- ],
- sourceImageObjects: [{
- 'src': 'https://picsum.photos/200/200?random=3',
- 'data-source': 'https://picsum.photos/800/800?random=3'
- },
- {
- 'src': 'https://picsum.photos/200/200?random=4',
- 'data-source': 'https://picsum.photos/800/800?random=4'
- }
- ]
- }
+ components: {
+ videoList,
+ photoShow,
+ },
+ created() {
+ this.getActiveKey()
+ },
+ watch: {
+ '$route'(to, from) {
+ if ("platform" === to.name) {
+ this.getActiveKey()
+ }
+ },
},
methods: {
- previewURL() {
- // 如果使用`app.use`进行全局安装, 你就可以像这样直接调用`this.$viewerApi`
- const $viewer = this.$viewerApi({
- images: this.sourceImageURLs
- })
+ getActiveKey() {
+ if (this.$route.query.activeKey != "" && this.$route.query.activeKey != undefined) {
+ this.activeKey = this.$route.query.activeKey;
+ } else {
+ //随机三选一
+ var random = Math.floor(Math.random() * 10);
+ this.activeKey = random >= 8 ?
+ this.keyType.type_3 : (random <= 3 ? this.keyType.type_2 : this.keyType.type_1)
+
+ this.$router.replace({query:{activeKey:this.activeKey}})
+ }
},
- previewImgObject() {
- // 或者你可以单独引入api然后执行它
- const $viewer = viewerApi({
- options: {
- inline:true,
- toolbar: true,
- url: 'data-source',
- initialViewIndex: 1
- },
- images: this.sourceImageObjects
- })
+ changeKey(key) {
+ this.activeKey = key
+ this.$router.replace({query:{activeKey:this.activeKey}})
}
- }
+ },
+ data() {
+ return {
+ activeKey: "moment",
+ keyType: myConstant.activeKeyType
+ }
+ },
+
}
</script>
+
+<style lang="less">
+ .ant-tabs-tab {
+ user-select: none;
+ }
+</style>
--
Gitblit v1.9.1