mu-ui-vue2 v0.1.2

mu-ui-vue2

建立项目

npm install

编译和开发热加载

npm run serve

针对生产环境进行编译

npm run build

检查和修复文件

npm run lint

打包为库

npm run lib

简介

• 基于vue2.x的 Vue UI 组件库

使用

1. 安装

npm i npm i mu-ui-vue2

2. 导入样式

import 'mu-ui-vue2/dist/mu-ui-vue2.css'

3. 全局注册

// src/main.js
// import MuUI from '../packages/index'
import MuUI from 'mu-ui-vue2'

// 全局注册组件
Vue.use(MuUI)

3. 按需导入

// src/main.js
// 按需导入
// import { Button } from '../packages/index'
import { Button } from 'mu-ui-vue2'
Vue.component(Button.name, Button)

字体图标

• 导入 font-awesome 字体图标

// 全局引入字体图标
import './assets/fonts/iconfont.css'

• 预览图标
  • src\assets\fonts\demo_index.html
  • 查看font-class选项

开发者字体配置

• 定制私有前缀
  • 打开阿里图标
  • 修改项目设置
    • mu-ui-vue2：前缀m-icon-；默认字体mui-iconfont；
  • 下载到本地，修改src\assets\fonts\iconfont.css

/* .mui-iconfont 默认 */
/* 修改为属性选择器 class类名包含 m-icon- 的就应用这个字体  */
[class*='m-icon-'] {
  font-family: "mui-iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

组件

按钮(Button)

参数

事件

消息提示 Message

<template>
  <div class="message">
    <Mu-Button @click="showMsg">消息提示</Mu-Button>
  </div>
</template>

<script>
export default {
  name: 'Mu-ui',
  methods: {
    showMsg () {
      // 调用
      this.$message({
        type: 'success', // 类型
        msg: 'hello', // 提示信息
        time: 5000, // 显示时间
        autoClose: false, // 自动关闭
        center: true, // 文字居中
        position: 'leftTop' // 位置
      })
    },
  }
}
</script>

气泡弹框 Pop

<template>
  <div class="pop">
    <Mu-Button @click="showPop">气泡弹框</Mu-Button>
  </div>
</template>

<script>
export default {
  name: 'Mu-ui',
  methods: {
    showMsg () {
      // 调用
      showPop1 () {
        console.log('2')
        this.$pop({
          msg: '我是警告！',
          type: 'shake',
          time: 1000
        })
      },
    },
  }
}
</script>

消息框(MessageBox)

用法

<template>
  <div class="messageBox">
    <h2>消息框 MessageBox</h2>
    <h3>confirm</h3>
    <Mu-Button @click="showMessageBox">confirm 确认对话框</Mu-Button>
    <h3>alert</h3>
    <Mu-Button @click="showMessageBox2">alert 警示对话框</Mu-Button>
  </div>
</template>

<script>
export default {
  name: 'Mu-ui',
  methods: {
    showMessageBox () {
      // confirm 确认对话框
      this.$confirm({
        sureCallback: () => {
          this.$message({
            type: 'success',
            msg: '已确认'
          })
        },
        cancelCallback: () => {
          this.$message({
            type: 'info',
            msg: '已取消'
          })
        }
      })
    },
    showMessageBox2 () {
      // alert 警示对话框
      this.$alert({
        sureCallback: () => {
          this.$message({
            type: 'success',
            msg: '已确认'
          })
        }
      })
    }
  }
}
</script>

对话框(Dialog)

最简单用法

<template>
  <div class="dialog">
    <h2>对话框 Dialog</h2>
    <Mu-Button
      type='primary'
      @click="isShow = true"
    >显示 Dialog 对话框</Mu-Button>
    <!-- <Mu-Dialog title="温馨提示"></Mu-Dialog> -->

    <!-- <Mu-Dialog :isShow='isShow' @update:isShow='isShow = false'> -->
    <!-- .sync语法糖 相当于上面的简写形式 -->
    <Mu-Dialog
      width='60%'
      top='20vh'
      :isShow.sync='isShow'
    >
      <template v-slot:title>
        <!-- <h2>温馨提示：</h2> -->
        <span>温馨提示：</span>
      </template>

      <template v-slot:body>
        <h2>这是一段信息...</h2>
      </template>

      <template v-slot:footer>
      </template>
    </Mu-Dialog>
  </div>
</template>

<script>
export default {
  name: 'Mu-ui',
  data () {
    return {
      isShow: false
    }
  }
}
</script>

自定义 确认与取消 回调函数

<template>
  <div class="dialog">
    <h2>对话框 Dialog</h2>
    <Mu-Button
      type='primary'
      @click="isShow = true"
    >显示 Dialog 对话框</Mu-Button>
    <!-- <Mu-Dialog title="温馨提示"></Mu-Dialog> -->

    <!-- <Mu-Dialog :isShow='isShow' @update:isShow='isShow = false'> -->
    <!-- .sync语法糖 相当于上面的简写形式 -->
    <Mu-Dialog
      width='60%'
      top='20vh'
      :isShow.sync='isShow'
      :sureCallback='handleSure'
      :cancelCallback='handleCancel'
    >
      <template v-slot:title>
        <!-- <h2>温馨提示：</h2> -->
        <span>温馨提示：</span>
      </template>

      <template v-slot:body>
        <span>这是一段信息...</span>
      </template>

      <template v-slot:footer>
      </template>
    </Mu-Dialog>
  </div>
</template>

<script>
export default {
  name: 'Mu-ui',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleSure () {
      this.isShow = false
      console.log('我点击了确定')
      this.$message({
        type: 'success',
        msg: '已确认'
      })
    },
    handleCancel () {
      this.isShow = false
      console.log('我点击了取消')
      this.$message({
        type: 'info',
        msg: '已取消'
      })
    }
  }
}
</script>

