xx-muh v0.0.10

xx-muh

A Vue.js project

开发和打包

切换webpack.config.js的entry

Use Components

* demo
Hello
import { Hello } from 'vue-muh'
Vue.use(Hello)
<Hello></Hello>

MuhSku

<muh-sku
 :goodlist="goodlist"
 :skulist="skulist"
 :option="option">
</muh-sku>

goodlist
[
  {
    skuPvStrs: '',
    skuCode: 'dwsasd12345678', // 商品id
    skus1: '387', //属性1
    skus2: '702',
    skus3: '601',
    stock_num: 0, // 库存
    price: 23000 // 价格
  }
]
skulist
[
  {
    pid: 1,
    pname: '颜色',
    values: [
      vid: 387,
      "imgUrl": "https://cbu01.alicdn.com/img/ibank/2018/420/661/8608166024_582723176.jpg",
      "vname": "卡其色"
    ]
  }
]
option
{
  degood: {
    img: 'https://cbu01.alicdn.com/img/ibank/2018/420/661/8608166024_582723176.jpg',
    price: 6500, // 分
    id: '12asdqewasdad',
    none_sku: true // 是否sku商品
  }, // 默认显示数据*
  needInit: false, // 每次在弹窗里打开是否需要初始化
  stockflag: false, // 是否开启库存逻辑*
  structure: {
    name: 'pname',
    id: 'pid',
    children: 'values',
    cstructure: {
      name: 'vname',
      id: 'vid',
      pricekey: 'price',
      oripricekey: 'oripricekey'
    }
  }
}

MuhBubble1

import { MuhBubble1 } from 'xx-muh'
Vue.use(MuhBubble1)
<muh-bubble1 :option="bubble1" :lists="lists">
  <template slot-scope="props">
    <div>{{props.item.goodsTitle}}</div>
  </template>
</muh-bubble1>

MuhPopup

import { MuhPopup } from 'xx-muh'
Vue.use(MuhPopup)
<muh-popup :show="popupShow" :position="'bottom'" @close="close">
  <div>内容</div>
</muh-popup>

LayTpfix 吸顶布局

import { LayTpfix } from 'xx-muh'
Vue.use(LayTpfix)
<lay-tpfix :option="layTpfix">
  <span slot="right" class="more"></span>
  <div class="topfix" slot="custom">
    <div class="head">
      head
    </div>
    <div class="tab">
      tab
    </div>
  </div>
  <div slot="listbox">
    start<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />asdasdasdasdasdasdasd<br />end
  </div>
</lay-tpfix>
注：custom 时，需要一个高度或者元素下每个元素有固定高度，否则会计算高度错误

RtAndLt

import { RtAndLt } from 'xx-muh'
Vue.use(RtAndLt)
<rt-and-lt :data="data">
  <div slot="right">自定义右边内容</div>
</rt-and-lt>

Dialog

import { Dialog } from 'xx-muh'
Vue.use(Dialog)

/* 方法一：直接以组件形式调用 ,具体的props和方法参考下面表格 */
<muh-dialog :value="visible" @cancel="onCloseDialog" @ok="onConfirmDialog">确认执行操作吗？</muh-dialog>

/* 引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $Dialog 方法，在所有组件内部都可以直接调用此方法
* confirm、alert和prompt方法都有两个参数，confirm和alert方法第一个参数为string类型，对应props为body属性，
* 第二个参数为object类型，可输入不同的props属性和值。
* prompt方法也有两个参数，第一个参数是string类型，对应props的title属性，第二个为object，可输入不同的props
* */
this.$Dialog
   .confirm('确认执行操作吗？')
   .then(() => {
    console.log('确认')
   }, () => {
      console.log('取消')
   })

props参数

回调函数说明

AsideNav

import { AsideNav } from 'xx-muh'
Vue.use(AsideNav)
<AsideNav :navData="asideData" className="aside-nav-top" @clickNav="onClickNav"></AsideNav>

props参数

回调函数说明

Build Setup

# install dependencies
npm install xx-muh --save

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.