Menu-Goods

说明

可以用与uni-app的左侧点击右侧滚动，右侧滑动左侧锚点选中的组件，具体效果见下图。

Github地址

https://github.com/guguji5/menu-goods

安装

npm install menugoods

引入

import MenuGoods from 'menugoods'

使用

<menu-goods 
    :left-width="150"  
    @change="handleChange" 
    :selectedGood="selectedGood" 
    :menus="menus" 
    :goods="goods" 
    :scrollHeight="scrollHeight">
</menu-goods>

属性说明

|属性名称|类型|是否必填|说明| |----|----|----|---| |menus|string[]|必填|左侧菜单，直接渲染成左侧菜单，也接受object[]格式,如果为object，则默认展示name属性| |goods|object[]|必填|右侧商品，必须有menu属性，其决定着其从属于那个左侧菜单，name属性为默认展示，id用于判断是否选中| |scrollHeight|number|必填|scroll-view组件必须传入高度才可滚动| |leftWidth|number|选填|左侧菜单宽度，默认120px| |selectedGood|object|必填|选中商品，应包含id，name，menu属性| |dynamicMenusAndGoods|boolean|选填|是否需要监听menus和goods属性重新渲染数据| |selectKey|string|选填|goods匹配选中项时的属性，默认为id| |goodKey|string|选填|goods匹配menu菜单时的属性，默认为menu| |menuKey|string|选填|menus为object[]时此项必填，可设置menus中与goodKey匹配的属性| |goodTopMargin|number|选填|good的上边距，出现上下外边距合并时可设置此属性来保证滚动位置的精准|

事件

|事件名称|说明|返回值| |----|----|----| |change|点击右侧商品时触发|返回选中商品|

方法

|方法名称|说明|返回值| |----|----|----| |reset|当menus和goods变化时可手动重置该组件，默认选中第一项|无|

SLOT

|name|说明| |----|----| |默认|右侧商品可用slot传入，接受child变量，其为goods子项|

<menu-goods :left-width="150"  @change="handleChange" :selectedGood="selectedGood" :menus="menus" :goods="goods" :scrollHeight="scrollHeight">
    <template  v-slot="{ child }">
        <view>{{ child.name }}</view>
        <view class="price">￥{{ child.price }}元</view>
    </template>
</menu-goods>

<template>
  <view class="wrapper">
      <h1 id="component-test">西少爷肉夹馍（西二旗店）</h1>
      <menu-goods :left-width="150"  @change="handleChange" :selectedGood="selectedGood" :menus="menus" :goods="goods" :scrollHeight="scrollHeight">
        <template  v-slot="{ child }">
          <view>{{ child.name }}</view>
          <view class="price">￥{{ child.price }}元</view>
        </template>
      </menu-goods>
  </view>
</template>

<script>
import MenuGoods from '../lib/menu-goods.vue'

export default {
  components: {
    MenuGoods,
  },
  data () {
    return {
      selectedGood:{
        id:1,
        menu:'超人气套餐',
        name:'鲜辣鸡肉混沌组合',
        price:29.9
      },
      menus: ['超人气套餐','招牌原味馍','招牌酸辣粉','经典凉皮','鲜汤小混沌'],
      goods: [{
        id:1,
        menu:'超人气套餐',
        name:'鲜辣鸡肉混沌组合',
        price:29.9
      },{
        id:2,
        menu:'超人气套餐',
        name:'健康蔬菜酸辣粉套餐',
        price:34.89
      },{
        id:3,
        menu:'超人气套餐',
        name:'安心自然酸辣粉套餐',
        price:29.9
      },{
        id:4,
        menu:'超人气套餐',
        name:'招牌孜然混沌套餐',
        price:49.9
      },{
        id:5,
        menu:'招牌原味馍',
        name:'健康蔬菜夹馍',
        price:9
      },{
        id:6,
        menu:'招牌原味馍',
        name:'鲜辣鸡肉夹馍',
        price:13.5
      },{
        id:7,
        menu:'招牌原味馍',
        name:'孜然肉夹馍',
        price:12
      },{
        id:8,
        menu:'招牌原味馍',
        name:'腊汁肉夹馍',
        price:13.5
      },{
        id:9,
        menu:'招牌酸辣粉',
        name:'鸡骨浓汤酸辣粉',
        price:20
      },{
        id:10,
        menu:'招牌酸辣粉',
        name:'鸡骨浓汤酸辣粉（大份）',
        price:25
      },{
        id:11,
        menu:'经典凉皮',
        name:'金牌油泼辣子面皮',
        price:21
      },{
        id:12,
        menu:'经典凉皮',
        name:'金牌油麻将面皮',
        price:23
      },{
        id:13,
        menu:'经典凉皮',
        name:'油泼辣子面皮',
        price:23
      },{
        id:14,
        menu:'经典凉皮',
        name:'麻将面皮',
        price:23
      },{
        id:15,
        menu:'鲜汤小混沌',
        name:'麻酱传统鲜肉小混沌',
        price:24
      },{
        id:16,
        menu:'鲜汤小混沌',
        name:'麻酱荠菜鲜肉小混沌',
        price:23
      },{
        id:17,
        menu:'鲜汤小混沌',
        name:'麻酱虾仁鲜肉小混沌',
        price:24
      },{
        id:18,
        menu:'鲜汤小混沌',
        name:'传统鲜肉小混沌',
        price:20
      }],
      scrollHeight: 0
    }
  },
  watch: {

  },
  methods: {
    handleChange (good) {
      this.selectedGood = good
    }
  },
  async mounted () {
    const query = uni.createSelectorQuery().in(this)
    query.select('#component-test').boundingClientRect(res => {
      this.scrollHeight = uni.getSystemInfoSync().windowHeight - res.height 
    }).exec()
  },
}
</script>

<style lang="scss" scoped>
  #component-test{
    text-align: center;
    padding: 10px;
    font-size: x-large;
    background: white;
  }
  .price{
    color:chocolate;
    font-size: 14px;
  }
</style>