使用 v0.2.3-beta2

安装命令：npm install yc-ui2

main.js 导入

import Ycui2 from "yc-ui2";
import "yc-ui2/dist/yc-ui2.css";

Vue.use(Ycui2);

组件

| Name | Describe | | -------------------------------------------------------------------- | --------------------- | | YcSlideVerify | 滑动验证 | | YcCustomerService YcQuestion | 小优客服 | | YcCA | CA 组件 | | YcTeleport | 存送门（vue3 中类似） | | YcSidebar | 左侧菜单栏 |

yc-slide-verify

滑动验证

vue.config.js

proxy: {
  // 在proxy中添加以下代码
  ['/cloud-img']: {
    target: `http://***:***/cloud-img/`,
    changeOrigin: true,
    pathRewrite: {
      ["^/cloud-img"]: "",
    },
  },
}

<yc-slide-verify
  :isShow.sync="isShow"
  @success="handleLogin"
/>

| Param | Type | Describe | | ------- | ---------- | -------- | | title | String | 滑动验证 | | isShow | Boolean | 是否显示 | | success | Function | 成功回调 | | close | Function | 关闭显示 |

yc-customer-service

小优客服右角展示

vue.config.js

proxy: {
  // 在proxy中添加以下代码
  ['/customer-api']: {
    target: `http://***:***`,
    changeOrigin: true,
    pathRewrite: {
      ["^/customer-api"]: "",
    },
  },
}

<yc-customer-service
      :id=""
      :title=""
      :tokenName=""
      jumpPage="/question"
      hotlineService="客服热线" // 可不传，默认：客服热线
    >
      <!-- 定制化插槽部分 -->
      <div>
        <!-- 第一个div内容 右下角显示图片 -->
        <i class="el-icon-mobile"></i>
      </div>
      <div>
        <!-- 第二个div内容 鼠标放入第一个div会提示以下部分 -->
        <span>客服热线</span>
        <a href="tel:***">***</a>
        <template v-if="!['/login', '/register'].includes($route.path)">
          <span style="margin-top: 10px">***服务电话</span>
          <a href="tel:***">***（***）</a>
          <a href="tel:***">***（***）</a>
        </template>
      </div>
    </yc-customer-service>

| Param | Type | Describe | | -------------- | -------- | ---------------------------------------- | | id | Number | 服务 id | | title | String | 服务标题 | | tokenName | String | token 名称 | | jumpPage | String | 展开跳转客服页面 | | hotlineService | String | 右下角显示文字（可不传，默认：客服热线） |

yc-question

小优客服页面

需要在白名单中添加 /question 页面；有的在 permission.js 有的在 router 中

const whiteList = ["/login", "......", "/question"];

路由中需要配置 yc-customer-service 组件中 jumpPage 参数跳转的页面 router/index.js 路由中添加以下部分

{
    path: "/question", //yc-customer-service组件中jumpPage参数保持一致
    component: (resolve) => require(["@/views/question"], resolve),
    hidden: true,
  },

根据自己编写的路由文件创建文件：views/question.vue 新创建的 question.vue 中加入以下代码

<template>
  <YcQuestion
    :id=""
    :title=""
    :commit=""
    :tokenName=""
  ></YcQuestion>
</template>

| Param | Type | Describe | | --------- | -------- | ---------- | | id | Number | 服务 id | | title | String | 服务 Name | | commit | String | 描述 | | tokenName | String | token 名称 |

YcCA

CA 组件

<YcCA
  :region="region"
  @caSuccess="login"
/>

| Param | Type | Describe | | --------- | ---------- | --------------- | | region | Number | CA 地区类型 | | caSuccess | Function | CA 成功回调方法 |

YcTeleport

存送门

<yc-teleport :to="body"></yc-teleport>

| Param | Type | Describe | | ----- | --------------------- | -------- | | to | 默认body、id、class | 传送地方 |

YcSidebar

左侧菜单栏

<yc-sidebar
  :routeList="jsonRouter"
  background="#FFFFFF"
  color="#FF5449"
  exclude="/marginPrice, xmHeading"
  @before-click="handleChild"
>
  <!-- 项目logo -->
  <template #logo
    ><img :src="require('assets/customerService/admin.jpg')"
  /></template>
  <!-- 菜单栏图标 -->
  <template #menu-icon>
    <i class="el-icon-setting"></i>
  </template>
</yc-sidebar>

<script>
  export default {
    methods: {
      // 案例：自定义拦截方法-跳转页面
      handleChild(item, backFun) {
        const isTrue = item.path != "/marginPrice";
        if (!isTrue) {
          const { protocol, hostname } = document.location;
          const _url =
            protocol +
            "//" +
            hostname +
            ":" +
            process.env.VUE_APP_JUMP_PLATFORM;
          window.open(_url + "?jump_token=" + Cookies.get("Admin-Token"));
        }
        backFun(isTrue);
      },
    },
  };
</script>

| Param | Type | Describe | | ------------ | --------------------------------------------- | ------------------------------------------------------- | | routeList | Array | 菜单数据 | | title | String | 项目标题 | | background | String | 背景颜色 | | color | String 默认值：#4e88f3 | 文字颜色 | | width | String 默认值：170px | 菜单栏宽度 | | height | String 默认值：45px | 菜单栏单行高 | | itemHeight | String 默认值：32px | 子菜单行高 | | exclude | Array String,号分割 | 搜索移除 | | before-click | Function<{path: string}, Function<Boolean>> | 菜单栏点击事件触发之前执行, false 阻止冒泡，true 不阻止 |