VUE 缺省页父子组件

来源：互联网发布：atan2函数java 编辑：程序博客网时间：2024/05/19 15:40

子组件default.vue

<template>    <div class="ev_content" v-show="show">        <div class="ev_top_b" v-show="noNet">            <a href="javascript:;">            <!-- <a href="no_load.html"> -->                <img v-bind:src="noLoad" class="b_l" />                <span>{{noNetMessage}}</span>                <img v-bind:src="whiteLfet" class="b_r" />            </a>        </div>        <div class="notice_d" v-show="noResult">            <img v-bind:src="infoImage" class="d_photo" />            <div class="d_prompt">                <p class="d_1">{{message}}</p>                <p class="d_2">{{message2}}</p>                <div class="d_load" v-show="button" @click="goButton">                    <span>{{buttonText}}</span>                </div>            </div>        </div>        <div class="notice_d" v-show="!noResult">            <img v-bind:src="errorImage" class="d_photo" />            <div class="d_prompt">                <p class="d_1">{{errorMessage}}</p>                <p class="d_2">{{errorMessage2}}</p>                <div class="d_load" v-show="button" @click="goButton">                    <span>{{buttonText}}</span>                </div>            </div>        </div>    </div></template><script>export default {    props: {        show : {            type : Boolean,            default : true        },        noNet : {            type : Boolean,            default : false        },        noResult : {            type : Boolean,            default : true        },        noLoad : {            type : String,            default : require('../assets/img/no_load.png')        },        whiteLfet : {            type : String,            default : require('../assets/img/white_lfet.png')        },        noNetMessage : {            type : String,            default : '网络请求失败请检查您的网络设置'        },        infoImage : {            default : require('../assets/img/noSearchGoods.png')        },        errorImage : {            default : require('../assets/img/404.png')        },        message: {            type: String,            default: '没有搜索结果╭(╯^╰)╮'        },        message2 : {            type: String,            default: '没有找到相关的宝贝'        },        errorMessage : {            type : String,            default : '出问题啦╭(╯^╰)╮'        },        errorMessage2 : {            type : String,            default : '稍后再试试吧'        },        button : {            type : Boolean,            default : false        },        buttonText : {            type : String,            default : '重新加载'        },        buttonMethod : {            type : Function        }    },    data() {        return {        }    },    methods:{        goButton(){            //在父组件中监听v-on:goButton            this.$emit('goButton')        }    }}</script><style src="../assets/css/evaluate_seccess.css"></style>

样式也贴出来吧，前端写的~

body, html { font-size: 100%;   padding: 0; margin: 0;}html {    font-size : 16px;}body{    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;    background: #F8F8F8;    width: 100%;}a{color: #2fa0ec;text-decoration: none;outline: none;}.main{    width: 100%;    height: auto;}.ev_top{    width: 100%;    height: 2.75rem;    border-bottom: 1px solid #CCCCCC;    position: fixed;    top: 0;    z-index: 2;}.ev_top .ev_top_r{    width: 100%;    height: 2.75rem;    line-height: 2.75rem;    text-align: center;    background: #FFFFFF;}.ev_top .ev_top_r img{    width: 0.6rem;    height: 1rem;    margin: 0.8rem;    float: left;}.ev_top .ev_main1{    color: #666666;    font-size: 1.125rem;    padding-left: 3rem;}.ev_top .ev_top_l{    float: right;    font-size: 0.9375rem;    color: #999;    margin-right: 0.8rem;}.ev_content{    width: 100%;    height: 42%;    z-index: 11;    position: fixed;    top: 50%;    left: 50%;    /*-webkit-transform: translate3d(-50%, -50%, 0);    -moz-transform: translate3d(-50%, -50%, 0);    -ms-transform: translate3d(-50%, -50%, 0);    transform: translate3d(-50%, -50%, 0);    -webkit-user-select: none;    overflow: hidden;    -webkit-backface-visibility: hidden;    backface-visibility: hidden;    -webkit-transition: .2s;    transition: .2s;*/    padding-bottom: 1rem;    margin-left: -50%;    margin-top: -29%;}.ev_top_b{    width: 100%;    height: 2.4375rem;    background: rgba(0,0,0,0.5);    font-size: 0;}.ev_top_b .b_l{    width: 1.25rem;    height: 1.25rem;    margin: 0.59375rem 0.625rem 0.59375rem 0.9375rem;    float: left;}.ev_top_b span{    color: #fff;    font-size: 0.875rem;    line-height: 2.4375rem;}.ev_top_b .b_r{    width: 0.625rem;    height: 1.5rem;    margin: 0.46875rem 0;    margin-right: 0.625rem;    float: right;}.notice_d{    width: 100%;    height: auto;    text-align: center;}.notice_d .d_photo{    width: 9.0625rem;    height: 9.0625rem;    margin: 0rem 0 3.125rem 0;}.d_prompt p{    margin: 0;    font-size: 0;}.d_prompt .d_1{    width: 40%;    margin: 0 auto;    height: auto;    word-break: break-word;    font-size: 0.9375rem;    color: #222222;    text-align: center;}.d_prompt .d_2{    width: 60%;    height: auto;    margin: 0 auto;    word-break: break-word;    font-size: 0.875rem;    color: #999999;    text-align: center;    margin-top: 0.4685rem;}.d_load{    width: 100%;    font-size: 0;    text-align: center;    float: left;    margin-top: 1.625rem;}.d_load span{       font-size: 0.75rem;    color: #D62433;    padding: 0.375rem 1.3rem;    border: 1px solid #d62433;    border-radius: 1rem;}

父组件中使用

导入子组件 import defaultPage from '../../components/default.vue'
注册组件 components : {defaultPage}
引用标签 <defaultPage></defaultPage>

<template> <div>   <defaultPage :show="isShowDefaultPage" :infoImage="noOrders"     :message="message" :message2="message2" :noResult="isSuccess" :button="button" v-on:goButton="goButton"></defaultPage> </div></template><script>import defaultPage from '../../components/default.vue'export default {    data() {        return {            isShowDefaultPage: false,            noOrders: require('../../assets/img/noOrders.png'),            message: '您还没有相关的订单',            message2: '可以去看看有哪些想买的',            infoImage:require('../../assets/img/noSearchGoods.png'),            isSuccess : true,            button : true        }    },    components : {        defaultPage    },    methods : {        goButton(){           //...        }    },    created : {        //从sessionStorage取信息        var userdata = { micardnum: sessionStorage.getItem("userName") }        //获取订单        this.$http.get('/rest/orders/ordersinfoList', { params: userdata }        , { emulateJSON: true }).then((data) => {            if(data.data.rows.length == 0){               this.isShowDefaultPage = true;            }        }).catch(error=>{            //状态码            console.log(error.response.status)             this.isShowDefaultPage = true;            //报错页面            this.isSuccess = false;          })    }}</script>

附上Vue.js文档 Vue.js

阅读全文

1 0