vue-seamless-scroll公告组件的使用

<*template>
<div class=“notice”>
<img :src=“trumpet” alt=“公司公告”>
<div class=“notice-box”>
<vue-seamless-scroll class=“seamless-scroll” :data=“listData” :class-option=“defaultOption” >
<ul class=“ul-scoll”>
<li v-for=“(item, index) in listData” :key=‘index’>
<span class=“title”>{{item.title}}</span>
</li>
</ul>
</vue-seamless-scroll> -->
</div>
<p @click=“handle”>点击进入</p>
</div>
</template>

<*script>
import trumpet from ‘@/assets/home/trumpet.svg’
import vueSeamlessScroll from ‘vue-seamless-scroll’

export default {
name: ‘Notice’,
components: {
vueSeamlessScroll
},
// 监听属性类似于data概念
computed: {
defaultOption () {
return {
step: 1, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
openTouch: false,
hoverStop: true, // 是否开启鼠标悬停stop
direction: 2, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
data () {
return {
trumpet,
listData: [{ title:‘尊敬的用户，经营罗盘即将改版升级，点击立即进入，抢先体验内测版。’ }]
}
},
methods: {
handle () {
window.open(‘http://10.126.124.44/tcloms/login’)
}
}
}

<*style lang=‘less’>
.notice {
.seamless-scroll {
div:nth-child(1) {
display: flex;
width: 1200px !important;
div {
width: 500px !important;
}
}
}
}

<*style lang=‘less’ scoped>
.notice {
width: 1344px !important;
height: 42px;
z-index: 1001;
background: rgba(38,109,254,0.40);
border-radius: 6px;
display: flex;
width: 100%;

img {
width: 16px;
height: 16px;
margin: 13px 12px 13px 16px;
}
p {
cursor: pointer;
width: 56px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 14px;
color: #FFCE7F;
height: 14px;
line-height: 10px;
border-bottom: 1px solid #FFCE7F;
margin: 14px 0px 14px 8px;
}
.notice-box {
width: 378px;
overflow: hidden;
.ul-scoll{
display: flex;
flex-wrap: wrap;
li{
height: 42px;
line-height: 42px;
margin-right: 10px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
}
}
}
@media (min-width: 328px) and (max-width: 1366px) {
.notice {
width: 896px !important;
position: relative;
top: -13px;
}
}

@media (min-width: 1380px) and (max-width: 1680px) {
.notice {
width: 1120px !important;
position: relative;
top: -5px;
}
}

vue-seamless-scroll公告组件的使用相关推荐

【独立版】智慧城市同城V4_2.1.1全开源全插件+VUE前端，修复平台装修公告组件风格二和风格三无法自动滚动的问题
源码介绍 [独立版]智慧城市同城V4_2.1.1全开源全插件+VUE前端,修复平台装修公告组件风格二和风格三无法自动滚动的问题! 智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信 ...
基于vue的无缝滚动组件
vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
语雀原文有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源公司项目有个甘特图的需求. 笔者考察了世面上常见的甘特图组件后,本着我上我也行的心态,以及考虑 ...
Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
rideo选中 vue_适用于 Vue 的播放器组件Vue-Video-Player操作
如果h5的标签不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. class="video-player vjs-custom-skin" ...

vue-seamless-scroll公告组件的使用

vue-seamless-scroll公告组件的使用相关推荐

最新文章

热门文章