# vue-mc

**Repository Path**: mliang/vue-mc

## Basic Information

- **Project Name**: vue-mc
- **Description**: 自定义的vue组件库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-08-08
- **Last Updated**: 2021-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# my-components
主要用记录实际开发中自定义的的vue组件

目前包括以下组件

> 移动端

- 数字输入框 NumberInput
- 数字输入键盘 NumberPanel
- 滚动选择框 SelectPanel
- 滚动联动选择框 SelectMultiplePanel
- 滑动选择器 SlideBar

## 项目运行

- yarn install
- yarn serve

> Demo示例
> http://localhost:8080/

## 移动端

### 数字输入框 NumberInput

![image](https://gitee.com/mliang/pictures/raw/master/vue-mc/NumberInput.png)

```html
<template>
  <div class="mobile" ref="Mobile">
    <NumberInput :max="100" :min="0" v-model="inputNumber1" />
  </div>
</template>
```
```js
import NumberInput from '@/components/mobile/NumberInput'

export default {
components: {
    NumberInput
},
data() {
    return {
    inputNumber1: 1
    }
}
```

### 数字输入键盘 NumberPanel

![image](https://gitee.com/mliang/pictures/raw/master/vue-mc/NumberPanel.png)



```html
<template>
  <div class="mobile" ref="Mobile">
	<NumberInput :max="100" :min="0" v-model="inputNumber2" :parent-refs="$refs" />
    <NumberPanel ref="NumberPanel" parent-name="Mobile" :parent-refs="$refs" />
  </div>
</template>
```

```js
import NumberInput from '@/components/mobile/NumberInput'
import NumberPanel from '@/components/mobile/NumberPanel'

export default {
components: {
    NumberInput,
    NumberPanel
},
data() {
    return {
        inputNumber2: 1
    }
}
```

### 滚动选择框 SelectPanel

![image](https://gitee.com/mliang/pictures/raw/master/vue-mc/SelectPanel.png)



```html
<template>
  <div class="mobile" ref="Mobile">
      <div class="field-select" @click="showSelectPanel('下列选择', 'name')">
          {{ selectValue }}
      </div>
      <SelectPanel ref="selectPanel" />
  </div>
</template>
```

```js
import SelectPanel from '@/components/mobile/SelectPanel'

export default {
  name: 'Mobile',
  components: {
    SelectPanel
  },
  data() {
    return {
      selectValue: '',
      selectOptions: [{ name: '名称1' }, { name: '名称2' }, { name: '名称3' }, { name: '名称4' }, { name: '名称5' }],
      selectItem: {}
    }
  },
  methods: {
    showSelectPanel(title, field) {
      this.$refs.selectPanel.show(title, this.selectOptions, field, (value, item) => {
        this.selectValue = value
        this.selectItem = item
      })
    }
  }
}
```

### 滚动联动选择框 SelectMultiplePanel

![image](https://gitee.com/mliang/pictures/raw/master/vue-mc/SelectMultiplePanel.png)

```html
<template>
  <div class="mobile" ref="Mobile">
      <div class="field-select" @click="showSelectMultiplePanel()">
          {{ selectMultipleValue }}
       </div>
      <SelectMultiplePanel ref="selectMultiplePanel" />
  </div>
</template>
```

```js
import SelectMultiplePanel from '@/components/mobile/SelectMultiplePanel'

export default {
  name: 'Mobile',
  components: {
    SelectMultiplePanel
  },
  data() {
    return {
      selectMultipleValue: '',
      selectMultipleOptions: [{ name: '名称1', group: [{ subname: '名称11' }, { subname: '名称12' }] }, { name: '名称2', group: [{ subname: '名称21' }, { subname: '名称22' }] }, { name: '名称3', group: [{ subname: '名称31' }, { subname: '名称32' }] }],
      selectMultipleItem: {}
    }
  },
  methods: {
    showSelectMultiplePanel() {
      this.$refs.selectMultiplePanel.show('多选择滚动框', this.selectMultipleOptions, ['name', 'subname'], (value, item) => {
        this.selectMultipleValue = value
        this.selectMultipleItem = item
      })
    },
  }
}
```

### 滑动选择器 SlideBar

![image](https://gitee.com/mliang/pictures/raw/master/vue-mc/SlideBar.png)

```html
<template>
  <div class="mobile" ref="Mobile">
      <SlideBar v-model="slidebarValue" :scales="[0, 100, 200, 300, 400, 500]"/>
  </div>
</template>
```

```js
import SlideBar from '@/components/mobile/SlideBar'

export default {
components: {
    SlideBar
},
data() {
    return {
        slidebarValue: 1
    }
}
```