backBox.vue 1.35 KB
<template>
    <div class="back-box" v-if="backs">
		<div class="box">
			<div class="buttons-box" v-if="backs && backs.funcs && backs.funcs.back && backs.funcs.back.icon">
				<img :src="backs.funcs.back.icon" class="back" @click="back" />
			</div>
			<div class="title" v-if="backs.title">{{backs.title}}</div>
			<div class="func-box" v-if="backs && backs.funcs && backs.funcs.funcArray">
				<img class="func" :src="item.icon" v-for="(item, index) in backs.funcs.funcArray" :key="index" @click="func(backs, index)" />
			</div>
		</div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                
            }
        },
        props: ["backs"],
		methods: {
			
			/**
			 * 返回
			 */
			back() {
				this.$emit("back");
			},

			/**
			 * 功能按钮
			 * @param {object} backs [props对象]
			 * @param {int} index [索引]
			 */
			func(backs, index) {
				if (typeof this.backs.funcs === "object" && typeof this.backs.funcs.funcArray === "object" && typeof this.backs.funcs.funcArray[index] === "object" && typeof this.backs.funcs.funcArray[index].func === "function") {
					this.backs.funcs.funcArray[index].func(backs);
				}
			}
		}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less">
    @import './backBox';
</style>