组件传值

一. 组件注册

把组件写入公用基础组件中：

 import  tipModal from '/tipModal';
const dateV = {
install: function(Vue) {
    Vue.compontent('tip-Modal', tipModal);
    }
}

二.使用组件

在页面中使用：

<temlate>
    <div>
        <tip-Modal ref="tipModaldom"></tip-Modal>
    </div>
</temlate>
<script>
this.$refs.tipModalDom.showTipMoalEvent("succ","提交成功！")；
</script>

三.写组件页面

<temlate>
    <div class="tip-modal-zhezhao" v-show="isTipModalShow">
        <div class="tip-modal">
            <div class="tip-row">
                <i class="ic success-ico" v-if="tipCode==='succ'"></i>
                <i class="ic fail-ico" v-else></i>
                <b class="tip-txt">{{tipMsg}}</b>
            </div>
            <div class="sj-group">
                <span class="btn save-btn" @click="isTipModalShow=false">{{$t('common.ok')}}</span>
            </div>
        </div>
    </div>
</temlate>
<script>
important Vue from 'vue';
export default {
  name:"tipModal",
  data() {
    return {
        isTipModalShow: false, // 弹框显隐
        tipMsr: "", //提示文字
        tipCode: "" //图标类型 成功 失败
    }；
  },
    mounted() {
      this.init();
    },
    methods: {
        init() {},
        /**
          *打开提示弹框
          *@method showTipModalEvent
          *@param tipCode 图标类型   ‘succ’表示成功图标  其余都是失败图标
          *@param tipMsg 提示文字
          *@returns {Void}
          */
        showTipModalEvent(tipCode, tipMsg) {
            this.isTipModalShow = true;
            this.tipMsr=  tipMsr;
            this.tipCode=  tipCode ;
        }
    }
}
</script>
<style lang="less" scoped>
.tip-modal-zhezhao {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:# rgba(0, 0, 0, .4);
  z-index: 10000;
}

div.tip-modal{
position:absolute;
left: 50%;
top:50%;
-ms-trannsform: translate(-50%, -50%);
-webkit-trannsform: translate(-50%, -50%);
trannsform: translate(-50%, -50%);
padding: 35px 10px 25px;
background: rgba(0, 56, 160, 1);
border: 1px solid #005aff;
z-index: 100;
text-align: center;
}

.tip-row {
padding: 0 60px;
margin-bottom: 15px;
}

.ic{
  marginleft: 15px;
}

.tip-txt {
  font-size: 18px;
}

.ic{
display:inline-block;
background-repeat: np-repeat;
background-position: center center;
background-size:contain;
vertical-align:middle;
cursor: pointer;
}

.success-ico{
width: 36px;
height: 36px;
background-image: url("success_ico.png");
}

.faild-ico{
width: 36px;
height: 36px;
background-image: url("faild_ico.png");
}

.btn{
width: 47%;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 12px;
color:#fff;
-webkit-border-radius:2px;
border-radius:2px;
cursor: pointer;
}

.save-btn{
width: 55px;
font-size: 12px;
baground-color:#fff;
color:#005aff;
margin-right:0;
}
</style>