123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <template>
- <div :class="{active:isActive}" class="share-dropdown-menu">
- <div class="share-dropdown-menu-wrapper">
- <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
- <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
- <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
- <span v-else>{{ item.title }}</span>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: {
- items: {
- type: Array,
- default: function() {
- return []
- }
- },
- title: {
- type: String,
- default: 'vue'
- }
- },
- data() {
- return {
- isActive: false
- }
- },
- methods: {
- clickTitle() {
- this.isActive = !this.isActive
- }
- }
- }
- </script>
- <style lang="scss" >
- $n: 9; //和items.length 相同
- $t: .1s;
- .share-dropdown-menu {
- width: 250px;
- position: relative;
- z-index: 1;
- height: auto!important;
- &-title {
- width: 100%;
- display: block;
- cursor: pointer;
- background: black;
- color: white;
- height: 60px;
- line-height: 60px;
- font-size: 20px;
- text-align: center;
- z-index: 2;
- transform: translate3d(0,0,0);
- }
- &-wrapper {
- position: relative;
- }
- &-item {
- text-align: center;
- position: absolute;
- width: 100%;
- background: #e0e0e0;
- color: #000;
- line-height: 60px;
- height: 60px;
- cursor: pointer;
- font-size: 18px;
- overflow: hidden;
- opacity: 1;
- transition: transform 0.28s ease;
- &:hover {
- background: black;
- color: white;
- }
- @for $i from 1 through $n {
- &:nth-of-type(#{$i}) {
- z-index: -1;
- transition-delay: $i*$t;
- transform: translate3d(0, -60px, 0);
- }
- }
- }
- &.active {
- .share-dropdown-menu-wrapper {
- z-index: 1;
- }
- .share-dropdown-menu-item {
- @for $i from 1 through $n {
- &:nth-of-type(#{$i}) {
- transition-delay: ($n - $i)*$t;
- transform: translate3d(0, ($i - 1)*60px, 0);
- }
- }
- }
- }
- }
- </style>
|