cr/src/view/accessories/accessories.vue

<template>
    <div class="accessories_page">
        <div id="child_menu">
	        <div class="left">
		        <label>行数</label>
		        <input type="text" style="width: 40px" v-model="sum_copy"/>
		        <label @click="changeSum" style="cursor: pointer">确认</label>
	        </div>
	        <ul>
                <li  v-on:click="selectNav('按键')" v-bind:class="select_nav == '按键'? 'active' : ''">按键</li>
                <li  v-on:click="selectNav('方框')" v-bind:class="select_nav == '方框'? 'active' : ''">方框</li>
                <li  v-on:click="selectNav('页码')" v-bind:class="select_nav == '页码'? 'active' : ''">页码</li>
                <li  v-on:click="selectNav('单号')" v-bind:class="select_nav == '单号'? 'active' : ''">单号</li>
                <li  v-on:click="selectNav('小页面')" v-bind:class="select_nav == '小页面'? 'active' : ''">小页面</li>
	        </ul>
            <div class="right">
                <label>设置</label> &nbsp;&nbsp;&nbsp; <label>删除</label>
            </div>
        </div>
        <child v-bind:sum="this.sum"></child>
        <div class="tab-container">
            <div class="container">
                <div class="tab-container-box" v-if="select_nav == '按键'"><abutton></abutton></div>
                <div class="tab-container-box" v-if="select_nav == '方框'"><asquareFrame></asquareFrame></div>
                <div class="tab-container-box" v-if="select_nav == '页码'"><apagination></apagination></div>
                <div class="tab-container-box" v-if="select_nav == '单号'"><aorderNumber></aorderNumber></div>
                <div class="tab-container-box" v-if="select_nav == '小页面'"></div>
            </div>
        </div>
    </div>
</template>
<script>
import child from '@/components/common/list';
import abutton from '@/view/accessories/button';
import aorderNumber from '@/view/accessories/orderNumber';
import apagination from '@/view/accessories/pagination';
import asquareFrame from '@/view/accessories/squareFrame';

let data = () => {
  return {
    collapsed: false,
	sum:8,
    sum_copy:1,
    select_nav: '按键', //导航选中
  }
}

let changeSum = function(){
    this.sum = this.sum_copy * 8
}

//选择展示哪个容器
let selectNav = function(str){
    this.select_nav = str;
}

export default {
    data: data,
    methods: {
      changeSum,
      selectNav
    },
    components:{
      child,
      abutton,
      aorderNumber,
      apagination,
      asquareFrame
    }
}
</script>