@lana-rm/more-ui

这个包是用在一个为了练习使用vue而创建的项目中的，不能直接用在正式的项目中。

This is just a package published for a project which is created to practice using vue，it is not enough to use directly in the commercial project.

##用法

首先安装好插件：

npm i @lana-rm/more-ui

然后在main.js文件中引入：

import MoreUI from '@lana-rm/more-ui'
Vue.use(MoreUI)

目前有分页、音频、日历、下拉选项框、输入框这几个组件。

在项目中使用的方式：

<template>
  <div id="app">
    <mo-pagination :info="paginationInfo" @change="changePage"/>
    <p>
      <mo-audio :info="audioInfo"/>
    </p>
    <p>
      <mo-select :info="selectInfo1" @change="changeSelect1"/>
      <mo-select :info="selectInfo2" @change="changeSelect2"/>
    </p>
    <p class="calendar">
      <mo-calendar @change="changeDate"/>
    </p>
    <p>
      <mo-input :info="title" @change="changeInput"/>
    </p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      paginationInfo: {
        count: 100, // 总条数
        pageSize: 8, // 每页显示条数
        pageCenterNum: 3 // 正中间显示几页
      },
      audioInfo: {
        singer: '薛之谦',
        url: '../static/test.mp3', // 是一个没有上传的本地测试文件的地址
        name: '摩天大楼'
      },
      selectInfo1: {
        caption: '标签',
        type: 1, // 0代表单选、1代表多选
        options: [
        {
          value: '搞笑',
          label: '搞笑'
        },
        {
          value: 'HE',
          label: 'HE'
        },
        {
          value: '完结',
          label: '完结'
        }]
      },
      selectInfo2: {
        caption: '发型',
        type: 0,
        options: [
          {
            value: '黑长直',
            label: '黑长直'
          },
          {
            value: '长卷发',
            label: '长卷发'
          },
          {
            value: '短发',
            label: '短发'
          }
        ]
      },
      title: {
        label: '标题'
      }
    }
  },
  methods: {
    changePage (val) {
      console.log(val, '分页内容')
    },
    changeSelect1(val) {
      console.log(val, '多选的内容')
    },
    changeSelect2(val) {
      console.log(val, '单选的内容')
    },
    changeDate (val) {
      console.log(val, '日期的内容')
    },
    changeInput (val) {
      console.log(val, '输入框的内容')
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
p {
  margin: 20px 0;
}
.calendar {
  margin-top: 45px;
}
</style>