<!-- 功能：; 作者：ZXS; 时间：2022年10月27日 09:35:48-->
<template>
    <div id="CommonNoDataTest" class="pd20 line-height24">
        <p>1、可选无数据图基础类型：</p>
        <div class="flex-wrap">
            <div v-for="(item, index) in typeArr" :key="index" class="box border">
                <pre v-if="index" class="language-html mtb0" v-html="toHtml(`<CommonNoData :type='${item}' />`)" />
                <pre v-else class="language-html mtb0" v-html="toHtml(`<CommonNoData  />`)" />
                <CommonNoData :type="item" size="mini" no-data-style="ptb0" class="box-item" />
            </div>
        </div>
        <p>2、带刷新或者自定义图片文字按钮：</p>
        <div class="flex">
            <div class="w-300 border mr20">
                <pre class="language-html mtb0" v-html="toHtml(`<CommonNoData :need-refresh='true' />`)" />
                <CommonNoData size="mini" no-data-style="ptb0" :need-refresh="true" class="box2-item" />
            </div>
            <div class="box2 border">
                <pre class="language-html mtb0" v-html="toHtml(htmlCont)" />
                <CommonNoData size="mini" no-data-style="ptb0" :source="{ img: require('../../assets/img/noData/noSettle.png'), text: '我是自定义文字', customBtn: '自定义按钮'}" class="box2-item" />
            </div>
        </div>
        <p>3、自定义样式和尺寸：</p>
        <div class="flex">
            <div class="w-300">
                <pre class="language-html mtb0" v-html="toHtml(`<CommonNoData  />`)" />
                <CommonNoData class="box2-item border" />
            </div>
            <div class="ml20">
                <pre class="language-html mtb0" v-html="toHtml(`<CommonNoData size='mini' no-data-style='ptb0' />`)" />
                <CommonNoData size="mini" no-data-style="ptb0" class="box2-item border" />
            </div>
        </div>
    </div>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import { CommonNoData } from '@/components';
export default {
    // 组件名称
    name: 'CommonNoDataTest',
    // 局部注册的组件
    components: { CommonNoData },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            typeArr: [undefined, 'customer', 'data', 'file', 'indent', 'log', 'network', 'people', 'search', 'settle', 'team'],
            htmlCont: `<CommonNoData :source="{ img: require('../../assets/img/noData/noSettle.png'), text: '我是自定义文字', customBtn: '自定义按钮'}" />`
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        toHtml(str) {
            return Prism.highlight(str, Prism.languages.html, 'html');
        },
        toJs(str) {
            return Prism.highlight(str, Prism.languages.js, 'js');
        } }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#CommonNoDataTest{
    .box{
        width: 300px;
        height: 240px;
        margin: 0 20px 20px 0;
        box-sizing: border-box;
    }
    .box-item{
    height: 200px;
    }
    .box2-item{
    height: 250px;}
    .w-300{width: 300px;}
    .mtb0{
    margin-top: 0px;
    margin-bottom: 0px;
    }
}
</style>
