uniapp中擴展組件uni ui的使用

首先，不管使用哪一種擴展插件，都須要確認已經執行了一下操做：

uni-app 項目，進入項目目錄（下面兩步必不可少）

npm init -y

npm install @dcloudio/uni-ui

一、例如--日曆

<template>
    <view>
        <!-- template中的內容正常在官網複製 -->
        <uni-calendar :insert="true" :lunar="true" :start-date="'2019-3-2'" :end-date="'2019-5-20'" @change="change"
         ></uni-calendar>
    </view>
</template>

<script>
    // 引入方式統一如下面這種,只更換解構部分
    import {uniCalendar} from '@dcloudio/uni-ui' export default { // 引入後進行組件註冊,便可使用
 components: { uniCalendar }, data() { return {}; }, methods: { change(e) { console.log(e); } } }; </script>

<style lang="scss">

</style>

二、例如--滾動通知欄

<template>
    <view>
        <h2>index頁面</h2>
        <!-- 寫入標籤模板 -->
        <uni-notice-bar scrollable="true" single="true" text="[單行] 這是 NoticeBar 通告欄，這是 NoticeBar 通告欄，這是 NoticeBar 通告欄"></uni-notice-bar>
    </view>
</template>

<script>
    // 引入對應擴展插件
    import {uniNoticeBar} from '@dcloudio/uni-ui' export default { data() { return { } }, onLoad() { }, methods: { }, // 註冊插件
 components: { uniNoticeBar } } </script>

<style>

</style>