fix(input): taro的问题+增加demo的三个icon功能 (#1223)

* fix: 修改input单元测试

* fix: 增加avatar group

* fix: 更新input md

* fix: avatar能力补齐

* fix: avatar能力补齐、适配taro

* feat: 迁移 AddressList、Category 组件，适配taro

* fix: 修改input md

* fix: 解决avatar组价不在一个div下的问题

* fix: 增加商品分类、地址列表在线编辑

* fix: 修复input taro 只读、修改value的问题

* fix: clearfix

* fix: clearfix

* fix: 增加issue

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/category/demo.vue

@@ -42,7 +42,6 @@ export default createDemo({
       fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
         .then((response) => response.json())
         .then((res) => {
-          console.log('res', res);
           const { categoryInfo, categoryChild, customCategory } = res;
           data.categoryInfo = categoryInfo;
           data.category = categoryInfo.category;

src/packages/__VUE/input/demo.vue

@@ -113,7 +113,7 @@ export default createDemo({
       event: ''
     });
     setTimeout(function () {
-      // state.val0 = '异步数据';
+      // state.val1 = '异步数据';
     }, 2000);
     const change = (value: string | number) => {
       console.log('change: ', value);

src/packages/__VUE/input/doc.md

@@ -107,6 +107,8 @@ app.use(Icon);
 
 ### 显示图标
 
+通过 left-icon 和 right-icon 配置输入框两侧的图标，通过设置 clearable 在输入过程中展示清除图标。需要引用 icon 组件
+
 :::demo
 
 ```html

src/packages/__VUE/input/index.scss

@@ -56,9 +56,16 @@ textarea {
     vertical-align: middle;
   }
   &-inner {
+    position: relative;
     display: flex;
     align-items: center;
   }
+  &-disabled-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
   &-error-message {
     color: $input-required-color;
     font-size: 12px;

src/packages/__VUE/input/index.taro.vue

@@ -67,6 +67,7 @@
           <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
         </view>
         <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
+        <view v-if="readonly" class="nut-input-disabled-mask"></view>
       </view>
       <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
         <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
@@ -350,6 +351,10 @@ export default create({
         value = props.formatter(value);
       }
 
+      if (inputRef && inputRef.value && inputRef.value.value && inputRef.value.value !== value) {
+        inputRef.value.value = value;
+      }
+
       if (value !== props.modelValue) {
         emit('update:modelValue', value);
         emit('change', value);

src/packages/__VUE/input/index.vue

@@ -348,9 +348,9 @@ export default create({
         value = props.formatter(value);
       }
 
-      // if (inputRef.value && inputRef.value.value !== value) {
-      //   inputRef.value.value = value;
-      // }
+      if (inputRef?.value?.value !== value) {
+        inputRef.value.value = value;
+      }
 
       if (value !== props.modelValue) {
         emit('update:modelValue', value);

src/sites/doc/components/DemoPreview.vue

@@ -17,10 +17,12 @@ export default defineComponent({
 .doc {
   &-demo-preview {
     height: 667px;
+    // height: 637px;
     width: 375px;
     position: fixed;
     right: 30px;
     top: 100px;
+    // top: 135px;
     box-shadow: #ebedf0 0 4px 12px;
     border-radius: 12px;
     overflow: hidden;

src/sites/doc/components/Issue.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="doc-content-issue">
+    <a class="issue-item" href="https://github.com/jdf2e/nutui/issues" target="_blank">
+      <nut-icon name="uploader"></nut-icon>
+      Issue
+    </a>
+    <a
+      class="issue-item"
+      :href="'https://github.com/jdf2e/nutui/issues?q=is:issue+is:open+' + component"
+      target="_blank"
+    >
+      <nut-icon name="issue"></nut-icon>
+      Open
+    </a>
+    <a
+      class="issue-item"
+      :href="'https://github.com/jdf2e/nutui/issues?q=is:issue+is:closed+' + component"
+      target="_blank"
+    >
+      <nut-icon name="checklist"></nut-icon>
+      Closed
+    </a>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
+import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
+import { RefData } from '@/sites/assets/util/ref';
+export default defineComponent({
+  name: 'doc-issue',
+  setup() {
+    const route = useRoute();
+
+    const state = reactive({
+      component: ''
+    });
+
+    const watchDemoUrl = (router: RouteLocationNormalized) => {
+      state.component = router.name;
+    };
+
+    onMounted(() => {
+      watchDemoUrl(route);
+    });
+
+    onBeforeRouteUpdate((to) => {
+      watchDemoUrl(to);
+    });
+
+    return {
+      ...toRefs(state)
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.doc-content-issue {
+  position: absolute;
+  right: 605px;
+  top: 51px;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  padding: 4px;
+  height: 40px;
+  // background: var(--bg-color-component-transparent);
+  border-radius: 6px;
+  align-items: center;
+  background: #fff;
+  box-shadow: 0px 1px 7px 0px #edeef1;
+  .issue-item {
+    display: flex;
+    align-items: center;
+
+    border-radius: var(--border-radius);
+    transition: all 0.2s ease 0s;
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    line-height: 22px;
+    font-size: 16px;
+    color: #333;
+    cursor: pointer;
+    text-decoration: none;
+    border-radius: 2px;
+    .nut-icon {
+      font-size: 12px;
+      // width: 16px;
+      // height: 16px;
+      margin-right: 5px;
+    }
+    &:hover {
+      color: #000;
+      background: rgba(64, 69, 82, 0.1);
+    }
+  }
+  &.fixed {
+    position: fixed;
+    right: 30px;
+    top: 80px;
+  }
+  &.vertical {
+    position: fixed;
+    right: 420px;
+    top: 220px;
+    flex-wrap: wrap;
+    width: 100px;
+    z-index: 9;
+    height: auto;
+    .issue-item {
+      width: 100%;
+    }
+  }
+}
+</style>

src/sites/doc/main.ts

@@ -5,6 +5,7 @@ import '@/sites/assets/styles/reset.scss';
 import '@/sites/assets/styles/md-style.scss';
 import DemoBlock from './components/demo-block';
 import { Hover } from './directive/hover/hover';
+import NutUI from '@/packages/nutui.vue';
 
 import { isMobile } from '@/sites/assets/util';
 
@@ -12,8 +13,4 @@ if (isMobile) {
   location.replace('demo.html' + location.hash);
 }
 
-createApp(App)
-  .directive('hover', Hover)
-  .component('demo-block', DemoBlock)
-  .use(router)
-  .mount('#doc');
+createApp(App).directive('hover', Hover).component('demo-block', DemoBlock).use(router).use(NutUI).mount('#doc');

src/sites/doc/views/Index.vue

@@ -4,6 +4,7 @@
     <doc-nav></doc-nav>
     <div class="doc-content">
       <div class="doc-content-document">
+        <!-- <doc-issue></doc-issue> -->
         <div class="doc-content-tabs" v-if="isShow() && isShowTaroDoc">
           <div
             class="tab-item"
@@ -19,6 +20,8 @@
         </div>
         <router-view />
       </div>
+      <!-- <doc-issue class="fixed"></doc-issue> -->
+      <!-- <doc-issue class="vertical"></doc-issue> -->
       <doc-demo-preview :url="demoUrl"></doc-demo-preview>
     </div>
   </div>
@@ -30,6 +33,7 @@ import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } fro
 import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
+import Issue from '@/sites/doc/components/Issue.vue';
 import { RefData } from '@/sites/assets/util/ref';
 import { initSiteLang } from '@/sites/assets/util/useTranslate';
 export default defineComponent({
@@ -37,7 +41,8 @@ export default defineComponent({
   components: {
     [Header.name]: Header,
     [Nav.name]: Nav,
-    [DemoPreview.name]: DemoPreview
+    [DemoPreview.name]: DemoPreview,
+    [Issue.name]: Issue
   },
   setup() {
     const route = useRoute();

src/sites/mobile-taro/vue/project.private.config.json

@@ -28,8 +28,7 @@
           "name": "dentry/pages/pickers/index",
           "pathName": "dentry/pages/picker/index",
           "query": "",
-          "scene": null,
-          "launchMode": "default"
+          "scene": null
         },
         {
           "name": "feedback/pages/collapse/index",
@@ -48,6 +47,12 @@
           "pathName": "feedback/pages/swiper/index",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "dentry/pages/input/index",
+          "pathName": "dentry/pages/input/index",
+          "query": "",
+          "scene": null
         }
       ]
     }

src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue

@@ -106,7 +106,7 @@ export default {
       event: ''
     });
     setTimeout(function () {
-      // state.val0 = '异步数据';
+      // state.val1 = '异步数据';
     }, 2000);
     const change = (value: string | number) => {
       console.log('change: ', value);

src/sites/mobile/App.vue

@@ -12,20 +12,33 @@
     </div>
   </div>
   <router-view />
+  <demo-icon></demo-icon>
 </template>
 <script lang="ts">
 import { defineComponent, ref, watch, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { isMobile } from '@/sites/assets/util';
 import { useThemeEditor } from '@/sites/assets/util/helper';
+import Icon from '@/sites/mobile/components/Icon.vue';
 import { translateChange } from '../assets/util/useTranslate';
 export default defineComponent({
   name: 'app',
+  components: {
+    [Icon.name]: Icon
+  },
   setup() {
     const title = ref('NutUI');
     // 获取当前路由
     const route = useRoute();
     const router = useRouter();
+    onMounted(() => {
+      // demo转换index
+      const { origin, hash, pathname } = window.top.location;
+      if (!isMobile && pathname.includes('demo')) {
+        window.top.location.href = `${origin}/3x/index.html${hash}`;
+        window.location.href = `${origin}/3x/demo.html${hash}`;
+      }
+    });
 
     useThemeEditor();
 
@@ -122,10 +135,9 @@ body {
     background: #f7f8fa;
     overflow-x: hidden;
     overflow-y: auto;
-    padding: 57px 17px 0 17px;
-
+    padding: 57px 17px 46px 17px;
     &.full {
-      padding: 57px 0 0 0;
+      padding: 57px 0 46px 0;
       h2 {
         padding-left: 27px;
       }

src/sites/mobile/components/Icon.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="icon-moudle">
+    <div class="item home" @click="goHome">
+      <nut-icon name="home"></nut-icon>
+    </div>
+    <div class="item refresh" @click="refresh">
+      <nut-icon name="refresh"></nut-icon>
+    </div>
+    <div class="item category" @click="toCategory($event)">
+      <nut-icon name="category"></nut-icon>
+    </div>
+    <div class="qrcodepart" v-if="showCode" ref="codeRef" @click="stopClick($event)">
+      <div class="qrcode"> </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, onMounted, toRefs } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+export default defineComponent({
+  name: 'demo-icon',
+  setup() {
+    const router = useRouter();
+
+    const state = reactive({
+      showCode: false
+    });
+
+    const codeRef = ref(null);
+
+    onMounted(() => {
+      document.addEventListener('click', (e: any) => {
+        state.showCode = false; // 点击其他区域关闭
+      });
+    });
+
+    // 返回demo 首页页
+    const goHome = () => {
+      router.push('/');
+    };
+
+    // 刷新
+    const refresh = () => {
+      router.go(0);
+    };
+
+    // 二维码
+    const toCategory = (e: any) => {
+      state.showCode = !state.showCode;
+      e.stopPropagation(); // 阻止事件向上冒泡
+    };
+
+    const stopClick = (e: any) => {
+      e.stopPropagation(); // 阻止事件向上冒泡
+    };
+
+    return reactive({
+      ...toRefs(state),
+      codeRef,
+      goHome,
+      refresh,
+      toCategory,
+      stopClick
+    });
+  }
+});
+</script>
+<style lang="scss" scoped>
+.icon-moudle {
+  display: flex;
+  justify-content: flex-end;
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 40px;
+  padding: 0 22px;
+  color: #666;
+  border-top: 1px solid #e6e6e6;
+  background: #fff;
+  .item {
+    margin-left: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+}
+.qrcodepart {
+  // display: none;
+  position: absolute;
+  right: 9px;
+  bottom: 48px;
+  width: 110px;
+  padding: 6px 7px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.11);
+  box-sizing: border-box;
+  .qrcode {
+    width: 96px;
+    height: 96px;
+    margin: 0 auto;
+    background: url(https://img12.360buyimg.com/imagetools/jfs/t1/162421/39/13392/9425/6052ea60E592310a9/264bdff23ef5fe95.png)
+      no-repeat;
+    background-size: cover;
+  }
+}
+</style>