ソースを参照

Merge branch 'next' of https://github.com/jdf2e/nutui into next

Drjnigfubo 3 年 前
コミット
dec676f5a6

+ 3 - 3
src/packages/__VUE/menu/doc.en-US.md

@@ -220,8 +220,8 @@ export default {
 
 ```html
 <template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
+  <nut-menu title-icon="joy-smile">
+    <nut-menu-item v-model="state.value1" :options="state.options1" />
     <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
   </nut-menu>
 </template>
@@ -389,7 +389,7 @@ export default {
 | scroll-fixed `v3.1.22`           | Whether to fixed when window is scrolled, fixed position can be set | Boolean、String、Number | false   |
 | title-class `v3.1.22`            | Custome title class                                                 | String                  | -       |
 | lock-scroll `v3.1.22`            | Whether the background is locked                                    | Boolean                 | true    |
-| title-icon `3.2.1`               | Custome title icon                                                  | String                  | -       |
+| title-icon `v3.2.1`               | Custome title icon                                                  | String                  | -       |
 
 ### MenuItem Props
 

+ 3 - 3
src/packages/__VUE/menu/doc.md

@@ -221,8 +221,8 @@ export default {
 
 ```html
 <template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
+  <nut-menu title-icon="joy-smile">
+    <nut-menu-item v-model="state.value1" :options="state.options1" />
     <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
   </nut-menu>
 </template>
@@ -390,7 +390,7 @@ export default {
 | scroll-fixed `v3.1.22`           | 滚动后是否固定,可设置固定位置 | Boolean、String、Number | false   |
 | title-class `v3.1.22`            | 自定义标题样式类               | String                  | -       |
 | lock-scroll `v3.1.22`            | 背景是否锁定                   | Boolean                 | true    |
-| title-icon `3.2.1`               | 自定义标题图标                 | String                  | -       |
+| title-icon `v3.2.1`               | 自定义标题图标                 | String                  | -       |
 
 
 ### MenuItem Props

+ 5 - 0
src/packages/__VUE/menuitem/index.taro.vue

@@ -48,6 +48,7 @@
               :name="optionIcon"
               v-bind="$attrs"
               :color="parent.props.activeColor"
+              :class-prefix="classPrefix"
             ></nut-icon>
             <view
               :class="{
@@ -94,6 +95,10 @@ export default create({
     optionIcon: {
       type: String,
       default: 'Check'
+    },
+    classPrefix: {
+      type: String,
+      default: 'nut-icon'
     }
   },
   components: {

+ 5 - 0
src/packages/__VUE/menuitem/index.vue

@@ -44,6 +44,7 @@
             v-if="option.value === modelValue"
             :name="optionIcon"
             :color="parent.props.activeColor"
+            :class-prefix="classPrefix"
           ></nut-icon>
           <view
             :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
@@ -84,6 +85,10 @@ export default create({
     optionIcon: {
       type: String,
       default: 'Check'
+    },
+    classPrefix: {
+      type: String,
+      default: 'nut-icon'
     }
   },
   components: {

+ 30 - 1
src/packages/__VUE/tabs/index.taro.vue

@@ -1,4 +1,33 @@
-<template src="./template.html"></template>
+<template>
+  <view class="nut-tabs" :class="[direction]" ref="container" id="container">
+    <view
+      class="nut-tabs__titles"
+      :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
+      :style="tabsNavStyle"
+    >
+      <slot v-if="$slots.titles" name="titles"></slot>
+      <template v-else>
+        <view
+          class="nut-tabs__titles-item"
+          :style="titleStyle"
+          @click="tabChange(item, index)"
+          :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+          v-for="(item, index) in titles"
+          :key="item.paneKey"
+        >
+          <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
+          <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
+            <nut-icon :color="color" name="joy-smile" />
+          </view>
+          <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
+        </view>
+      </template>
+    </view>
+    <view class="nut-tabs__content" :style="contentStyle">
+      <slot name="default"></slot>
+    </view>
+  </view>
+</template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';

+ 59 - 1
src/packages/__VUE/tabs/index.vue

@@ -1,4 +1,62 @@
-<template src="./template.html"></template>
+<template>
+  <view class="nut-tabs" :class="[direction]" ref="container" id="container">
+    <template v-if="sticky">
+      <nut-sticky :top="top" :container="container" @scroll="onStickyScroll">
+        <view
+          class="nut-tabs__titles"
+          :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
+          :style="tabsNavStyle"
+        >
+          <slot v-if="$slots.titles" name="titles"></slot>
+          <template v-else>
+            <view
+              class="nut-tabs__titles-item"
+              :style="titleStyle"
+              @click="tabChange(item, index)"
+              :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+              v-for="(item, index) in titles"
+              :key="item.paneKey"
+            >
+              <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
+              <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
+                <nut-icon :color="color" name="joy-smile" />
+              </view>
+              <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
+            </view>
+          </template>
+        </view>
+      </nut-sticky>
+    </template>
+    <template v-else>
+      <view
+        class="nut-tabs__titles"
+        :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
+        :style="tabsNavStyle"
+      >
+        <slot v-if="$slots.titles" name="titles"></slot>
+        <template v-else>
+          <view
+            class="nut-tabs__titles-item"
+            :style="titleStyle"
+            @click="tabChange(item, index)"
+            :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+            v-for="(item, index) in titles"
+            :key="item.paneKey"
+          >
+            <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
+            <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
+              <nut-icon :color="color" name="joy-smile" />
+            </view>
+            <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
+          </view>
+        </template>
+      </view>
+    </template>
+    <view class="nut-tabs__content" :style="contentStyle">
+      <slot name="default"></slot>
+    </view>
+  </view>
+</template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';

+ 0 - 43
src/packages/__VUE/tabs/template.html

@@ -1,43 +0,0 @@
-<view class="nut-tabs" :class="[direction]" ref="container" id="container">
-  <template v-if="sticky">
-    <nut-sticky :top="top" :container="container" @scroll="onStickyScroll">
-      <view class="nut-tabs__titles" :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
-        :style="tabsNavStyle">
-        <slot v-if="$slots.titles" name="titles"></slot>
-        <template v-else>
-          <view class="nut-tabs__titles-item" :style="titleStyle" @click="tabChange(item, index)"
-            :class="{ active: item.paneKey == modelValue, disabled: item.disabled }" v-for="(item, index) in titles"
-            :key="item.paneKey">
-            <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
-            <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
-              <nut-icon :color="color" name="joy-smile" />
-            </view>
-            <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }}
-            </view>
-          </view>
-        </template>
-      </view>
-    </nut-sticky>
-  </template>
-  <template v-else>
-    <view class="nut-tabs__titles" :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
-      :style="tabsNavStyle">
-      <slot v-if="$slots.titles" name="titles"></slot>
-      <template v-else>
-        <view class="nut-tabs__titles-item" :style="titleStyle" @click="tabChange(item, index)"
-          :class="{ active: item.paneKey == modelValue, disabled: item.disabled }" v-for="(item, index) in titles"
-          :key="item.paneKey">
-          <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
-          <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
-            <nut-icon :color="color" name="joy-smile" />
-          </view>
-          <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }}
-          </view>
-        </view>
-      </template>
-    </view>
-  </template>
-  <view class="nut-tabs__content" :style="contentStyle">
-    <slot name="default"></slot>
-  </view>
-</view>

+ 2 - 2
src/sites/mobile-taro/vue/src/nav/pages/menu/index.vue

@@ -25,8 +25,8 @@
       <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
     </nut-menu>
     <h2>自定义图标</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
+    <nut-menu titleIcon="joy-smile">
+      <nut-menu-item v-model="state.value1" :options="state.options1" />
       <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
     </nut-menu>
     <h2>向上展开</h2>

+ 0 - 1
src/sites/mobile-taro/vue/src/nav/pages/tabs/index.vue

@@ -120,7 +120,6 @@ export default {
     });
     setTimeout(() => {
       state.list3.push(999);
-      state.tab3value = '2';
     }, 3000);
 
     return { state };