造一个属于自己的 UI 库

最新推荐文章于 2024-08-01 15:35:54 发布

qiangdada521

最新推荐文章于 2024-08-01 15:35:54 发布

阅读量2.8k

点赞数

分类专栏：合格前端文章标签： vue components 前端 webpack npm

本文链接：https://blog.csdn.net/github_36369819/article/details/79201219

版权

摘要: 轮子总得造上一造~

一、项目介绍

vui : 一个私人的vue ui 组件库（移动端为主）

文档官网

已有组件

swiper

scroller

message

modal

table

picker

select

dropdown

二、安装下载

npm install x-vui -S

三、快速开始

3.1 构建项目（配合vue-cli）

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-vui-project
# 安装依赖，并下载x-vui
cd my-vui-project
npm install && npm install x-vui
# 项目启动 默认端口localhost:8080
npm run dev

3.2 引入vui组件库

你可以引入整个 vui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 vui。

3.2.1 完整引入

在main.js中写入

import Vue from 'vue'
import vui from 'x-vui'
import 'x-vui/lib/vui-css/index.css';

Vue.use(vui)

3.2.2 按需部分引入

在main.js中写入（假如我只需要Scroller和Select组件）

import Vue from 'vue'
import {
  Scroller,
  Select
  // ...
} from 'x-vui'
import 'x-vui/lib/vui-css/scroller.css';
import 'x-vui/lib/vui-css/select.css';

Vue.component(Scroller.name, Scroller)
Vue.component(Select.name, Select)

3.2.3 全局注册vui插件

注：完整引入了vui，则无需再注册插件

import Vue from 'vue';
import { 
  $Toast, 
  $Dialog 
  // ...
} from 'x-vui';

Vue.prototype.$toast = $Toast
Vue.prototype.$dialog = $Dialog

四、组件用法

4.1 swiper

可以自己调配自己想要的swiper，不一定得是轮播图

4.1.1 Attributes

参数	说明	类型	可选值	默认值
type	swiper类型	string	swiper(正常)/thum(缩略)	swiper
auto	自动播放时长	number	—	5000
items	swiper展示的列表	array	—	[]
showIndicators	是否展示swiper小圆点	boolean	—	true
styles	swiper样式控制	object	—	{}
resetTitle	重置title内容	string	—	—

4.1.2 Events

事件名称	说明	回调参数
change	swiper滑动回调	当前swiper item索引

4.1.3 用法

<template>
  <div class="swiper-page">
    <p>正常swiper</p>
    <x-swiper type='swiper' :items='items' :styles="{height: '180px'}"></x-swiper>
    <p>缩略swiper</p>
    <x-swiper type='swiper' :items='items' :type="'thum'" :styles="{height: '208px'}"></x-swiper>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        require('assets/beauty_1.png'),
        require('assets/beauty_2.png'),
        require('assets/beauty_3.png'),
        require('assets/beauty_4.png'),
        require('assets/beauty_5.png')
      ],
    }
  }
}
</script>

<style lang="stylus" scoped>
.swiper-page {
  height auto
}
</style>

4.2 scroller（下拉刷新上拉加载）

4.2.1 Attributes

参数	说明	类型	可选值	默认值
onRefresh	下拉回调	function	—	—
onInfinite	上拉回调	function	—	—
width	scroller宽度	string	—	100%
height	scroller高度	string	—	100%
isLoadMore	是否展示上拉加载	boolean	—	true
refreshText	下拉文本内容	string	—	下拉刷新
noDataText	无数据文本	string	—	没有更多数据啦~
refreshLayerColor	下拉文本颜色	string	—	#AAA
loadingLayerColor	上拉文本颜色	string	—	#AAA
animating	是否有动画	boolean	—	true
animationDuration	动画间隔	number	—	250
bouncing	是否有反弹效果	string	—	true
cssClass	content css class	string	—	—

4.2.2 用法

<style scoped>
.scroller-page {
  height: 330px
}
ul {
  padding: 20px 0
}
li {
  width: 100%;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
</style>

<template>
  <div class="scroller-page">
    <x-scroller
      :on-refresh="refresh"
      :on-infinite="infinite"
      :noDataText="noDataText"
    >
      <!-- content is here -->
      <ul>
        <li>数据1</li>
        <li>数据2</li>
        <li>数据3</li>
        <li>数据4</li>
        <li>数据5</li>
        <li>数据6</li>
      </ul>
    </x-scroller>
  </div>
</template>

<script>
export default {
  data () {
    return {
      noDataText: '没有更多数据啦~'
    }
  },
  methods: {
    refresh (done) {
      setTimeout(done, 1000)
      this.noDataText = ''
      console.log('refresh');
    },
    infinite (done) {
      setTimeout(done, 1000, true)
      this.noDataText = '没有更多数据啦~'
      console.log('infinite');
    }
  }
}
</script>

4.3 search

4.3.1 Attributes

参数	说明	类型	可选值	默认值
async	是否进行节流	boolean	—	true
timeout	搜索节流时长	number	—	100
styles	search样式	object	—	—
placeholder	placeholder	string	—	'搜索'
autofocus	是否自动聚焦(iOS端autofocus无效)	boolean	—	—
clear	进行搜索是否清空search框内容	boolean	—	false