vue使用element ui绘制一个el-switch开关，开关上的文字分别是分页与列表，点击列表时，分页那一半的文字至灰，点击分页时，列表那一半的文字至灰，开关为圆角矩形

可以使用下面的代码来实现：

<template>
  <el-switch
    v-model="switchValue"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="列表"
    inactive-text="分页"
    :before-icon-class="switchValue ? 'el-icon-menu' : 'el-icon-document'"
    :after-icon-class="switchValue ? 'el-icon-document' : 'el-icon-menu'"
    :class="switchValue ? 'switch-list' : 'switch-page'"
  />
</template>

<style>
.switch-list .el-switch__core {
  border-radius: 30px;
}

.switch-page .el-switch__core {
  border-radius: 30px;
}

.switch-list .el-switch__label--right {
  opacity: 0.5;
}

.switch-page .el-switch__label--left {
  opacity: 0.5;
}
</style>

<script>
export default {
  data() {
    return {
      switchValue: false,
    };
  },
};
</script>

其中，通过设置 `active-text` 和 `inactive-text` 分别为 "列表" 和 "分页" 来设置开关上的文字。通过设置 `before-icon-class` 和 `after-icon-class` 分别为 `"el-icon-menu"` 和 `"el-icon-document"` 来设置开关上的图标。通过设置 `switchValue` 来控制开关的状态。通过设置 `class` 来区分开关的样式。在样式中，通过设置 `.switch-list .el-switch__core` 和 `.switch-page .el-switch__core` 分别为开关设置圆角矩形的样式。通过设置 `.switch-list .el-switch__label--right` 和 `.switch-page .el-switch__label--left` 分别为开关上的文字设置灰度。