?

生活沒有模板，只需心燈一盞。 如果笑能讓你釋然，那就開懷一笑；如果哭能讓你減壓，那就讓淚水流下來。如果沉默是金，那就不用解釋；如果放下能更好地前行，就別再扛著。

一、引入 Vant UI

1、通過 npm 安裝

npm i @vant/weapp -S --production

??

2、修改 app.json

將 app.json 中的 “style”: “v2” 去除，小程序的新版基礎組件強行加上了許多樣式，難以覆蓋，不關閉將造成部分組件樣式混亂。

3、構建 npm 包

打開微信開發者工具，點擊 工具 -> 構建 npm，并勾選 使用 npm 模塊 選項，構建完成后，即可引入組件。

二、頁面與功能

1、頁面實現

<!--index.wxml-->
<van-cell-group inset><van-cell title="上聯" required title-width="3.2em"><input class="weui-input" maxlength="10" placeholder="春聯對歌民安國泰" bindinput="onChangeValue1" /></van-cell><van-cell title="下聯" required title-width="3.2em"><input class="weui-input" maxlength="10" placeholder="喜字成雙花好月圓" bindinput="onChangeValue2" /></van-cell><van-cell title="橫批" required title-width="3.2em"><input class="weui-input" maxlength="10" placeholder="國泰民安" bindinput="onChangeValue3" /></van-cell><van-cell required title-width="3.2em" title="字體" is-link value="{{font}}" bind:click="showFontsPopup" /><van-popup show="{{ showFonts }}" bind:close="onFontClose" round position="bottom" custom-style="height: 40%"><van-picker show-toolbar title="春聯字體" columns="{{ fontsColumns }}" bind:cancel="onFontCancel" bind:confirm="onFontConfirm" default-index="{{ 0 }}" /></van-popup><van-cell required title-width="3.2em" title="方向" is-link value="{{direction}}" bind:click="showDirectPopup" /><van-popup show="{{ showDirect }}" bind:close="onDirectClose" round position="bottom" custom-style="height: 40%"><van-picker show-toolbar title="字體方向" columns="{{ directionColumns }}" bind:cancel="onDirectCancel" bind:confirm="onDirectConfirm" default-index="{{ 0 }}" /></van-popup></van-cell-group><van-button disabled="{{disabled}}" color="linear-gradient(to right, #FF6034, #EE0A24)" block size="large" bind:click="onSubmit">{{submitText}}</van-button><van-button disabled="{{previewDisabled}}" color="linear-gradient(to right, #4bb0ff, #6149f6)" block size="large" bind:click="onPreviewImage">預覽圖片</van-button><van-grid column-num="3" border="{{ false }}"><van-grid-item use-slot wx:for="{{localImgUrlArray}}" wx:key="index" bind:click="onImgTap" id="{{index}}" data-imgsrc="{{item}}"><image  style="width: 100%; height: 90px;" src="{{item}}" mode="aspectFit">