uniapp使用uViewUI

Posted 2021-09-17 GHUIJS

一、下载uViewUI，安装scss插件

https://ext.dcloud.net.cn/plugin?id=1593

二、直接拷贝uview-ui文件夹到项目根目录

三、 uni.scss引入全局scss变量文件

@import 'uview-ui/theme.scss';

 四、App.vue引入基础样式(注意style标签需声明scss属性支持)

@import "uview-ui/index.scss";

五、pages.json配置easycom规则(按需引入)

{
    "easycom": {
        // 下载安装方式
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    "pages": [
        // ......
    ]
}

六、页面中直接引用

<u-picker v-model="isTimeShow" @confirm="checkQueryTime" mode="time" :params="params"></u-picker>

export default {
	data() {
		return {
			isTimeShow: false,
			params: {
				year: true,
				month: true,
			},
            queryTime:''
		}
	},
	timeClick() {
			this.isTimeShow = true;
	},
	checkQueryTime(e) {
		this.queryTime = `${e.year}-${e.month}`;
	}
  }
}

参考： 

uViewUI快速上手