upd: 折叠面板增加 icon 设置，文档同步

src/packages/collapse/demo.vue

@@ -9,7 +9,19 @@
         <nut-collapse-item :title="title2" :name="2">
           京东到家：教师节期间 创意花束销量增长53倍
         </nut-collapse-item>
-        <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
+        <nut-collapse-item :title="title3" :name="3" disabled>
+        </nut-collapse-item>
+      </nut-collapse>
+    </div>
+    <h4>无icon样式</h4>
+    <div class="show-demo">
+      <nut-collapse v-model:active="active4" :accordion="true" :icon="icon2">
+        <nut-collapse-item :title="title1" :name="1">
+          2020年中国数字游戏市场规模超2786亿元
+        </nut-collapse-item>
+        <nut-collapse-item :title="title2" :name="2">
+          基于区块链技术的取证APP在浙江省杭州市发布
+        </nut-collapse-item>
       </nut-collapse>
     </div>
     <div class="show-demo">
@@ -27,7 +39,7 @@
       </nut-collapse>
     </div>
     <div class="show-demo">
-      <h4>图标展示</h4>
+      <h4>自定义折叠图标</h4>
       <nut-collapse
         v-model:active="active3"
         :accordion="true"
@@ -45,6 +57,22 @@
         </nut-collapse-item>
       </nut-collapse>
     </div>
