vue Fold展开组件

效果

1. 单页写法

.fold {
  background-color: #fff;
  text-align: center;
  padding: 10px 0;
  span, .icon {
    display: inline-block;
    vertical-align: middle;
  }
}

<div v-if="showContent">被折叠展开的地方</div>

<p class="fold" v-if="showFold" @click="showContent=!showContent">
  <span>{{showContent?"收起":"展开"}}</span>
  <x-icon v-show="showContent" class="icon" type="ios-arrow-up" size="22"></x-icon>
  <x-icon v-show="!showContent" class="icon" type="ios-arrow-down" size="22"></x-icon>
</p>

import {Icon} from "vux";
components: {Icon},
data() {
  return {
    showFold: this.params.isFold,
    showContent: "",
  };
},
复制代码

2. 组件写法

组件代码

<style lang="scss">
  .fold {
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
    span, .icon {
      display: inline-block;
      vertical-align: middle;
    }
  }
</style>

<template>
  <p class="fold" @click="fold()">
    <span>{{move?"收起":"展开"}}</span>
    <x-icon v-show="move" class="icon" type="ios-arrow-up" size="22"></x-icon>
    <x-icon v-show="!move" class="icon" type="ios-arrow-down" size="22"></x-icon>
  </p>
</template>

<script>
  import {Icon} from "vux";

  export default {
    name: "Fold",
    components: {Icon},
    props: {
      showContent: {
        type: Boolean
      }
    },
    data() {
      return {
        move: this.showContent
      }
    },
    methods: {
      fold() {
        this.move = !this.move;
        this.$emit('receiveFold', this.move);
      }
    }
  };
</script>

复制代码

父组件代码

<div v-if="showContent">被折叠展开的地方</div>

<Fold v-if="showFold" :show-content="showContent" @receiveFold="receiveFold"></Fold>


import Fold from "../Fold.vue";
components: {Fold},
data() {
  return {
    showFold: this.params.isFold,
    showContent: !this.params.isFold,
  };
},
methods: {
  //接收Fold组件的信息
  receiveFold(res) {
    this.showContent = res;
  },
},
复制代码