自定义底部按钮

• 可不传递 确认与取消 回调函数
• 但要本地定义，并手动设置对话框的显示与隐藏

<template>
  <div class="dialog">
    <h2>对话框 Dialog</h2>
    <Mu-Button
      type='primary'
      @click="isShow = true"
    >显示 Dialog 对话框</Mu-Button>
    <!-- <Mu-Dialog title="温馨提示"></Mu-Dialog> -->

    <!-- <Mu-Dialog :isShow='isShow' @update:isShow='isShow = false'> -->
    <!-- .sync语法糖 相当于上面的简写形式 -->
    <Mu-Dialog
      width='60%'
      top='20vh'
      :isShow.sync='isShow'
    >
      <template v-slot:title>
        <!-- <h2>温馨提示：</h2> -->
        <span>温馨提示：</span>
      </template>

      <template v-slot:body>
        <span>这是一段信息...</span>
      </template>

      <template v-slot:footer>
        <!-- 通过具名插槽自定义底部按钮，可不传递 确认与取消 回调函数 -->
        <Mu-Button
          type='danger'
          @click="handleCancel"
        >取消</Mu-Button>
        <Mu-Button
          type='primary'
          @click="handleSure"
        >确定</Mu-Button>
      </template>
    </Mu-Dialog>
  </div>
</template>

<script>
export default {
  name: 'Mu-ui',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleSure () {
      this.isShow = false
      console.log('我点击了确定')
      this.$message({
        type: 'success',
        msg: '已确认'
      })
    },
    handleCancel () {
      this.isShow = false
      console.log('我点击了取消')
      this.$message({
        type: 'info',
        msg: '已取消'
      })
    }
  }
}
</script>

输入框(Input)

复合型输入框

• 通过具名插槽，可使用复合型输入框

<Mu-Input
  type='text'
  name='domainName'
  placeholder='请输入域名'
  v-model="domainName"
>
  <!-- 前缀 -->
  <template slot="prepend">Http://</template>
  <!-- 后缀 -->
  <template slot="append">.com</template>
</Mu-Input>

计数器(InputNumber)

切换(Switch)

单选框(Radio)

单选框组(RadioGroup)

用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

复选框(Checkbox)

复选框组(CheckboxGroup)

用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model

复选框全选 (CheckboxAll)

