fix: layout增加点击事件,骨架屏增加组合形式demo,textarea autosize 问题优化 (jd-opensource…

…#1193)

src/packages/__VUE/col/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" :style="style">
+  <view :class="classes" :style="style" @click="handleClick">
     <slot></slot>
   </view>
 </template>
@@ -19,7 +19,8 @@ export default create({
       default: '0'
     }
   },
-  setup(props) {
+  emits: ['click'],
+  setup(props, { emit }) {
     const prefixCls = componentName;
     const gutter = inject('gutter') as number;
     const classes = computed(() => {
@@ -36,9 +37,14 @@ export default create({
         paddingRight: gutter / 2 + 'px'
       };
     });
+    const handleClick = (evt: MouseEvent) => {
+      evt.stopPropagation();
+      emit('click', evt);
+    };
     return {
       classes,
-      style
+      style,
+      handleClick
     };
   }
 });

src/packages/__VUE/layout/doc.md

@@ -242,3 +242,14 @@ app.use(Col);
 | span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String、Number | 24
 | offset | 列元素偏移距离 | String、Number | 0
 
+### row events
+
+| 字段 | 说明 | 回调参数
+|----- | ----- | ----- 
+| click | 点击时触发 | event: MouseEvent
+
+### col events
+
+| 字段 | 说明 | 回调参数
+|----- | ----- | ----- 
+| click | 点击时触发 | event: MouseEvent

src/packages/__VUE/row/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="getClasses()">
+  <view :class="getClasses()" @click="handleClick">
     <slot></slot>
   </view>
 </template>
@@ -31,15 +31,12 @@ export default create({
       default: 'nowrap'
     }
   },
-  setup(props) {
+  emits: ['click'],
+  setup(props, { emit }) {
     const prefixCls = componentName;
     provide('gutter', props.gutter);
     const getClass = (prefix: string, type: string) => {
-      return prefix
-        ? type
-          ? `nut-row-${prefix}-${type}`
-          : ''
-        : `nut-row-${type}`;
+      return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
     };
     const getClasses = () => {
       return `
@@ -50,9 +47,13 @@ export default create({
               ${prefixCls}
               `;
     };
-
+    const handleClick = (evt: MouseEvent) => {
+      evt.stopPropagation();
+      emit('click', evt);
+    };
     return {
-      getClasses
+      getClasses,
+      handleClick
     };
   }
 });

src/packages/__VUE/skeleton/demo.vue

@@ -15,6 +15,13 @@
     <h2>标题段落圆角风格</h2>
     <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
 
+    <h2>图片组合</h2>
+
+    <div class="pic-compose">
+      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+    </div>
+
     <h2>显示子组件</h2>
 
     <view class="content">
@@ -56,6 +63,7 @@ export default createDemo({
 
 <style lang="scss">
 .content {
+  margin-bottom: 20px;
   .nut-switch {
     display: flex;
     margin: 0 16px 8px 0;
@@ -79,4 +87,11 @@ export default createDemo({
     }
   }
 }
+.pic-compose {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
+  }
+}
 </style>

src/packages/__VUE/textarea/demo.vue

@@ -5,7 +5,7 @@
     <h2>显示字数统计</h2>
     <nut-textarea v-model="value2" limit-show max-length="20" />
     <h2>高度自定义，拉伸</h2>
-    <nut-textarea v-model="value3" autosize />
+    <nut-textarea v-model="value3" />
     <h2>只读</h2>
     <nut-textarea readonly model-value="textarea只读状态" />
     <h2>禁用</h2>

src/packages/__VUE/textarea/doc.md

@@ -78,7 +78,7 @@ export default {
 | v-model     | 输入值，支持双向绑定                             | String         | -              |
 | placeholder | 设置占位提示文字                                 | String         | `'请输入内容'` |
 | max-length  | 限制最长输入字符                                 | String、Number | -              |
-| rows        | textarea的高度                                   | String、Number | `2`            |
+| rows        | textarea的高度，优先级高于autosize属性                                   | String、Number | `2`            |
 | limit-show  | textarea是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
 | autosize    | 是否自适应内容高度，也可传入对象, 如 { maxHeight: 200, minHeight: 100 }，单位为px | Boolean 、{maxHeight?: number; minHeight?: number}       | `false`        |
 | text-align  | 文本位置,可选值`left`,`center`,`right`           | String         | `left`         |

src/packages/__VUE/textarea/index.vue

@@ -59,7 +59,7 @@ export default create({
       default: false
     },
     autosize: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: false
     },
     autofocus: {
@@ -109,7 +109,7 @@ export default create({
           height = Math.max(height, minHeight);
         }
       }
-      if (height) {
+      if (height && props.rows == '') {
         textarea.style.height = height + 'px';
       }
     };

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

@@ -12,6 +12,13 @@
     <h2>标题段落圆角风格</h2>
     <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
 
+    <h2>图片组合</h2>
+
+    <div class="pic-compose">
+      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+    </div>
+
     <h2>显示子组件</h2>
     <view class="content">
       <nut-switch v-model="checked" size="15px" />
@@ -71,4 +78,11 @@ export default {
     }
   }
 }
+.pic-compose {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
+  }
+}
 </style>