how to achieve a slider like the top of the headline? It"s hard to use a MUI. Is there anything else you can recommend
?how to achieve a slider like the top of the headline? It"s hard to use a MUI. Is there anything else you can recommend
? this is very simple and you can write one yourself.
gives you a component reference written by yourself
<!--
:tabItems tab[{name, isActive}...]nameisActivechang
:displayProp
@change tab:tabItem
ref.setActive(index) change
ref.setPosition
-->
<style rel="stylesheet/less" lang="less">
@checked-color: -sharp4179FF;
@text-color: -sharp3B435A;
.slide-tab {
width: auto;
white-space: nowrap;
background: -sharpFFFFFF;
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.10);
overflow-x: scroll;
overflow-y: hidden;
&::-webkit-scrollbar {
display: none;
}
.slide-item {
display: inline-block;
position: relative;
padding: 15px;
font-size: 16px;
color: @text-color;
}
.item-checked{
color: @checked-color;
}
.slide-check {
position: absolute;
bottom: 0;
left: 50%;
height: 3px;
width: 0;
transform: translateX(-50%);
color: @checked-color;
background: @checked-color;
transition: all .2s;
}
.is-check {
width: 20px;
}
}
</style>
<template>
<div>
<div class="slide-tab" ref="slideTab">
<div class="slide-item" :class="{'item-checked': index === activeIndex}" v-for="(item,index) in tabItems" @click="slide(index)">
{{item}}
<div class="slide-check" :class="{'is-check': index === activeIndex}"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
tabItems: {
type: Array,
default(){
return ['', '', '', '', '', '']
}
}
},
data() {
return {
activeIndex: 0
}
},
methods: {
slide(index){
this.activeIndex = index;
let activeDom = document.getElementsByClassName('slide-item')[index];
this.$refs.slideTab.scrollLeft = activeDom.offsetLeft;
this.$emit('on-change', index);
}
},
mounted() {
}
}
</script>
Why did I copy your code and reported an error? I added a js,less,cdn link myself
a = [{id:1}, {id:2}, {id:3}] b = [{id:1}, {id:2}, {id:4}] how to calculate in b that b does not have in a ...
purpose prevents repeated submission of the form, so a loading value is set to control it. The code is modified as follows. function setLoading(loading) { return function(target, name, descriptor) { const old = descriptor.value; descriptor....