vue 自定义组件的写法与用法详解

目录

<template>
  <div class="cusdealed">
    <div class="submited" v-if="showStatus==1">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/repectSubmit.png" alt="">
      </div>
      <div class="submitTip tipwidth">该单据已经提交过了，不用重复提交哦！</div>
    </div>
     <div class="submited" v-if="showStatus==2">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" alt="">
      </div>
      <div class="submitTip">单据已失效，不能扫单入库！</div>
    </div>
    <div class="submited" v-if="showStatus==3">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" alt="">
      </div>
      <div class="submitTip">找不到该单据，不能扫单入库！</div>
    </div>
  </div>
</template>
<script type="text/javascript" src="./logic.js"></script>
<style lang="less" scoped>
  @import './style.css';
</style>
style.less
//样式文件
@import '../../common/less/px2rem.less';
@import '../../common/less/base.less';
.cusdealed {
 .submited {
  .submitRes {
   .px2rem(150);
   width: @px2rem;
   height: @px2rem;
  }
  .submitRes {
   .px2rem(227);
   margin: @px2rem auto 0;
   .resImg {
    width: 100%;
    height: 100%;
    display: block;
   }
  }
  .submitTip {
  .px2rem(58);
  //  height: @px2rem;
   font-family: PingFangSC-Regular;
   font-weight: 400;
   color: rgba(51, 51, 51, 1);
   line-height: @px2rem;
  }
  .submitTip{
    .px2rem(32);
    font-size: @px2rem;
  }
  .tipwidth{
    .px2rem(384);
    width: @px2rem;
  }
  .submitTip{
    .px2rem(50);
    margin: @px2rem auto 0;
  }
 }
}
logic.js
//逻辑文件
import { Spinner } from 'vux'
export default {
  name: 'cusDealing',
  data() {
    return {
     showStatus:1
    }
  },
  components: {
    Spinner,
  },
  props: {
    // showStatus: Number
   },
   computed: {
   },
   watch: {
    showStatus(val) {
     console.log(val, 'showStatus---')
     return val;
    }
   },
  methods: {
  },
  mounted() {
  }
}

 <!-- 处理完弹窗 -->
  <div class="dealed" :style="'padding-top:'+marginTop+'px;height:'+bodyheight+'px;'" v-if="dealStatus==2">
    <div class="dealedContent">
      <Cusdealed :showStatus="showStatus"></Cusdealed>
      <div class="Iknow" @click="Iknow">我知道了</div>
    </div>
  </div>