+    <div class="show-demo">
+      <h4>自定义标题图标</h4>
+      <nut-collapse
+        v-model:active="active5"
+        :titleIcon="titleIcon"
+        :accordion="true"
+        :rotate="rotate"
+      >
+        <nut-collapse-item :title="title1" :name="1">
+          “森亿智能”获4亿元D轮融资
+        </nut-collapse-item>
+        <nut-collapse-item :title="title2" :name="2">
+          快看漫画与全球潮玩集合店X11达成战略合作
+        </nut-collapse-item>
+      </nut-collapse>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -57,12 +85,18 @@ export default createDemo({
       active1: [1, '2'],
       active2: 1,
       active3: 1,
+      active4: 1,
+      active5: 1,
       expandIconPosition: 'left',
       title1: '标题1',
       title2: '标题2',
       title3: '标题3',
       subTitle: '副标题',
-      icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png',
+      icon:
+        'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png',
+      icon2: 'none',
+      titleIcon:
+        'https://img13.360buyimg.com/imagetools/jfs/t1/144156/13/19748/1977/5fe2f5f8E21020483/a15144ab447bfbf2.png',
       iconWidth: '20px',
       iconHeight: '20px',
       rotate: 90

src/packages/collapse/doc.md

@@ -109,8 +109,12 @@ export default {
 | title | 标题栏左侧内容 | string | - |
 | name | 唯一标识符，必填 | string \ number | -1 |
 | expand-icon-position | 标题图标的位置 | string | right |
+| title-icon | 标题图标链接 | string | ‘none’ 为不展示图标，默认 ‘’ |
+| title-icon-width | 标题图标宽度 | string | 13px |
+| title-icon-height | 标题图标高度 | string | 13px |
+| title-icon-position | 标题图标位置 | string | ‘left' 'right' |
 | sub-title | 标题栏副标题 | string | - |
-| icon | 标题栏自定义图标链接 | string | - |
+| icon | 标题栏自定义图标链接 | string | ‘none’ 为不展示图标，默认 ‘’ |
 | icon-width | 标题栏自定义图标宽度 | string | 24px |
 | icon-height | 标题栏自定义图标高度 | string | 12px |
 | rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |

src/packages/collapse/index.vue

@@ -22,17 +22,33 @@ export default create({
       type: String,
       default: 'right'
     },
+    titleIcon: {
+      type: String,
+      default: ''
+    },
+    titleIconWidth: {
+      type: String,
+      default: '13px'
+    },
+    titleIconHeight: {
+      type: String,
+      default: '13px'
+    },
+    titleIconPosition: {
+      type: String,
+      default: 'left'
+    },
     icon: {
       type: String,
       default: ''
     },
     iconWidth: {
       type: String,
-      default: ''
+      default: '24px'
     },
     iconHeight: {
       type: String,
-      default: ''
+      default: '12px'
     },
     rotate: {
       type: [String, Number],
@@ -43,7 +59,10 @@ export default create({
     const { active } = toRefs(props);
     // 多个 item 展开
     const changeValAry = (name: any) => {
-      const activeItem: any = active?.value instanceof Object ? Object.values(active.value) : active?.value;
+      const activeItem: any =
+        active?.value instanceof Object
+          ? Object.values(active.value)
+          : active?.value;
       let index = -1;
       activeItem.forEach((item: string | number, idx: number) => {
         if (String(item) == String(name)) {
@@ -56,7 +75,10 @@ export default create({
     };
 
     // 更新v-modal的值
-    const changeVal = (val: string | number | Array<string | number>, expanded: boolean) => {
+    const changeVal = (
+      val: string | number | Array<string | number>,
+      expanded: boolean
+    ) => {
       emit('update:active', val);
     };
 
@@ -76,6 +98,8 @@ export default create({
       value: props.active,
       accordion: props.accordion,
       expandIconPosition: props.expandIconPosition,
+      titleIcon: props.titleIcon,
+      titleIconPosition: props.titleIconPosition,
       icon: props.icon,
       rotate: props.rotate,
       changeValAry,

src/packages/collapseitem/index.scss

@@ -47,7 +47,15 @@
       top: 50%;
       right: 60px;
       margin-top: -12px;
-      color: #969799;
+      color: #999999;
+    }
+    .titleIconRight {
+      vertical-align: middle;
+      margin: -1px 0 0 10px;
+    }
+    .titleIconLeft {
+      vertical-align: middle;
+      margin: -1px 10px 0 0;
     }
   }
   .collapse-wrapper {
@@ -58,8 +66,8 @@
     transition: height 0.3s ease-in-out;
     .collapse-content {
       display: block;
-      padding: 12px 16px;
-      color: #969799;
+      padding: 12px 26px;
+      color: #666666;
       font-size: 14px;
       line-height: 1.5;
       background-color: #fff;

src/packages/collapseitem/index.vue

@@ -1,12 +1,54 @@
 <template>
-  <view :class="['nut-collapse-item', { 'nut-collapse-item-left': classDirection == 'left' }, { 'nut-collapse-item-icon': icon }]">
-    <view :class="['collapse-item', { 'item-expanded': openExpanded }, { 'nut-collapse-item-disabled': disabled }]" @click="toggleOpen">
+  <view
+    :class="[
+      'nut-collapse-item',
+      { 'nut-collapse-item-left': classDirection == 'left' },
+      { 'nut-collapse-item-icon': icon && icon != 'none' }
+    ]"
+  >
+    <view
+      :class="[
+        'collapse-item',
+        { 'item-expanded': openExpanded },
+        { 'nut-collapse-item-disabled': disabled }
+      ]"
+      @click="toggleOpen"
+    >
       <view class="collapse-title">
-        <view v-html="title"></view>
+        <view>
+          <img
+            v-if="titleIcon != 'none' && titleIconPosition == 'left'"
+            :src="titleIcon"
+            :style="titleIconWH"
+            class="titleIconLeft"
+          />
+          <view v-html="title"></view>
+          <img
+            v-if="titleIcon != 'none' && titleIconPosition == 'right'"
+            :src="titleIcon"
+            :style="titleIconWH"
+            class="titleIconRight"
+          />
+        </view>
       </view>
       <view v-if="subTitle" v-html="subTitle" class="subTitle"></view>
-      <i v-if="icon" :class="['collapse-icon', { 'col-expanded': openExpanded }, { 'collapse-icon-disabled': disabled }]" :style="iconStyle"></i>
-      <i v-else :class="['collapse-icon', { 'col-expanded': openExpanded }, { 'collapse-icon-disabled': disabled }]"></i>
+      <i
+        v-if="icon && icon != 'none'"
+        :class="[
+          'collapse-icon',
+          { 'col-expanded': openExpanded },
+          { 'collapse-icon-disabled': disabled }
+        ]"
+        :style="iconStyle"
+      ></i>
+      <i
+        v-else-if="icon != 'none'"
+        :class="[
+          'collapse-icon',
+          { 'col-expanded': openExpanded },
+          { 'collapse-icon-disabled': disabled }
+        ]"
+      ></i>
     </view>
     <view class="collapse-wrapper" ref="wrapperRef">
       <view class="collapse-content" ref="contentRef">
@@ -16,7 +58,15 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, toRefs, onMounted, ref, nextTick, computed, watch } from 'vue';
+import {
+  reactive,
+  toRefs,
+  onMounted,
+  ref,
+  nextTick,
+  computed,
+  watch
+} from 'vue';
 import { createComponent } from '@/utils/create';
 import { useParent } from '@/utils/useRelation/useParent';
 import { COLLAPSE_KEY } from './../collapse/index.vue';
@@ -55,20 +105,32 @@ export default create({
       iconStyle: {
         width: '20px',
         height: '20px',
-        'background-image': 'url(https://img10.360buyimg.com/imagetools/jfs/t1/111306/10/17422/341/5f58aa0eEe9218dd6/28d76a42db334e31.png)',
+        'background-image':
+          'url(https://img10.360buyimg.com/imagetools/jfs/t1/111306/10/17422/341/5f58aa0eEe9218dd6/28d76a42db334e31.png)',
         'background-repeat': 'no-repeat',
         'background-size': '100% 100%',
         transform: 'rotate(0deg)'
       }
     });
 
+    const titleIconStyle = reactive({
+      titleIcon: parent.titleIcon,
+      titleIconPosition: parent.titleIconPosition,
+      titleIconWH: {
+        width: '13px',
+        height: '13px'
+      }
+    });
+
     // 获取 Dom 元素
     const wrapperRef: any = ref(null);
     const contentRef: any = ref(null);
 
     // 清除 willChange 减少性能浪费
     const onTransitionEnd = () => {
-      const wrapperRefEle: any = document.getElementsByClassName('collapse-wrapper')[0];
+      const wrapperRefEle: any = document.getElementsByClassName(
+        'collapse-wrapper'
+      )[0];
       wrapperRefEle.style.willChange = 'auto';
     };
 
@@ -83,8 +145,10 @@ export default create({
       if (offsetHeight) {
         const contentHeight = `${offsetHeight}px`;
         wrapperRefEle.style.willChange = 'height';
-        wrapperRefEle.style.height = !proxyData.openExpanded ? 0 : contentHeight;
-        if (parent.icon && !proxyData.openExpanded) {
+        wrapperRefEle.style.height = !proxyData.openExpanded
+          ? 0
+          : contentHeight;
+        if (parent.icon && parent.icon != 'none' && !proxyData.openExpanded) {
           proxyData.iconStyle['transform'] = 'rotate(0deg)';
         } else {
           proxyData.iconStyle['transform'] = 'rotate(' + parent.rotate + 'deg)';
@@ -102,8 +166,9 @@ export default create({
 
     const defaultOpen = () => {
       open();
-      if (parent.icon) {
-        proxyData['iconStyle']['transform'] = 'rotate(' + parent.rotate + 'deg)';
+      if (parent.icon && parent.icon != 'none') {
+        proxyData['iconStyle']['transform'] =
+          'rotate(' + parent.rotate + 'deg)';
       }
     };
 
@@ -159,14 +224,15 @@ export default create({
           defaultOpen();
         }
       }
+
       proxyData.classDirection = parent.expandIconPosition;
-      if (parent.icon) {
+      if (parent.icon && parent.icon != 'none') {
         proxyData.iconStyle['background-image'] = 'url(' + parent.icon + ')';
       }
-      if (parent.iconWidth) {
+      if (parent.iconWidth && parent.icon != 'none') {
         proxyData.iconStyle['width'] = parent.conWidth;
       }
-      if (parent.iconHeght) {
+      if (parent.iconHeght && parent.icon != 'none') {
         proxyData.iconStyle['height'] = parent.iconHeight;
       }
     });
@@ -174,6 +240,7 @@ export default create({
     return {
       ...toRefs(proxyData),
       ...toRefs(parent),
+      ...toRefs(titleIconStyle),
       wrapperRef,
       contentRef,
       open,

src/packages/radio/index.vue

@@ -29,7 +29,6 @@ const { componentName, create } = createComponent('radio');
 
 type Iparent = {
   parentNode: boolean;
-  changeVal: Function;
 };
 export default create({
   props: {
@@ -54,12 +53,14 @@ export default create({
   components: {},
   emits: ['input', 'update:modelValue'],
   setup(props, { emit }) {
-    const parentGroup = <Iparent>inject('radiogroup', {
-      parentNode: false
+    const parentGroup = inject('radiogroup', {
+      parentNode: false,
+      changeVal: val => {
+        console.log();
+      }
     });
     const internalInstance = getCurrentInstance()?.parent;
     const parentProps = internalInstance?.props;
-    // const parentEl = internalInstance?.type;
 
     const currentValue = computed({
       get: () => {
@@ -71,7 +72,7 @@ export default create({
       },
       set: val => {
         if (parentGroup && parentGroup.parentNode) {
-          parentGroup?.changeVal(<string | number | boolean>val);
+          parentGroup?.changeVal(val);
         } else {
           emit('input', val);
         }