yc-ui2 v0.2.3-beta3

使用 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);

组件

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"
/>

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>

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>

YcCA

CA 组件

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

YcTeleport

存送门

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

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>