feat: 修改view标签为view-block

src/packages/address/index.vue

@@ -6,46 +6,50 @@
     @open="closeWay = 'self'"
     v-model:show="showPopup"
   >
-    <view class="nut-address">
-      <view class="title">
-        <view
+    <view-block class="nut-address">
+      <view-block class="title">
+        <view-block
           class="arrow-back"
           @click="switchModule"
           v-if="showModule == 'custom' && type == 'exist' && backBtnIcon"
           ><nut-icon :name="backBtnIcon" color="#CCCCCC"></nut-icon
-        ></view>
-        <view class="arrow-back" v-else></view>
+        ></view-block>
+        <view-block class="arrow-back" v-else></view-block>
 
-        <view v-if="showModule == 'custom'">{{ customAddressTitle }}</view>
-        <view v-if="showModule == 'exist'">{{ existAddressTitle }}</view>
+        <view-block v-if="showModule == 'custom'">{{
+          customAddressTitle
+        }}</view-block>
+        <view-block v-if="showModule == 'exist'">{{
+          existAddressTitle
+        }}</view-block>
 
-        <view class="arrow-close" @click="handClose('cross')"
+        <view-block class="arrow-close" @click="handClose('cross')"
           ><nut-icon
             v-if="closeBtnIcon"
             :name="closeBtnIcon"
             color="#CCCCCC"
             size="18px"
           ></nut-icon
-        ></view>
-      </view>
+        ></view-block>
+      </view-block>
 
       <!-- 请选择 -->
-      <view class="custom-address" v-if="showModule == 'custom'">
-        <view class="region-tab">
-          <view
+      <view-block class="custom-address" v-if="showModule == 'custom'">
+        <view-block class="region-tab">
+          <view-block
             class="tab-item"
             :class="[index == tabIndex ? 'active' : '']"
             v-for="(item, key, index) in selectedRegion"
             :key="index"
             :ref="key"
             @click="changeRegionTab(item, key, index)"
-            ><span>{{ getTabName(item, index) }}</span></view
+            ><view>{{ getTabName(item, index) }}</view></view-block
           >
 
-          <view class="region-tab-line" ref="regionLine"></view>
-        </view>
+          <view-block class="region-tab-line" ref="regionLine"></view-block>
+        </view-block>
 
-        <view class="region-con">
+        <view-block class="region-con">
           <ul class="region-group">
             <li
               v-for="(item, index) in regionList[tabName[tabIndex]]"
@@ -67,8 +71,8 @@
               >{{ item.name }}
             </li>
           </ul>
-        </view>
-      </view>
+        </view-block>
+      </view-block>
 
       <!-- 配送至 -->
       <div class="exist-address" v-if="showModule == 'exist'">
@@ -89,13 +93,13 @@
                 size="13px"
               ></nut-icon>
 
-              <span>{{
+              <view>{{
                 item.provinceName +
                   item.cityName +
                   item.countyName +
                   item.townName +
                   item.addressDetail
-              }}</span>
+              }}</view>
             </li>
           </ul>
         </div>
@@ -108,7 +112,7 @@
           <div class="btn">{{ customAndExistTitle }}</div>
         </div>
       </div>
-    </view>
+    </view-block>
   </nut-popup>
 </template>
 <script lang="ts">

src/packages/infiniteloading/index.vue

@@ -1,43 +1,45 @@
 <template>
-  <view
+  <view-block
     class="nut-infiniteloading"
     ref="scroller"
     @touchstart="touchStart"
     @touchmove="touchMove"
     @touchend="touchEnd"
   >
-    <view class="nut-infinite-top" ref="refreshTop" :style="getStyle">
-      <view class="top-box" v-if="!slotRefreshLoading">
+    <view-block class="nut-infinite-top" ref="refreshTop" :style="getStyle">
+      <view-block class="top-box" v-if="!slotRefreshLoading">
         <nut-icon
           class="top-img"
           name="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
         ></nut-icon>
-        <view class="top-text">松开刷新</view>
-      </view>
+        <view-block class="top-text">松开刷新</view-block>
+      </view-block>
 
       <slot name="refreshLoading" v-else></slot>
-    </view>
+    </view-block>
 
-    <view class="nut-infinite-container"><slot></slot></view>
+    <view-block class="nut-infinite-container"><slot></slot></view-block>
 
-    <view class="nut-infinite-bottom">
+    <view-block class="nut-infinite-bottom">
       <template v-if="isInfiniting">
-        <view v-if="!slotLoading" class="bottom-box">
+        <view-block v-if="!slotLoading" class="bottom-box">
           <nut-icon
             class="bottom-img"
             name="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
           ></nut-icon>
-          <view class="bottom-text">加载中···</view>
-        </view>
+          <view-block class="bottom-text">加载中···</view-block>
+        </view-block>
 
         <slot name="loading" v-else></slot>
       </template>
       <template v-else-if="!hasMore">
-        <view class="tips" v-if="!slotUnloadMore">{{ unloadMoreTxt }}</view>
+        <view-block class="tips" v-if="!slotUnloadMore">{{
+          unloadMoreTxt
+        }}</view-block>
         <slot name="unloadMore" v-else></slot>
       </template>
-    </view>
-  </view>
+    </view-block>
+  </view-block>
 </template>
 <script lang="ts">
 import {

src/packages/pullrefresh/demo.vue

@@ -12,7 +12,7 @@
           <div class="content" id="pull">
             <div class="main">
               <div
-                class="text-data"
+                class="pull-data"
                 v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
                 :key="item"
                 >我是测试数据 {{ item }}</div
@@ -36,7 +36,7 @@
           <div class="contentH" id="pullH">
             <div class="mainH">
               <div
-                class="text-data"
+                class="pull-data"
                 v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
                 :key="item"
                 >我是测试数据 {{ item }}</div
@@ -92,19 +92,39 @@ export default createDemo({
   .mainH {
     display: flex;
     height: 100%;
-    .text-data {
-      height: 90% !important;
-      width: 120px !important;
+    .pull-data {
       flex-shrink: 0;
-      padding: 0 !important;
-      margin: 2px 10px 0 0 !important;
+      display: flex;
+      align-items: center;
+      height: 90%;
+      width: 120px;
       justify-content: center;
+      padding: 0;
+      margin: 2px 10px 0 0;
+      background: white;
+      border-radius: 7px;
+      box-shadow: 0px 1px 7px 0px #edeef1;
+      line-height: 19px;
+      font-size: 13px;
+      color: #666666;
     }
   }
 }
 .content {
   .main {
-    .text-data {
+    .pull-data {
+      margin: 15px auto 20px;
+      padding-left: 16px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 46px;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 7px;
+      box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+      line-height: 19px;
+      font-size: 13px;
+      color: rgba(102, 102, 102, 1);
       &:first-child {
         margin-top: 0 !important;
       }