可能很多人會用uni-app時還在想用vue的伴生ui element ui
但其實我覺得element ui 在PC端雖然效果不錯 但在跨端 的開發中甚至不然用vant ui
那么我們今天要介紹的是uni-app官方提供的ui組件庫uni-ui
首先我們訪問網址
https://ext.dcloud.net.cn/search?q=
然后在插件市場的輸入框中輸入你想要的組件
例如我輸入日歷
這下面就會有可以選擇的組件
然后我們點擊去
點擊HBuilder X引入 如果你是第一次使用那這里應該會叫你先登錄
然后上方就會給出提示，點打開
然后開發工具就會問你是否確定下載組件工具 點確定
下載成功后不需要手動匯入
直接用就好了
日歷參考代碼如下
<template>
<view class="content">
<view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
/>
<button @click="open">打開日歷</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
open(){
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
}
}
};
</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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/394235.html
標籤：其他
上一篇：springboot專案的創建