<template>
  <div class="CheckboxAll">
    <h2>复选框全选 CheckboxAll</h2>
    <Mu-CheckboxAll>
      <!-- 全选按钮 -->
      <template v-slot:checkAll>
        全选：<Mu-Checkbox
          name="checkAll"
          :indeterminate='isIndeterminate'
          v-model="checkAll"
          @change="handleCheckAllChange"
        ></Mu-Checkbox>
      </template>

      <!-- 选项 -->
      <template v-slot:options>
        <Mu-CheckboxGroup
          v-model="checkedItems"
          @change="handleCheckedOptionsChange"
        >
          <template v-for="item in options">
            <Mu-Checkbox
              :key="item"
              :name="item"
              :label="item"
            ></Mu-Checkbox>
          </template>
        </Mu-CheckboxGroup>
      </template>
    </Mu-CheckboxAll>
  </div>
</template>

<script>
export default {
  name: 'Mu-ui',
  data () {
    return {
      checkAll: false, // 是否全选
      options: ['上海', '北京', '广州', '深圳', '东莞'], // 全部选项
      checkedItems: ['东莞'], // 选中的选项
      isIndeterminate: true, // 用以表示 checkbox 的不确定状态，一般用于实现全选的效果
    }
  },
  methods: {
    // 改变全选按钮状态
    handleCheckAllChange (val) {
      console.log('CheckAll val ==>', val) // Boolean
      // 如果val存在，即全选；如果val不存在，即取消全选
      this.checkedItems = val ? this.options : []
      // 是否选择了，都没有全选
      this.isIndeterminate = false
    },
    // 改变单个选项状态
    handleCheckedOptionsChange (val) {
      console.log('CheckedOptions val ==>', val)
      // 全选的数量
      const checkedCount = val.length
      // 控制全选按钮是否选中
      this.checkAll = checkedCount === this.options.length
      // 是否选择了，都没有全选
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length
    }
  }
}
</script>

表单(Form)

表单项(Form-item)

文件上传 (UploadFile)

• 聚合类型 - 功能齐全
  • 支持多文件上传
  • 支持拖拽上传
  • 支持缩略图
  • 支持文件预览与下载
  • 支持显示上传进度
  • 支持限制文件类型与大小
  • 支持大文件切片上传，断点续传

<Mu-UploadFile
  uploadAddress='http://127.0.0.1:3000'
  fieldName='filename'
  drag
  :disabled='false'
  multiple
  accept='.png,.jpg,.jpeg,.mp4'
  :limit='5'
  :videoMaxSize='1 * 1024 * 1024 * 1024'
  :imgMaxSize='2 * 1024 * 1024'
  :sliceUploadMinFileSize='5 * 1024 * 1024'
  @successListInfo='lookSuccessListInfo'
>
  <!-- 提示信息 -->
  <template v-slot:tipInfo>
    <span>只能上传 .mp4 格式的视频文件，大小不能超过2GB！</span>
    <span>或 .png /.jpg /.jpeg 格式的图片文件，大小不能超过2MB！</span>
    <p>禁止上传：名称不同但内容相同的文件</p>
  </template>
</Mu-UploadFile>

<script>
export default {
  name: 'test',
  methods: {
    // 查看上传成功列表信息
    lookSuccessListInfo (successList) {
      console.log('上传成功列表 ==> ', successList)
    }
}
</script>

预览图片 (PreviewImage)

<template>
  <div class="previewImage">
    <h2>预览图片 PreviewImage</h2>
    <Mu-Button @click="previewImage">预览图片</Mu-Button>
  </div>
</template>

<script>
export default {
  name: 'test',
  methods: {
    previewImage () {
      console.log('预览图片')
      this.$previewImage({
        urlList: [
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
        ]
      })
    }
  }
}
</script>

裁切图片 (ClipImage)

<template>
  <div class="clipImage">
    <h2>裁切图片 ClipImage</h2>
    <Mu-ClipImage @saveImage="saveImage"></Mu-ClipImage>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      clipImgInfo: '' // 裁切图片信息
    }
  },
  methods: {
    // 保存裁切图片信息
    saveImage (payload) {
      this.clipImgInfo = payload
    },
  }
}
</script>