easycom:传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下或uni_modules目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
比如前述举例的uni-rate组件,它导入到uni-app项目后,存放在了目录/components/uni-rate/uni-rate.vue。
同时它的组件名称也叫uni-rate,所以这样的组件,不用在script里注册和引用。
底部弹窗效果图:
一、引入
这里直接引入到uni_modules
目录
(如果是自己的组件 ,安装在项目的components目录下,目录例如:/components/uni-rate/uni-rate.vue。)
二、使用步骤
引入后的代码结构
<template>
<view class="content">
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">
<view class="content-pop">
我是底部弹窗
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
open() {
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('bottom')
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-pop{
width: 100vw;
height: 50vh;
background-color: #FFFFFF;
border-radius:25upx 25upx 0 0;
}
</style>