自己封装一个Vue2的ShowMore组件
博客专区 > Trivia 的博客 > 博客详情
自己封装一个Vue2的ShowMore组件
Trivia 发表于3个月前
自己封装一个Vue2的ShowMore组件
  • 发表于 3个月前
  • 阅读 166
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

使用iView时,看到有这样的组件

点击后可以展开看到更多内容,项目中的多条件过滤面板需要用到,但iView似乎没有提供这个组件

 

于是自己动手撸了一个,和iView文档中的那个不太一样,但效果类似。

代码不多,拿来分享给有需要的大家。

参数就一个init,初始高度,意味当你将一个其他组件用这个showmore组件包裹的时候,

给一个初始展示内容的高度

 

<template>
<Card :style="{height:height,overflow:'hidden'}">
<div v-height><slot ></slot></div>
<div class="trivia-more" @click="state = !state"><Icon :type="state?'ios-arrow-down':'ios-arrow-up'"></Icon></div>
</Card>
</template>
<style>
    .trivia-more {
        position: absolute;
        bottom: 0;
        left: 4px;
        right: 4px;
        text-align: center;
        cursor: pointer;
        padding: 5px 0
    }
</style>
<script>
    export default {
        props: {
            init: { type: String, default: '5em' }
        },
        directives: {
            height: {
                componentUpdated: (el, binding, vnode) => {
                    let self = vnode.context
                    let style = getComputedStyle(el, "")
                    let height = Math.floor(parseInt(style.height) / parseInt(style.fontSize)) * 1.5
                    self.height = self.state ? self.init : height + 'em'
                }
            }
        },
        data() {
            return {
                state: true,
                height: this.init
            }
        },
    }

</script>

 

标签: iView vue
共有 人打赏支持
粉丝 0
博文 2
码字总数 790
×
Trivia
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: