mr-menu-sidebar v0.2.5

mrMenuGoodsList

引入

import Vue from 'vue';
import { mrMenuGoodsList } from 'mr-menu-sidebar';

Vue.component('mrMenuGoodsList', mrMenuGoodsList);

代码演示

<mr-menu-goods-list
  :goods-list="goodsList"
  currency-symbol="$"
  type="scroll"
  :stickyTop="30"
  @change-order-number="changeOrderNumber"
  @click-goods-item="clickGoodsItem"
  @click-goods-image="clickGoodsImage"
/>

let id = 0;
export default {
  name: 'App',
  data () {
    return {
      goodsList: [
        {
          id: ++id,
          categoryName: '热炒',
          orderTotalNum: 55,
          goodsList: [
            {
              goodsId: ++id,
              goodsName: '热炒-椒盐虾球',
              price: 167.89,
              orderNum: 0,
              goodsImg: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
              goodsRemark: '就是河虾而已，没有特殊的东'
            }
          ],
          children: [
            {
              id: ++id,
              categoryName: '肉类',
              show: true,
              goodsList: [
                {
                  goodsId: ++id,
                  goodsName: '肉类-椒盐虾球',
                  price: 399,
                  goodsImg: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
                  orderNum: 2
                }
              ]
            }
          ]
        },
        {
          id: ++id,
          categoryName: '家常菜',
          goodsList: [
            {
              goodsId: ++id,
              goodsName: '热炒-椒盐虾球',
              price: 399,
              orderNum: 0,
              goodsImg: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
            }
          ],
          children: [
            {
              id: ++id,
              categoryName: '肉类',
              show: true,
              goodsList: [
                {
                  goodsId: ++id,
                  goodsName: '肉类-椒盐虾球',
                  price: 399,
                  orderNum: 0,
                  goodsImg: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
                }
              ]
            }
          ]
        },
      ]
    }
  },
  methods: {
    changeOrderNumber (itemData, changeOrderNumValue, isSubtract) {
      // console.log(itemData, changeOrderNumValue, isSubtract);
      itemData.orderNum = changeOrderNumValue;
    },
    clickGoodsItem (itemData) {
      console.log(itemData);
    },
    clickGoodsImage (itemData) {
      console.log(itemData, 'clickImage');
    }
  }
}

API

Props

Events

安装

# yarn安装 
yarn add mr-menu-sidebar

# npm安装
npm install mr-menu-sidebar --save

mr-menu-sidebar

快速上手

import Vue from 'vue';
import mrMenuSidebar from 'mr-menu-sidebar';

Vue.use(mrMenuSidebar);

按需加载

import Vue from 'vue';
import {
  mrMenuGoodsList,
  mrMenucollapseTransition,
  mrMenusticky,
  mrMenucounter
} from 'mr-menu-sidebar';

Vue.component('mrMenuGoodsList', mrMenuGoodsList);
Vue.component('mrMenucollapseTransition', mrMenucollapseTransition);
Vue.component('mrMenusticky', mrMenusticky);
Vue.component('mrMenucounter', mrMenucounter);