app-list-default.vue 2.4 KB
Newer Older
zcdtk's avatar
zcdtk committed
1
<template>
2
    <div class="app-list-default">
zcdtk's avatar
zcdtk committed
3
        <div class="icon_box" :style="getstyle()"><ion-icon :name="geticon()" /></div>
KK's avatar
KK committed
4
        <div class="info_box" v-if=" dataItemNames.length > 0">
zcdtk's avatar
zcdtk committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
            <template v-for="(i,index) in dataItemNames" >
                <div v-if="index == 0" :key="index" class="title">{{item[i]}}</div>
                <div  v-else :key="index" class="info">{{item[i]}}</div>
            </template>
        </div>
        <div v-else class="info_box">
            <div class="title">{{item[major]}}</div>
            <div class="info">{{$t('messages')}}</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({
    i18n: {
        messages: {
            'ZH-CN': {
                messages: '[暂无内容]'
            },
            'EN-US': {
                messages: '[No data]'
            }
        }
    },
    components: {}
})
export default class AppDefaultList extends Vue {

    /**
     * 传入item
     *
     * @type {*}
     * @memberof AppDefaultList
     */
    @Prop() public item?: any;

    /**
     * 主属性
     *
     * @type {string}
     * @memberof AppDefaultList
     */
    @Prop({ default: 'srfmajortext' }) public major?: string;

    /**
     * 属性参数数组
     *
     * @type {Array}
     * @memberof AppDefaultList
     */
KK's avatar
KK committed
57
    @Prop({default:()=>{ return []}}) public dataItemNames?: Array<any>;
zcdtk's avatar
zcdtk committed
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

    /**
     * 图标数组
     *
     * @memberof AppDefaultList
     */
    public icon = ['airplane-outline', 'alarm-outline', 'albums-outline', 'alert-outline', 'american-football-outline', 'basket-outline', 'boat-outline', 'bug-outline', 'construct-outline', 'gift-outline'];

    /**
     * 颜色数组
     *
     * @memberof AppDefaultList
     */
    public color = ['#ba6fcc', '#46b4d9', '#cb99c5', 'pink', '#f59f00', '#9cd672', '#fa5a5a', '#f0d264', '#42bb85', '#7fccde'];

    /**
     * 获取icon
     *
     * @returns {string}
     * @memberof AppDefaultList
     */
    public geticon(): string {
        let num = Math.floor(Math.random() * 10);
        return this.icon[num];
    }

    /**
     * 获取样式
     *
     * @returns {string}
     * @memberof AppDefaultList
     */
    public getstyle(): string {
        let num = Math.floor(Math.random() * 10);
        return 'background: ' + this.color[num];
    }

}
</script>

<style lang="less">
@import "./app-list-default.less";
</style>