下面jsx代码怎么改成vue2版本也可以使用？

• Z时代
• 2024-02-16
• 分类：IT

<script lang="jsx">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    showNum: {
      type: Number,
    },
  },
  setup (props, { slots }) {
    // FIXME: slots无法响应式，必须得函数返回并在模版调用才有作用
    function getRows () {
      return slots.default().filter((x) => x.children?.default)
    }
    // eslint-disable-next-line vue/no-setup-props-destructure
    const _slots = getRows()
    let showNum
    if (
      props.showNum === undefined ||
      props.showNum === null ||
      props.showNum === false
    ) {
      showNum = _slots.length
    } else {
      // eslint-disable-next-line vue/no-setup-props-destructure
      showNum = props.showNum
    }
    const divider = <el-divider direction="vertical" />
    return () => (
      <>
        {getRows()
          .slice(0, showNum)
          .map((x, i) => (
            <>
              {i !== 0 ? divider : null}
              <el-link underline={false}>{x}</el-link>
            </>
          ))}
        {getRows().slice(showNum).length ? (
          <>
            {divider}
            {
              <el-dropdown class="app-more" popper-class="app-more-dropdown">
                {{
                  default: () => <svg-icon icon-class="more" class-name="link-more" />,
                  dropdown: () => (
                    <el-dropdown-menu>
                      {{
                        default: () =>
                          getRows()
                            .slice(showNum)
                            .map((x) => {
                              const itemSlot = x.children.default()[0]
                              // console.log(itemSlot)
                              return (
                                <el-dropdown-item {...x.props}>
                                  {itemSlot.children}
                                </el-dropdown-item>
                              )
                            }),
                      }}
                    </el-dropdown-menu>
                  ),
                }}
              </el-dropdown>
            }
          </>
        ) : null}
      </>
    )
  },
})
</script>

<style lang="scss">
.app-more {
  vertical-align: middle;
}
.app-more-dropdown {
  --el-dropdown-menuItem-hover-fill: #fafafa;
  .el-dropdown-menu__item {
    // color: $color-link;
    &:not(.is-disabled) {
      /* stylelint-disable-next-line selector-max-pseudo-class */
      &:focus {
        color: var(--el-text-color-regular);
      }
    }
  }
}
.link-more {
  color: $color-link;
  vertical-align: middle;
  cursor: pointer;
}
</style>

有大佬知道吗？

回答：

<script lang="jsx">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    showNum: {
      type: Number,
      default: 2
    }
  },
  methods:{
    getRows () {
      // eslint-disable-next-line vue/require-slots-as-functions
      return this.$slots.default.filter(x => !x.isComment)
    }
  },
  render () {
    const _slots = this.getRows()
    let showNum 
    if(this.showNum === undefined || this.showNum === null || this.showNum === false) {
      showNum = _slots.length
      console.log(showNum)
    }else{
      // eslint-disable-next-line vue/no-setup-props-destructure
      showNum = this.showNum
    }
    showNum = Math.min(_slots.length, showNum)
    console.log(_slots.length,showNum)
    return (
      <div>
        {this.getRows().slice(0, showNum).map((x,i) => (
          <span>
            <el-link underline={false}>{x}</el-link>
          </span>
        ))}
        {
          this.getRows().slice(showNum).length ? (
            <span>
              {(
                <el-dropdown class="app-more" overlay-class-name="app-more-dropdown">
                  <a class="a-dropdown-link" >
                    <i class="el-icon-more"></i>
                  </a>
                  <el-dropdown-menu>{
                    this.getRows().slice(showNum).map(x => {
                      return (
                        <el-dropdown-item on={x.componentOptions.listeners} >{x}</el-dropdown-item>
                      )
                    })
                  }</el-dropdown-menu>
                </el-dropdown>
              )}
            </span>
          ) : null
        }
      </div>
    )
  }
})
</script>
<style lang="scss" scoped>
.app-more {
  vertical-align: middle;
}
.a-dropdown-link {
  padding: 0 5px;
  cursor: pointer;
  color: $--color-primary;
}
.app-more-dropdown {
  --el-dropdown-menuItem-hover-fill: #FAFAFA;
  .el-dropdown-menu__item {
    // color: $color-link;
    &:not(.is-disabled) {
      /* stylelint-disable-next-line selector-max-pseudo-class */
      &:focus {
        color: var(--el-text-color-regular);
      }
    }
  }
}
.link-button {
  padding: 0;
}
.link-more {
  // color: $color-link;
  vertical-align: middle;
  cursor: pointer;
}
</style>

这是支持vue2.7.14的写法

回答：

你可以试试vue@2.7+jsx-vue2的方案
先把vue升级到vue@2.7的最新版本，再用jsx-vue2当babel预处理器试试

以上是 下面jsx代码怎么改成vue2版本也可以使用？ 的全部内容， 来源链接： utcz.com/p/933990.html