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

src/packages/__VUE/calendar/__tests__/calendar.spec.ts

@@ -62,6 +62,29 @@ test('show-today prop', async () => {
   expect(wrapper.find('.calendar-curr-tip-curr').exists()).toBeFalsy();
 });
 
+test('first-day-of-week prop', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      firstDayOfWeek: 2,
+      startDate: '2022-01-01',
+      endDate: '2022-01-31'
+    }
+  });
+  await nextTick();
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+  // 头部周第1个元素
+  const weekday = wrapper.findAll('.calendar-week-item')[0].text();
+  expect(weekday).toEqual(weekdays[2]);
+  // 日期面板第7个元素, 判断最后一天的日期是否匹配
+  const calendarMonth = wrapper.find('.calendar-month');
+  const monthTitle = calendarMonth.find('.calendar-month-title').text();
+  const dayText = calendarMonth.findAll('.calendar-day')[6].text();
+  const date = new Date(monthTitle.replace(/[年月]/g, '/') + dayText);
+  const index = date.getDay();
+  expect(index).toEqual(1);
+});
+
 test('should render slot correctly', async () => {
   const wrapper = mount(Calendar, {
     props: {

src/packages/__VUE/calendar/demo.vue

@@ -170,6 +170,24 @@
       </nut-calendar>
     </div>
     <h2>{{ translate('title3') }}</h2>
+    <div>
+      <nut-cell
+        :show-icon="true"
+        :title="translate('single')"
+        :desc="date8 ? `${date8}` : translate('please')"
+        @click="openSwitch('isVisible8')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible8"
+        :default-value="date8"
+        @close="closeSwitch('isVisible8')"
+        @choose="setChooseValue8"
+        :first-day-of-week="2"
+      >
+      </nut-calendar>
+    </div>
+    <h2>{{ translate('title4') }}</h2>
     <div class="test-calendar-wrapper">
       <nut-calendar :poppable="false" :default-value="date2" :is-auto-back-fill="true" @choose="setChooseValue2">
       </nut-calendar>
@@ -190,7 +208,8 @@ const initTranslate = () =>
       title: '基础用法',
       title1: '快捷选择',
       title2: '自定义日历',
-      title3: '平铺展示',
+      title3: '自定义周起始日',
+      title4: '平铺展示',
 
       please: '请选择',
       single: '选择单个日期',
@@ -213,7 +232,8 @@ const initTranslate = () =>
       title: 'Basic Usage',
       title1: 'Quick Select',
       title2: 'Custom Calendar',
-      title3: 'Tiled Display',
+      title3: 'Custom First Day Of Week',
+      title4: 'Tiled Display',
 
       please: 'Please Select Date',
       single: 'Select Single Date',
@@ -244,6 +264,7 @@ interface TestCalendarState {
   isVisible5: boolean;
   isVisible6: boolean;
   isVisible7: boolean;
+  isVisible8: boolean;
   date1: string[];
   date2: string;
   date3: string;
@@ -251,6 +272,7 @@ interface TestCalendarState {
   date5: string[];
   date6: string[];
   date7: string[];
+  date8: string;
 }
 export default createDemo({
   props: {},
@@ -268,13 +290,15 @@ export default createDemo({
       date5: ['2021-12-23', '2021-12-26'],
       date6: [],
       date7: [],
+      date8: '',
       isVisible1: false,
       isVisible2: false,
       isVisible3: false,
       isVisible4: false,
       isVisible5: false,
       isVisible6: false,
-      isVisible7: false
+      isVisible7: false,
+      isVisible8: false
     });
     const openSwitch = (param: string) => {
       state[`${param}`] = true;
@@ -321,6 +345,9 @@ export default createDemo({
       });
       state.date7 = [...dateArr];
     };
+    const setChooseValue8 = (param: string) => {
+      state.date8 = param[3];
+    };
     const clickBtn = (param: string) => {
       let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
       state.date5 = date;
@@ -351,6 +378,7 @@ export default createDemo({
       setChooseValue4,
       setChooseValue5,
       setChooseValue6,
+      setChooseValue8,
       clickBtn,
       clickBtn1,
       goDate,

src/packages/__VUE/calendar/doc.en-US.md

@@ -496,6 +496,60 @@ export default {
 
 ```
 :::
+
+### Custom First Day Of Week
+:::demo
+```html
+<template>
+  <nut-cell
+    :showIcon="true"
+    title="Custom First Day Of Week"
+    :desc="date ? `${date} ${dateWeek}` : 'Please Select Date'"
+    @click="openSwitch('isVisible')"
+    :first-day-of-week="2"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="isVisible"
+    :default-value="date"
+    @close="closeSwitch('isVisible')"
+    @choose="setChooseValue"
+    :start-date="`2019-10-11`"
+    :end-date="`2022-11-11`"
+  >
+  </nut-calendar>
+</template>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      isVisible: false,
+      date: '',
+      dateWeek: ''
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+    const setChooseValue = param => {
+      state.date = param[3];
+      state.dateWeek = param[4];
+    };
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue
+    };
+  }
+};
+</script>
+```
+
+:::
 ### Tiled Display
 :::demo
 ```html
@@ -560,6 +614,7 @@ export default {
 | show-title          | Whether to show the calendar title               | Boolean          | true |
 | show-sub-title          | Whether to display the date title              | Boolean          | true |
 | to-date-animation          | Whether to use scroll animation              | Boolean          | true |
+| first-day-of-week          | Set the start day of week              | 0-6          | 0 |
 
 ### Events
 

src/packages/__VUE/calendar/doc.md

@@ -487,6 +487,61 @@ export default {
 
 ```
 :::
+
+### 自定义周起始日
+:::demo
+```html
+<template>
+  <nut-cell
+    :showIcon="true"
+    title="自定义周起始日"
+    :desc="date ? `${date} ${dateWeek}` : '请选择'"
+    @click="openSwitch('isVisible')"
+    :first-day-of-week="2"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="isVisible"
+    :default-value="date"
+    @close="closeSwitch('isVisible')"
+    @choose="setChooseValue"
+    :start-date="`2019-10-11`"
+    :end-date="`2022-11-11`"
+  >
+  </nut-calendar>
+</template>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      isVisible: false,
+      date: '',
+      dateWeek: ''
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+    const setChooseValue = param => {
+      state.date = param[3];
+      state.dateWeek = param[4];
+    };
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue
+    };
+  }
+};
+</script>
+```
+
+:::
+
 ### 平铺展示
 :::demo
 ```html
@@ -552,6 +607,7 @@ export default {
 | show-title          | 是否在展示日历标题               | Boolean          | true |
 | show-sub-title          | 是否展示日期标题              | Boolean          | true |
 | to-date-animation          | 是否启动滚动动画              | Boolean          | true |
+| first-day-of-week          | 设置周起始日              | 0-6          | 0 |
 
 ### Events
 

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

@@ -30,6 +30,7 @@
       :show-title="showTitle"
       :show-sub-title="showSubTitle"
       :to-date-animation="toDateAnimation"
+      :first-day-of-week="firstDayOfWeek"
     >
       <template v-slot:btn v-if="showTopBtn">
         <slot name="btn"> </slot>
@@ -64,6 +65,7 @@
     :show-sub-title="showSubTitle"
     :to-date-animation="toDateAnimation"
     :show-today="showToday"
+    :first-day-of-week="firstDayOfWeek"
   >
     <template v-slot:btn v-if="showTopBtn">
       <slot name="btn"> </slot>
@@ -151,6 +153,11 @@ export default create({
     endDate: {
       type: String,
       default: Utils.getDay(365)
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 0,
+      validator: (val: number) => val >= 0 && val <= 6
     }
   },
   emits: ['choose', 'close', 'update:visible', 'select'],

src/packages/__VUE/calendar/index.vue

@@ -32,6 +32,7 @@
       :show-title="showTitle"
       :show-sub-title="showSubTitle"
       :to-date-animation="toDateAnimation"
+      :first-day-of-week="firstDayOfWeek"
     >
       <template v-slot:btn v-if="showTopBtn">
         <slot name="btn"> </slot>
@@ -67,6 +68,7 @@
     :show-title="showTitle"
     :show-sub-title="showSubTitle"
     :to-date-animation="toDateAnimation"
+    :first-day-of-week="firstDayOfWeek"
     ref="calendarRef"
   >
     <template v-slot:btn v-if="showTopBtn">
@@ -155,6 +157,11 @@ export default create({
     endDate: {
       type: String,
       default: Utils.getDay(365)
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 0,
+      validator: (val: number) => val >= 0 && val <= 6
     }
   },
   emits: ['choose', 'close', 'update:visible', 'select'],

src/packages/__VUE/calendaritem/index.h5.vue

@@ -187,12 +187,18 @@ export default create({
     endDate: {
       type: String,
       default: Utils.getDay(365)
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['choose', 'update', 'close', 'select'],
 
   setup(props, { emit, slots }) {
-    const weeks = ref(translate('weekdays'));
+    // 新增：自定义周起始日
+    const weekdays = translate('weekdays');
+    const weeks = ref([...weekdays.slice(props.firstDayOfWeek, 7), ...weekdays.slice(0, props.firstDayOfWeek)]);
     // element refs
     const scalePx = ref(2);
     const months = ref<null | HTMLElement>(null);
@@ -398,6 +404,8 @@ export default create({
 
     // 获取日期状态
     const getDaysStatus = (days: number, type: string, dateInfo: Dateprop) => {
+      // 新增：自定义周起始日
+      days = days - props.firstDayOfWeek;
       // 修复：当某个月的1号是周日时，月份下方会空出来一行
       let { year, month } = dateInfo;
       if (type == 'prev' && days >= 7) {

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

@@ -178,12 +178,18 @@ export default create({
     endDate: {
       type: String,
       default: Utils.getDay(365)
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['choose', 'update', 'close', 'select'],
 
   setup(props, { emit, slots }) {
-    const weeks = ref(translate('weekdays'));
+    // 新增：自定义周起始日
+    const weekdays = translate('weekdays');
+    const weeks = ref([...weekdays.slice(props.firstDayOfWeek, 7), ...weekdays.slice(0, props.firstDayOfWeek)]);
     // element refs
     const scalePx = ref(2);
     const viewHeight = ref(0);
@@ -404,6 +410,8 @@ export default create({
     };
     // 获取上一个月的最后一周天数，填充当月空白
     const getPreDaysStatus = (days: number, type: string, dateInfo: any, preCurrMonthDays: number) => {
+      // 新增：自定义周起始日
+      days = days - props.firstDayOfWeek;
       // 修复：当某个月的1号是周日时，月份下方会空出来一行
       let { year, month } = dateInfo;
       if (type == 'prev' && days >= 7) {

src/packages/__VUE/calendaritem/index.vue

@@ -185,12 +185,18 @@ export default create({
     endDate: {
       type: String,
       default: Utils.getDay(365)
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['choose', 'update', 'close', 'select'],
 
   setup(props, { emit, slots }) {
-    const weeks = ref(translate('weekdays'));
+    // 新增：自定义周起始日
+    const weekdays = translate('weekdays');
+    const weeks = ref([...weekdays.slice(props.firstDayOfWeek, 7), ...weekdays.slice(0, props.firstDayOfWeek)]);
     // element refs
     const months = ref<null | HTMLElement>(null);
     const monthsPanel = ref<null | HTMLElement>(null);
@@ -411,6 +417,8 @@ export default create({
     };
     // 获取上一个月的最后一周天数，填充当月空白
     const getPreDaysStatus = (days: number, type: string, dateInfo: Dateprop, preCurrMonthDays: number) => {
+      // 新增：自定义周起始日
+      days = days - props.firstDayOfWeek;
       // 修复：当某个月的1号是周日时，月份下方会空出来一行
       let { year, month } = dateInfo;
       if (type == 'prev' && days >= 7) {

src/packages/__VUE/imagepreview/index.scss

@@ -13,6 +13,11 @@
     object-fit: contain;
   }
 
+  &-taro-img {
+    width: 100%;
+    height: 100%;
+  }
+
   &-index {
     position: fixed;
     z-index: 2002;

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

@@ -15,8 +15,8 @@
         :pagination-color="paginationColor"
       >
         <nut-swiper-item v-for="(item, index) in images" :key="index">
-          <!-- <image mode="aspectFit" :src="item.src" class="nut-imagepreview-img" /> -->
-          <img :src="item.src" mode="aspectFit" class="nut-imagepreview-img" />
+          <image mode="aspectFit" :src="item.src" class="nut-imagepreview-taro-img" v-if="ENV != ENV_TYPE.WEB" />
+          <img :src="item.src" mode="aspectFit" class="nut-imagepreview-img" v-else />
         </nut-swiper-item>
       </nut-swiper>
     </view>
@@ -36,6 +36,7 @@ import SwiperItem from '../swiperitem/index.taro.vue';
 import Icon from '../icon/index.taro.vue';
 import { isPromise } from '@/packages/utils/util';
 import { ImageInterface } from './types';
+import Taro from '@tarojs/taro';
 const { create } = createComponent('imagepreview');
 
 export default create({
@@ -118,7 +119,10 @@ export default create({
         originScale: 1,
         oriDistance: 1
       },
-      lastTouchEndTime: 0 // 用来辅助监听双击
+      lastTouchEndTime: 0, // 用来辅助监听双击
+
+      ENV: Taro.getEnv(),
+      ENV_TYPE: Taro.ENV_TYPE
     });
 
     const styles = computed(() => {

src/packages/__VUE/menu/__tests__/menu.spec.ts

@@ -292,3 +292,38 @@ test('menu title-class props: nut-menu__title classes should contain custom-titl
 
   expect(menuTitle.classes()).toContain('custom-title-class');
 });
+
+test('menu item open and close events: should be both emitted', async () => {
+  const wrapper = mount({
+    components: {
+      NutMenu: Menu,
+      NutMenuItem: MenuItem
+    },
+    template: `
+    <nut-menu>
+    <nut-menu-item v-model="value2" @open="handleOpen" @close="handleClose" :options="options2" />
+  </nut-menu>
+    `,
+    data: () => {
+      return {
+        value2: 'a',
+        options2
+      };
+    },
+    methods: {
+      handleOpen(val: any) {
+        (this as any).value2 = 'b';
+      },
+      handleClose(val: any) {
+        (this as any).value2 = 'c';
+      }
+    }
+  });
+
+  await nextTick();
+  wrapper.find('.nut-menu__item').trigger('click');
+  expect(wrapper.vm.value2).toBe('b');
+
+  wrapper.find('.placeholder-element').trigger('click');
+  expect(wrapper.vm.value2).toBe('c');
+});

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

@@ -414,4 +414,6 @@ export default {
 | Event  | Description                   | Arguments      |
 |--------|-------------------------------|----------------|
 | change | Emitted select option changed | Selected value |
-| toggle | Toggle menu display status, `true` to show，`false` to hide, no param is negated | show?: boolean |
+| toggle | Toggle menu display status, `true` to show，`false` to hide, no param is negated | show?: boolean |
+| open `v3.2.7` | Emitted when opening menu | - |
+| close `v3.2.7` | Emitted when closing menu | - |

src/packages/__VUE/menu/doc.md

@@ -413,4 +413,6 @@ export default {
 | 事件名 | 说明                 | 回调参数     |
 |--------|----------------------|--------------|
 | change | 选择 option 之后触发 | 选择的 value |
-| toggle | 切换菜单展示状态，传 `true` 为显示，`false` 为隐藏，不传参为取反 | show?: boolean |
+| toggle | 切换菜单展示状态，传 `true` 为显示，`false` 为隐藏，不传参为取反 | show?: boolean |
+| open `v3.2.7` | 打开菜单栏时触发 | - |
+| close `v3.2.7` | 关闭菜单栏时触发 | - |

src/packages/__VUE/menuitem/index.vue

@@ -88,7 +88,7 @@ export default create({
     [Icon.name]: Icon,
     [Popup.name]: Popup
   },
-  emits: ['update:modelValue', 'change'],
+  emits: ['update:modelValue', 'change', 'open', 'close'],
   setup(props, { emit, slots }) {
     const state = reactive({
       showPopup: false,
@@ -145,6 +145,7 @@ export default create({
 
       if (show) {
         state.showWrapper = true;
+        emit('open');
       }
     };
 
@@ -169,12 +170,14 @@ export default create({
     };
 
     const handleClose = () => {
+      emit('close');
       state.showWrapper = false;
       state.isShowPlaceholderElement = false;
     };
 
     const handleClickOutside = () => {
       state.showPopup = false;
+      emit('close');
     };
 
     return {

src/packages/__VUE/skeleton/__test__/__snapshots__/skeleton.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should change avatar shape when using avatarShape prop 1`] = `
-"<view style=\\"width: 50px; height: 50px; background-color: rgb(239, 239, 239); color: rgb(102, 102, 102);\\" class=\\"nut-avatar nut-avatar-normal nut-avatar-square avatarClass avatarClass--square\\">
+"<view style=\\"width: 50px; height: 50px; background-color: rgb(238, 238, 238); color: rgb(102, 102, 102);\\" class=\\"nut-avatar nut-avatar-normal nut-avatar-square avatarClass avatarClass--square\\">
   <!--v-if-->
   <!--v-if-->
   <!-- 折叠头像 -->
@@ -18,10 +18,9 @@ exports[`should render default slot 1`] = `
   <!--v-if-->
   <view class=\\"content\\">
     <!--v-if-->
-    <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-    <view class=\\"content-line\\">
-      <view class=\\"title\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
+    <view class=\\"content-line\\" style=\\"width: 100px;\\">
+      <view class=\\"blockTitle\\" style=\\"height: 100px;\\"></view>
+      <view class=\\"blockLine\\" style=\\"height: 100px;\\"></view>
     </view>
   </view>
 </view>"

src/packages/__VUE/skeleton/__test__/skeleton.spec.ts

@@ -15,13 +15,13 @@ afterAll(() => {
   config.global.components = {};
 });
 
-test('should render with row width array correctly', () => {
+test('should render with row‘s father content width correctly', () => {
   const wrapper = mount(Skeleton, {
     props: {
       width: '100px'
     }
   });
-  const skeleton: any = wrapper.find('.blockClass');
+  const skeleton: any = wrapper.find('.content-line');
   expect(skeleton.element.style.width).toBe('100px');
 });
 
@@ -80,3 +80,17 @@ test('should render default slot', () => {
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render correctly when title uses false', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      title: false,
+      row: '1'
+    }
+  });
+
+  const content = wrapper.find('.content-line');
+
+  expect(content.find('.blockTitle').exists()).toBeFalsy();
+  expect(content.findAll('.blockLine').length).toBe(1);
+});

src/packages/__VUE/skeleton/common.ts

@@ -68,13 +68,12 @@ export const component = {
       };
     });
 
-    const blockClass = computed(() => {
-      const prefixCls = 'blockClass';
+    const getBlockClass = (prefixCls: string) => {
       return {
         [prefixCls]: true,
         [`${prefixCls}--round`]: round.value
       };
-    });
+    };
 
     const getStyle = (): import('vue').CSSProperties => {
       const style: import('vue').CSSProperties = {};
@@ -97,7 +96,7 @@ export const component = {
     return {
       avatarShape,
       avatarClass,
-      blockClass,
+      getBlockClass,
       getStyle
     };
   }

src/packages/__VUE/skeleton/index.scss

@@ -7,30 +7,32 @@
     display: flex;
     .avatarClass {
       margin-right: 20px;
-      background: rgb(239, 239, 239);
-    }
-
-    .blockClass,
-    .blockClass--round {
-      width: 100%;
-      height: 100%;
-      background: rgb(239, 239, 239);
-      margin-top: 10px;
-      &:last-child {
-        width: 70% !important;
-      }
-    }
-    .blockClass--round {
-      border-radius: 10px;
+      background-color: $skeleton-content-avatar-background-color;
     }
 
     .content-line {
       display: flex;
       flex-direction: column;
-      .title {
+      .blockTitle,
+      .blockLine {
+        width: 100%;
+        margin-bottom: 10px;
+        background-color: $skeleton-content-line-background-color;
+      }
+      .blockTitle {
         width: 30%;
-        height: 15px;
-        background: $skeleton-content-line-title-background-color;
+      }
+      .blockLine ~ .blockLine:last-of-type {
+        width: 70%;
+      }
+      .blockTitle:last-of-type,
+      .blockLine:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .blockTitle--round,
+      .blockLine--round {
+        border-radius: 10px;
       }
     }
   }
@@ -42,7 +44,7 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
+    background: $skeleton-animation-background-color;
     background-repeat: no-repeat;
     animation: backpos 2s ease-in-out 0s infinite;
   }

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

@@ -3,22 +3,14 @@
     <slot></slot>
   </view>
   <view v-else class="skeleton">
-    <view class="skeleton-animation"></view>
+    <view class="skeleton-animation" v-if="animated"></view>
     <view class="content">
-      <nut-avatar
-        v-if="avatar"
-        :class="avatarClass"
-        :shape="avatarShape"
-        :style="getStyle()"
-        bg-color="rgb(239, 239, 239)"
-      ></nut-avatar>
+      <nut-avatar v-if="avatar" :class="avatarClass" :shape="avatarShape" :style="getStyle()"></nut-avatar>
 
-      <view v-if="Number(row) == 1" :class="blockClass" :style="{ width, height }"> </view>
-
-      <view class="content-line">
-        <view v-if="title" class="title"></view>
-        <view v-for="(item, index) in Number(row)" :key="index" :class="blockClass" :style="{ width, height }"> </view
-      ></view>
+      <view class="content-line" :style="{ width }">
+        <view v-if="title" :class="getBlockClass('blockTitle')" :style="{ height }"></view>
+        <view v-for="_ in Number(row)" :key="_" :class="getBlockClass('blockLine')" :style="{ height }" />
+      </view>
     </view>
   </view>
 </template>

src/packages/__VUE/skeleton/index.vue

@@ -5,20 +5,12 @@
   <view v-else class="skeleton">
     <view class="skeleton-animation" v-if="animated"></view>
     <view class="content">
-      <nut-avatar
-        v-if="avatar"
-        :class="avatarClass"
-        :shape="avatarShape"
-        :style="getStyle()"
-        bg-color="rgb(239, 239, 239)"
-      ></nut-avatar>
+      <nut-avatar v-if="avatar" :class="avatarClass" :shape="avatarShape" :style="getStyle()"></nut-avatar>
 
-      <view v-if="Number(row) == 1" :class="blockClass" :style="{ width, height }"> </view>
-
-      <view class="content-line">
-        <view v-if="title" class="title"></view>
-        <view v-for="(item, index) in Number(row)" :key="index" :class="blockClass" :style="{ width, height }"> </view
-      ></view>
+      <view class="content-line" :style="{ width }">
+        <view v-if="title" :class="getBlockClass('blockTitle')" :style="{ height }"></view>
+        <view v-for="_ in Number(row)" :key="_" :class="getBlockClass('blockLine')" :style="{ height }" />
+      </view>
     </view>
   </view>
 </template>

src/packages/styles/variables-jdb.scss

@@ -771,7 +771,14 @@ $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #efefef !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #efefef !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 1px solid $primary-color !default;

src/packages/styles/variables-jddkh.scss

@@ -702,7 +702,14 @@ $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #fafafa !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #fafafa !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 0 !default;

src/packages/styles/variables-jdt.scss

@@ -678,7 +678,14 @@ $form-item-tip-font-size: 12px !default;
 $form-item-tip-text-align: right !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #efefef !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #efefef !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 1px solid $primary-color !default;

src/packages/styles/variables.scss

@@ -702,7 +702,14 @@ $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #efefef !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #efefef !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 1px solid $primary-color !default;

src/sites/mobile-taro/vue/src/exhibition/pages/imagepreview/index.vue

@@ -39,16 +39,16 @@ export default {
       showPreview4: false,
       imgData: [
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+          src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg'
         },
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+          src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
         },
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+          src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
         },
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+          src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
         }
       ],
       videoData: [
@@ -104,7 +104,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.demo {
-}
-</style>
+<style lang="scss"></style>