fix: view-block warn #469

src/packages/__VUE/actionsheet/index.scss

@@ -1,5 +1,7 @@
 .nut-actionsheet-panel {
+  display: block;
   .nut-actionsheet-title {
+    display: block;
     padding: 10px;
     margin: 0;
     text-align: center;
@@ -16,6 +18,7 @@
     }
 
     .nut-actionsheet-sub-title {
+      display: block;
       font-size: $font-size-small;
       color: $title-color;
       margin-inline-start: 0px;
@@ -23,6 +26,7 @@
   }
 
   .nut-actionsheet-menu {
+    display: block;
     list-style: none;
     padding: 0;
     margin: 0;
@@ -30,6 +34,7 @@
 
   .nut-actionsheet-cancel,
   .nut-actionsheet-item {
+    display: block;
     //   height: 24px;
     padding: 10px;
     line-height: 24px;
@@ -37,6 +42,7 @@
     color: $title-color;
     text-align: center;
     background-color: #fff;
+    cursor: pointer;
   }
 
   .desc {
@@ -50,10 +56,6 @@
     color: #999;
   }
 
-  .nut-actionsheet-item {
-    cursor: pointer;
-  }
-
   .nut-actionsheet-item-disabled {
     color: #e1e1e1 !important;
     cursor: not-allowed;

src/packages/__VUE/actionsheet/index.vue

@@ -8,14 +8,12 @@
       @click-overlay="close"
     >
       <view class="nut-actionsheet-panel">
-        <view-block v-if="title" class="nut-actionsheet-title">{{
-          title
-        }}</view-block>
-        <view-block class="nut-actionsheet-item desc" v-if="description">{{
+        <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
+        <view class="nut-actionsheet-item desc" v-if="description">{{
           description
-        }}</view-block>
+        }}</view>
         <view class="nut-actionsheet-menu" v-if="menuItems.length">
-          <view-block
+          <view
             v-for="(item, index) of menuItems"
             class="nut-actionsheet-item"
             :class="{ 'nut-actionsheet-item-disabled': item.disable }"
@@ -24,15 +22,15 @@
             @click="chooseItem(item, index)"
             >{{ item[optionTag]
             }}<view class="subdesc">{{ item[optionSubTag] }}</view>
-          </view-block>
+          </view>
         </view>
-        <view-block
+        <view
           class="nut-actionsheet-cancel"
           v-if="cancelTxt"
           @click="cancelActionSheet"
         >
           {{ cancelTxt }}
-        </view-block>
+        </view>
       </view>
     </nut-popup>
   </view>

src/packages/__VUE/address/index.scss

@@ -1,4 +1,5 @@
 .nut-address {
+  display: block;
   &__header {
     display: flex;
     justify-content: space-between;
@@ -11,6 +12,7 @@
     color: #333;
     line-height: 20px;
     &__title {
+      display: block;
       color: #262626;
       font-size: 18px;
     }
@@ -18,6 +20,7 @@
 
   // 请选择
   .custom-address {
+    display: block;
     .region-tab {
       position: relative;
       margin-top: 32px;
@@ -28,7 +31,7 @@
 
       .tab-item {
         margin-right: 30px;
-
+        display: block;
         &.active {
           font-weight: bold;
         }
@@ -55,6 +58,7 @@
     }
 
     .region-con {
+      display: block;
       margin: 20px 20px 0;
       .region-group {
         padding-top: 15px;
@@ -81,6 +85,7 @@
 
   // 配送至
   .exist-address {
+    display: block;
     margin-top: 15px;
 
     .exist-address-group {

src/packages/__VUE/address/index.vue

@@ -6,34 +6,34 @@
     @open="closeWay = 'self'"
     v-model:visible="showPopup"
   >
-    <view-block class="nut-address">
-      <view-block class="nut-address__header">
-        <view-block class="arrow-back" @click="switchModule">
+    <view class="nut-address">
+      <view class="nut-address__header">
+        <view class="arrow-back" @click="switchModule">
           <nut-icon
             :name="backBtnIcon"
             color="#cccccc"
             v-if="privateType == 'custom' && backBtnIcon"
           ></nut-icon>
-        </view-block>
+        </view>
 
-        <view-block class="nut-address__header__title">
+        <view class="nut-address__header__title">
           {{ privateType == 'custom' ? customAddressTitle : existAddressTitle }}
-        </view-block>
+        </view>
 
-        <view-block class="arrow-close" @click="handClose('cross')">
+        <view class="arrow-close" @click="handClose('cross')">
           <nut-icon
             v-if="closeBtnIcon"
             :name="closeBtnIcon"
             color="#cccccc"
             size="18px"
           ></nut-icon>
-        </view-block>
-      </view-block>
+        </view>
+      </view>
 
       <!-- 请选择 -->
-      <view-block class="custom-address" v-if="privateType == 'custom'">
-        <view-block class="region-tab">
-          <view-block
+      <view class="custom-address" v-if="privateType == 'custom'">
+        <view class="region-tab">
+          <view
             class="tab-item"
             :class="[index == tabIndex ? 'active' : '']"
             v-for="(item, key, index) in selectedRegion"
@@ -42,12 +42,12 @@
             @click="changeRegionTab(item, key, index)"
           >
             <view>{{ getTabName(item, index) }}</view>
-          </view-block>
+          </view>
 
-          <view-block class="region-tab-line" ref="regionLine"></view-block>
-        </view-block>
+          <view class="region-tab-line" ref="regionLine"></view>
+        </view>
 
-        <view-block class="region-con">
+        <view class="region-con">
           <ul class="region-group">
             <li
               v-for="(item, index) in regionList[tabName[tabIndex]]"
@@ -69,11 +69,11 @@
               >{{ item.name }}
             </li>
           </ul>
-        </view-block>
-      </view-block>
+        </view>
+      </view>
 
       <!-- 配送至 -->
-      <view-block class="exist-address" v-else-if="privateType == 'exist'">
+      <view class="exist-address" v-else-if="privateType == 'exist'">
         <div class="exist-address-group">
           <ul class="exist-ul">
             <li
@@ -109,8 +109,8 @@
         >
           <div class="btn">{{ customAndExistTitle }}</div>
         </div>
-      </view-block>
-    </view-block>
+      </view>
+    </view>
   </nut-popup>
 </template>
 <script lang="ts">

src/packages/__VUE/datepicker/index.vue

@@ -1,14 +1,12 @@
 <template>
-  <view-block>
-    <nut-picker
-      :visible="show"
-      @close="closeHandler"
-      :list-data="columns"
-      @change="changeHandler"
-      :title="title"
-      @confirm="confirm"
-    ></nut-picker>
-  </view-block>
+  <nut-picker
+    :visible="show"
+    @close="closeHandler"
+    :list-data="columns"
+    @change="changeHandler"
+    :title="title"
+    @confirm="confirm"
+  ></nut-picker>
 </template>
 <script lang="ts">
 import { toRefs, watch, computed, reactive, onMounted } from 'vue';

src/packages/__VUE/infiniteloading/demo.vue

@@ -65,13 +65,14 @@
 </template>
 
 <script lang="ts">
-import { onMounted, ref, reactive, toRefs } from 'vue';
+import { onMounted, ref, reactive, toRefs, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo } = createComponent('infiniteloading');
-import { Toast } from '../toast';
 export default createDemo({
   props: {},
   setup() {
+    let { proxy } = getCurrentInstance() as any;
+
     const hasMore = ref(true);
     const customHasMore = ref(true);
     const refreshHasMore = ref(true);
@@ -120,7 +121,7 @@ export default createDemo({
 
     const refresh = done => {
       setTimeout(() => {
-        Toast.success('刷新成功');
+        proxy.$toast.text('刷新成功');
         done();
       }, 1000);
     };

src/packages/__VUE/infiniteloading/index.vue

@@ -1,34 +1,34 @@
 <template>
-  <view-block
+  <view
     :class="classes"
     ref="scroller"
     @touchstart="touchStart"
     @touchmove="touchMove"
     @touchend="touchEnd"
   >
-    <view-block class="nut-infinite-top" ref="refreshTop" :style="getStyle">
-      <view-block class="top-box">
+    <view class="nut-infinite-top" ref="refreshTop" :style="getStyle">
+      <view class="top-box">
         <nut-icon class="top-img" :name="pullIcon"></nut-icon>
-        <view-block class="top-text">{{ pullTxt }}</view-block>
-      </view-block>
-    </view-block>
+        <view class="top-text">{{ pullTxt }}</view>
+      </view>
+    </view>
 
-    <view-block class="nut-infinite-container">
+    <view class="nut-infinite-container">
       <slot></slot>
-    </view-block>
+    </view>
 
-    <view-block class="nut-infinite-bottom">
+    <view class="nut-infinite-bottom">
       <template v-if="isInfiniting">
-        <view-block class="bottom-box">
+        <view class="bottom-box">
           <nut-icon class="bottom-img" :name="loadIcon"></nut-icon>
-          <view-block class="bottom-text">{{ loadTxt }}</view-block>
-        </view-block>
+          <view class="bottom-text">{{ loadTxt }}</view>
+        </view>
       </template>
       <template v-else-if="!hasMore">
-        <view-block class="tips">{{ loadMoreTxt }}</view-block>
+        <view class="tips">{{ loadMoreTxt }}</view>
       </template>
-    </view-block>
-  </view-block>
+    </view>
+  </view>
 </template>
 <script lang="ts">
 import {

src/packages/__VUE/picker/Column.vue

@@ -1,5 +1,5 @@
 <template>
-  <view-block
+  <view
     class="nut-picker__content"
     :style="{ height: height + 'px' }"
     @touchstart="onTouchStart"
@@ -8,15 +8,15 @@
     @touchcancel="onTouchEnd"
     @transitionend="stopMomentum"
   >
-    <view-block class="nut-picker__wrapper" ref="wrapper" :style="wrapperStyle">
-      <view-block
+    <view class="nut-picker__wrapper" ref="wrapper" :style="wrapperStyle">
+      <view
         class="nut-picker__item"
         :key="index"
         v-for="(item, index) in options"
-        >{{ dataType === 'cascade' ? item.text : item }}</view-block
+        >{{ dataType === 'cascade' ? item.text : item }}</view
       >
-    </view-block>
-  </view-block>
+    </view>
+  </view>
 </template>
 <script lang="ts">
 import { reactive, ref, watch, computed, toRefs, onMounted } from 'vue';

src/packages/__VUE/picker/index.scss

@@ -1,5 +1,6 @@
 .nut-picker {
   &__content {
+    display: block;
     position: relative;
     text-align: center;
     overflow-y: hidden;
@@ -49,6 +50,9 @@
   &__button {
     cursor: pointer;
   }
+  &__wrapper {
+    display: block;
+  }
   &__item {
     display: flex;
     justify-content: center;

src/packages/__VUE/picker/index.vue

@@ -1,52 +1,47 @@
 <template>
-  <view-block :class="classes">
+  <view :class="classes">
     <nut-popup
       position="bottom"
       :style="{ height: height + 56 + 'px' }"
       v-model:visible="show"
       @close="close"
     >
-      <view-block class="nut-picker__bar">
-        <view-block class="nut-picker__left nut-picker__button" @click="close"
-          >取消</view-block
+      <view class="nut-picker__bar">
+        <view class="nut-picker__left nut-picker__button" @click="close"
+          >取消</view
         >
-        <view-block> {{ title }}</view-block>
-        <view-block class="nut-picker__button" @click="confirm()"
-          >确定</view-block
-        >
-      </view-block>
+        <view> {{ title }}</view>
+        <view class="nut-picker__button" @click="confirm()">确定</view>
+      </view>
 
-      <view-block class="nut-picker__column">
-        <view-block
+      <view class="nut-picker__column">
+        <view
           class="nut-picker__mask"
           :style="{ backgroundSize: `100% ${top}px` }"
-        ></view-block>
-        <view-block
-          class="nut-picker__hairline"
-          :style="{ top: ` ${top}px` }"
-        ></view-block>
-        <view-block
+        ></view>
+        <view class="nut-picker__hairline" :style="{ top: ` ${top}px` }"></view>
+        <view
           class="nut-picker__columnitem"
           v-for="(item, columnIndex) in columnList"
           :key="columnIndex"
         >
           <nut-picker-column
-            :listData="item.values"
+            :list-data="item.values"
             :readonly="readonly"
-            :defaultIndex="item.defaultIndex"
-            :visibleItemCount="visibleItemCount"
-            :itemHeight="itemHeight"
-            :dataType="dataType"
+            :default-index="item.defaultIndex"
+            :visible-item-count="visibleItemCount"
+            :item-height="itemHeight"
+            :data-type="dataType"
             @change="
               dataIndex => {
                 changeHandler(columnIndex, dataIndex);
               }
             "
           ></nut-picker-column>
-        </view-block>
-      </view-block>
+        </view>
+      </view>
     </nut-popup>
-  </view-block>
+  </view>
 </template>
 <script lang="ts">
 import { reactive, watch, computed, toRaw, toRefs } from 'vue';

src/packages/__VUE/pullrefresh/index.scss

@@ -1,11 +1,13 @@
 .nut-pullrefresh {
   position: relative;
   height: 100%;
+  display: block;
 
   .pullrefresh-top {
     position: absolute;
     left: 0;
 
+    display: block;
     overflow: hidden;
     color: #969799;
     font-size: 14px;
@@ -32,11 +34,14 @@
     height: 100%;
     overflow: auto;
     background: #fff;
+
+    display: block;
   }
 
   .pullrefresh-bottom {
     position: absolute;
 
+    display: block;
     overflow: hidden;
     color: #969799;
     font-size: 14px;

src/packages/__VUE/pullrefresh/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view-block
+  <view
     class="nut-pullrefresh"
     ref="scroller"
     :style="getStyle"
@@ -7,18 +7,18 @@
     @touchmove="touchMove"
     @touchend="touchEnd"
   >
-    <view-block
+    <view
       class="pullrefresh-top"
       :class="
         direction == 'horizontal' ? 'pullrefresh-top-h' : 'pullrefresh-top-v'
       "
-      >{{ refreshTopTem }}</view-block
+      >{{ refreshTopTem }}</view
     >
-    <view-block class="pullrefresh-content" ref="pull">
+    <view class="pullrefresh-content" ref="pull">
       <slot></slot>
-    </view-block>
+    </view>
 
-    <view-block
+    <view
       class="pullrefresh-bottom"
       :class="
         direction == 'horizontal'
@@ -26,9 +26,9 @@
           : 'pullrefresh-bottom-v'
       "
       :style="getBottomStyle"
-      >{{ refreshBottomTem }}</view-block
+      >{{ refreshBottomTem }}</view
     >
-  </view-block>
+  </view>
 </template>
 
 <script lang="ts">

src/packages/styles/variables.scss

@@ -266,9 +266,5 @@ $checkbox-label-disable-color: #999;
 $radio-label-color: #1d1e1e;
 $radio-label-disable-color: #999;
 
-view-block {
-  display: block;
-}
-
 @import './mixins/index';
 @import './animation/index';