tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增横向滚动效果

Browse Source
This commit is contained in:
justin
2022-04-06 16:30:40 +08:00
parent b8feb1b47f
commit 297ee8f858
1 changed files with 81 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/dashboard/components/Team/index.vue
View File

@@ -3,114 +3,109 @@
<div class="component-container">
<el-card class="team-card">
<template #header>
<span class="fw-b">有来开源组织 & 技术团队 </span>
<span class="fw-b">有来开源组织 & 技术团队</span>
</template>
<el-tabs v-model="teamActiveName">
<el-tab-pane label="开发者「无回」" name="developer">
<div class="developer">
<div class="developer" ref="dev_wapper">
<ul class="developer__container">
<li class="developer__item" v-for="(item,index) in developers">
<li class="developer__item" v-for="(item, index) in developers" :key="index">
<div class="developer__inner">
<el-image
class="developer__img"
:src="item.imgUrl"
:preview-src-list="[item.imgUrl]">
</el-image>
class="developer__img"
:src="item.imgUrl"
:preview-src-list="[item.imgUrl]"
></el-image>
<div class="developer__info">
<span class="developer__nickname">{{ item.nickname }}</span>
<div class="developer__position">
<el-tag v-for="(position,i) in item.positions"
:type="colors[i%colors.length]"
:class="i!==0?'f-ml':''"
size="small">
{{ position }}
</el-tag>
<el-tag
v-for="(position, i) in item.positions"
:type="colors[i % colors.length]"
:class="i !== 0 ? 'f-ml' : ''"
size="small"
>{{ position }}</el-tag>
</div>
<div class="developer__homepage">
<a :href="item.homepage" target="_blank">
个人主页
</a>
<a :href="item.homepage" target="_blank">个人主页</a>
</div>
</div>
</div>
</li>
</ul>
<el-image class="developer__indicator" :src="indicatorImgUrl"/>
<el-image class="developer__indicator" :src="indicatorImgUrl" />
</div>
</el-tab-pane>
<el-tab-pane label="交流群「有来」" name="2">
<div class="group">
<el-image
class="group-img"
src="https://cdn.youlai.tech/youlaiqun.png"
:preview-src-list="['https://cdn.youlai.tech/youlaiqun.png']"
class="group-img"
src="https://cdn.youlai.tech/youlaiqun.png"
:preview-src-list="['https://cdn.youlai.tech/youlaiqun.png']"
/>
<div class="group-tip">
群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
</div>
<div class="group-tip">群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。</div>
</div>
</el-tab-pane>
<el-tab-pane label="加入我们" name="3">
<div class="join">
<p>1. 人品良好、善于思考、执行力强；</p>
<p>2. 熟悉项目，且至少给项目提交(过)一个PR； </p>
<p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
<p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
<p>4. 过分优秀者我们会主动联系您...</p>
<div class="join__desc">
申请加入方式: 添加开发者微信申请即可。
</div>
<div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script setup lang="ts">
import {nextTick, onMounted, reactive, toRefs, watchEffect} from "vue";
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from "vue";
import BScroll from "better-scroll";
const state = reactive({
teamActiveName: 'developer',
teamActiveName: "developer",
developers: [
{
imgUrl: 'https://cdn.youlai.tech/rui.jpg',
nickname: '郝先瑞',
positions: ['Vue3','Java', '文档'],
homepage: 'https://www.cnblogs.com/haoxianrui/'
imgUrl: "https://cdn.youlai.tech/rui.jpg",
nickname: "郝先瑞",
positions: ["Vue3", "Java", "文档"],
homepage: "https://www.cnblogs.com/haoxianrui/",
},
{
imgUrl: 'https://cdn.youlai.tech/chuan.jpg',
nickname: '张川',
positions: ['Vue3','Java' ],
homepage: 'https://blog.csdn.net/qq_41595149'
imgUrl: "https://cdn.youlai.tech/chuan.jpg",
nickname: "张川",
positions: ["Vue3", "Java"],
homepage: "https://blog.csdn.net/qq_41595149",
},
{
imgUrl: "https://cdn.youlai.tech/lin.jpg",
nickname: "张加林",
positions: ["DevOps"],
homepage: "https://gitee.com/ximy",
},
{
imgUrl: 'https://cdn.youlai.tech/lin.jpg',
nickname: '张加林',
positions: ['DevOps'],
homepage: 'https://gitee.com/ximy'
}
],
colors: ['', 'success', 'warning', 'danger'],
indicatorImgUrl: new URL(`../../../../assets/index/indicator.png`, import.meta.url).href
})
colors: ["", "success", "warning", "danger"],
indicatorImgUrl: new URL(
`../../../../assets/index/indicator.png`,
import.meta.url
).href,
});
const {teamActiveName, developers, colors, indicatorImgUrl} = toRefs(state)
const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
/*let bScroll = reactive({})
let bScroll = reactive({})
const dev_wapper = ref<HTMLElement | any>(null)
onMounted(() => {
bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
startX: 0,
click: true,
scrollX: true,
scrollY: false,
eventPassthrough: "vertical" // 横向滚动，保留纵向原生滚动
bScroll = new BScroll(dev_wapper.value, {
mouseWheel: true,//开启鼠标滚轮
disableMouse: false,//启用鼠标拖动
scrollX: true, //X轴滚动启用
})
})
@@ -118,8 +113,27 @@ watchEffect(() => {
nextTick(() => {
bScroll && (bScroll as any).refresh()
})
})*/
})
// let bScroll = reactive({})
// onMounted(() => {
// bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
// startX: 0,
// click: true,
// scrollX: true,
// scrollY: false,
// eventPassthrough: "vertical" // 横向滚动，保留纵向原生滚动
// })
// })
// watchEffect(() => {
// nextTick(() => {
// bScroll && (bScroll as any).refresh()
// })
// })
</script>
<style lang="scss" scoped>
@@ -135,9 +149,11 @@ watchEffect(() => {
.developer {
width: 100%;
overflow: hidden;
&__container {
display: flex;
display: inline-flex;
overflow: hidden;
justify-content: flex-start;
.developer__item {
@@ -153,7 +169,7 @@ watchEffect(() => {
.developer__inner {
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: 6px 6px 6px #AAA;
box-shadow: 6px 6px 6px #aaa;
padding: 8px;
text-align: center;
@@ -176,14 +192,14 @@ watchEffect(() => {
a {
display: inline-block;
padding: 4px 10px;
color: #409EFF;
border: 1px solid #409EFF;
color: #409eff;
border: 1px solid #409eff;
border-radius: 5px;
background: #ecf5ff;
&:hover {
background: #409EFF;
color: #FFFFFF;
background: #409eff;
color: #ffffff;
}
}
}
@@ -192,7 +208,7 @@ watchEffect(() => {
}
}
&__indicator{
&__indicator {
position: absolute;
right: 0;
bottom: 0;
@@ -210,7 +226,7 @@ watchEffect(() => {
&__desc {
margin-top: 20px;
color: #409EFF;
color: #409eff;
font-weight: bold;
}
}
@@ -232,8 +248,5 @@ watchEffect(() => {
.f-ml {
margin-left: 5px;
}
}
</style>