uniapp使用uViewUI

最新推荐文章于 2023-12-04 17:03:05 发布

GHUIJS

最新推荐文章于 2023-12-04 17:03:05 发布

阅读量562

点赞数 1

分类专栏： uniapp vuejs js 文章标签： javascript

本文链接：https://blog.csdn.net/m0_43599959/article/details/120036338

版权

js 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

vuejs

22 篇文章 1 订阅

订阅专栏

uniapp

12 篇文章 1 订阅

订阅专栏

一、下载uViewUI，安装scss插件

uView UI已发布Sketch和Axure设计资源 - DCloud 插件市场

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

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

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

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

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

五、 main.js中全局挂载

//uvue-ui
import uView from 'uview-ui';
Vue.use(uView);

六、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}`;
	}
  }
}