VUE组件的封装

封装的VUE组件

进度条组件

<template>
  <div id="progress-father">
    <div id="progress-son" :style="{width:percentage+'%',background:background}"></div>
    <span>{{percentage}}%</span>
  </div>
</template>

<script>
export default {
  props: ["percentage", "background"],
  data() {
    return {};
  }
};
</script>

<style>
#progress-father {
  height: 15px;
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  background: #ddd;
  position: relative;
}
#progress-son {
  height: 15px;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
  transition: width 1s;
}
#progress-father span {
  position: absolute;
  height: 15px;
  line-height: 15px;
  top: 0;
  right: 5px;
  color: #fff;
  font-size: 10px;
}
</style>

使用

<pro :percentage="progress" background="#ff520e"></pro>
<script>
    import pro from "../xxx/progress.vue";
    export default {components: { pro }};
</script>

移动端提示框组件

<template>
  <div class="myModal" v-show="isShow">
    <div class="modalWrap">
      <div class="title">提示</div>
      <div class="content">{{modalContent}}</div>
      <slot></slot>
      <div class="footer">
        <div class="cancel" @click="cancel">取消</div>
        <div class="sure" @click="sure">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["modalContent"],
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    cancel() {
      this.isShow = false;
    },
    sure() {
      // 点击确定事件,<modal modal-content="这是公共组件的调用" @modalSure="modalClick"></modal>中绑定的事件就会被触发,在调用组件页面,就可以通过modalClick中的data取到modal公共组件传递过来的值
      this.$emit("modalSure", "这是modal公共组件传过来的值");
    }
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
@import "../assets/css/base.scss";
.myModal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  z-index: 2000;
  .modalWrap {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fafafa;
    text-align: center;
    .title {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
    }
    .content {
      width: 100%;
      height: 1.2rem;
      line-height: 1.2rem;
    }
    .footer {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      .cancel,
      .sure {
        float: left;
        width: 50%;
      }
      .cancel {
        background: #222;
        color: red;
      }
      .sure {
        background: gainsboro;
      }
    }
  }
}
</style>

使用

<modal modal-content="这是公共组件的调用" @modalSure="modalClick">
      <div style="text-align:center;height:.6rem;line-height:.6rem">这是插入到组件slot中的值</div>
</modal>
<script>
import modal from "../xxx/modal.vue";
export default {
  components: {
    modal
  },
  methods: {
    modalClick(data) {
      alert(data);
    }
  }
}
</script>