uniapp UI库 uView UI的使用
- 一、新建`uniapp`项目
- 二、安装下载`uViewUI`组件库
- 方式一：[插件市场官网](https://ext.dcloud.net.cn/plugin?id=1593)直接下载
- 方式二、利用npm下载
- 三、修改相关配置
- 四、使用组件
- 修改`index.vue`文件示例：
- 结果展示：
- 下拉框展示
- 日历展示
一、新建uniapp项目
笔者用的Hbuilder app开发版
二、安装下载uViewUI组件库
方式一：插件市场官网直接下载
官网下载解压到项目文件根目录
方式二、利用npm下载
bash：
npm i uview-ui
三、修改相关配置
-
main.js引入uView库
// main.js
import uView from 'uview-ui';
Vue.use(uView);
-
App.vue引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
-
uni.scss引入全局scss变量文件
/* uni.scss */
@import "uview-ui/theme.scss";
-
pages.json配置easycom规则(按需引入)
// pages.json
{
"easycom": {
// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
// npm安装方式
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
// 下载安装方式
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
四、使用组件
由于使用了easycom配置所以使用的时候不需要import组件，十分的方便直接拿来用就可以了,组件手册参考uViewUI官网，下面写个案例。
修改index.vue文件示例：
一个下拉框、一个步骤条、一个日历
<template>
<view class="">
<u-dropdown>
<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
</u-dropdown>
<u-steps :list="numList" :current="1"></u-steps>
<u-calendar v-model="show" :mode="mode"></u-calendar>
<u-button @click="show = true">打开</u-button>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
mode: 'date',
value1: 1,
value2: 2,
options1: [{
label: '默认排序',
value: 1,
},
{
label: '距离优先',
value: 2,
},
{
label: '价格优先',
value: 3,
}
],
options2: [{
label: '去冰',
value: 1,
},
{
label: '加冰',
value: 2,
},
],
numList: [{
name: '下单'
}, {
name: '出库'
}, {
name: '运输'
}, {
name: '签收'
},
],
}
},
}
</script>
结果展示：
下拉框展示
日历展示
总结：uView UI使用十分的方便、且美观可以提高效率，友友们快用起来吧
