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>

| Attribute | Description | Type | | ---- | ---- | ---- | | goodlist | 商品列表 | Array | | skulist | sku列表 | Array | | option | 自定义参数 | Array |

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>

| Attribute | Description | Type | | ---- | ---- | ---- | | lists | 数据 | Array | | option | 自定义参数 | Array | | transtime | 移动一格时间，默认800 | Inter | | intervaltime | 定时器时间，等待时间，默认1800 | Inter |

MuhPopup

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

| Attribute | Description | Type | | ---- | ---- | ---- | | show | 显示 | Boolean | | position | 位置，目前仅bottom | Array | | close | 关闭，必，show=false | Function |

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 时，需要一个高度或者元素下每个元素有固定高度，否则会计算高度错误

| Attribute | Description | Type | | ---- | ---- | ---- | | option | 参数 | Object | | custom | 是否自定义顶部 | Boolean | | customfun | 自定义函数设置，custom为true时，必 | Function | | style | 风格类型：'sina'/'' | String | | title | 标题 | String | | right | 右边类型：share分享 | String | | backFun、backFun2 | 左边点击 | Function | | rightFun | 右边点击 | Function |

RtAndLt

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

| Attribute | Description | Type | | ---- | ---- | ---- | | data | 数据 | Object | | lt | 左边数据列表 | Array | | ltact | 激活的index,默认0 | Inter | | clickLeft | 左边点击（item, index） | Function |

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参数

| Attribute | Type | Description | | ---- | ---- | ---- | | value | Boolean | 用来控制弹框的显示与隐藏 | | name | string | 弹框类型名字，当要使用prompt类型弹框时，name必须为prompt | | title | string | string类型，弹框标题 | | body | string | 文字或者html字符串 | | showCancel | Boolean | 用于控制取消按钮的显示与隐藏，默认为true | | showOk | Boolean | Boolean类型，用于控制确定按钮的显示与隐藏，默认为true | | showFooter | Boolean | 用于控制底部取消和确定按钮的显示与隐藏，默认为true | | cancelText | string | 用于修改取消按钮的文案，默认为取消 | | okText | string | 用于修改确定按钮的文案，默认为确定 | | backgroundClose | Boolean | 用于控制是否可以通过点击背景来关闭弹框，默认为false | | duration | number | 用于展示弹框xx时间后关闭，单位ms | | input | Object | { required: null, maxlength: null, pattern: null }，required表示必填，Boolean类型；maxlength表示最大长度，number类型；pattern过滤，值为字符串或者正则 | | mini | Boolean | 用于控制是否显示小尺寸，一般prompt类型时使用 |

回调函数说明

| Attribute | Type | Description | | ---- | ---- | ---- | | cancel | function | 点击取消按钮的回调事件 | | ok | function | 点击确定按钮的回调事件，当为prompt弹框时会将输入的值作为该回调函数的参数 |

AsideNav

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

props参数

| Attribute | Type | Description | | ---- | ---- | ---- | | navData | array | [{name: '热门', ref: 'hot'}] 侧边导航栏数据，该数组元素类型为object，其中name为String类型，用于侧边栏展示的文字，ref为String类型，点击侧边栏字符跳转的位置，点击文案会跳转到对应ref属性的dom元素的初始位置| | headerRef | string | 页面头部要fixed定位的元素的ref属性，跳转时会将该元素的高度考虑进去，避免被遮挡 | | className | string | 样式名，该样式名会加到asideNav最外层元素上 |

回调函数说明

| Attribute | Type | Description | | ---- | ---- | ---- | | clickNav | function | 点击侧边栏按钮时触发的回调事件,该函数会将点中的文案对应的对象数据返回 |

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.