uni-app的uni-ui组件使用

╰+攻爆jí腚メ 2021-07-24 18:25 474阅读 0赞

# 一点睛 #

1 官网：

[http://uniapp.dcloud.io/component/README?id=uniui][http_uniapp.dcloud.io_component_README_id_uniui]

2 说明

以Calendar 日历组件为例进行说明

# 二 实例 #

1 导入插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

2 项目中导入该插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

3 导入后的效果

![20200917200903846.png][]

# 三 代码 #

<template>
    	<view class="content">
    		
    		
    		<test v-if="flag" :title="title" @myEvent="getNum"></test>
    		<button type="primary" @click="checkTest">切换test组件</button>
    		这是子组件传递过来的数据{
       {num}}
    		<testA></testA>
    		<testB></testB>
    		
    		<uni-calendar 
    		:insert="true"
    		:lunar="true" 
    		:start-date="'2019-3-2'"
    		:end-date="'2019-5-20'"
    		@change="change"
    		 />
    	</view>
    </template>
    
    <script>
    	/* 引入组件 */
    	import test from '../../components/test.vue'
    	import testA from '../../components/a.vue'
    	import testB from '../../components/b.vue'
        import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
    	// 导入日历组件
    	export default {
    		data() {
    			return {
    				title: 'Hello',
    				flag: true,
    				num:0
    			}
    		},
    		onLoad() {
    			console.log('页面加载了')
    		},
    		onShow() {
    			console.log('页面显示了')
    		},
    		onReady() {
    			console.log('页面初次渲染完成了')
    		},
    		onHide() {
    			console.log('页面隐藏了')
    		},
    		methods: {
    			checkTest() {
    				this.flag = !this.flag
    			},
    			// 4 子给父传参
    			getNum(num){
    				this.num = num
    				console.log(num)
    			}
    		},
    		// 组件组件
    		components: {
    			test: test,
    			testA:testA,
    			testB:testB,
    			// 注册日志组件
    			uniCalendar
    
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>

# 四 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

[http_uniapp.dcloud.io_component_README_id_uniui]: http://uniapp.dcloud.io/component/README?id=uniui
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/24dcb30566ac48f6964b1c3b4b32bd34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/602000b62ba64eeaaa1a1fb1582824ed.png
[20200917200903846.png]: /images/20210724/691f66eb8234494a8345e570570a906d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/7eb4aae6193a45c0ba365307a772c012.png