sspai-ui

🔧引入依赖包

npm install

🔧开发

npm run dev

🔧本地开发使用 yalc 调试

// 安装 yalc
npm i yalc -g
// 打包
npm run lib
// 发布依赖
yalc publish
// 更新
yalc push
// 其他项目下引用依赖
yalc add sspai-ui

📦打包 lib

npm run lib

⏫发布

确定可以上线的包

npm run release
npm publish

不确定是否可以上线的包需要打tag

npm run release -- --prerelease beta
npm publish --tag beta

📦打包 Web Component

由于经常有创建独立页的需求，且独立页开发不限框架，为了 UI 上的统一，避免重复开发通用组件，使用 vue-custom-element 生成 wc 库，并在其他项目中无缝引用

使用

1. npm run wc将组件打包导出至 sspai-ui-wc 目录中
2. 将 sspai-ui-wc 目录复制到对应项目中
3. 直接引用

<script src="https://cdn-static.sspai.com/libs/[email protected]/vue.runtime.min.js"></script>
<script src="../sspai-ui-wc/sspai-ui-wc.umd.js"></script>
<link rel="stylesheet" href="../sspai-ui-wc/sspai-ui-wc.css">

使用顶部导航栏

设置样式

<style>
  body {
    --h-ssCustomHeader: 56px;
  }
  ss-custom-header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 99;
  }
  ss-custom-header button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: .2s;
  }
  ss-custom-header a {
    text-decoration: none;
  }
  ss-custom-header input {
    outline: none;
  }
</style>

<ss-custom-header></ss-custom-header>

配置数据和监听事件

const ssCustomHeader = document.querySelector('ss-custom-header')
ssCustomHeader.isLogin = false
ssCustomHeader.userInfo = null
ssCustomHeader.addEventListener('login', () => {
  window.sessionStorage.setItem('referer', window.location.pathname + window.location.search)
  openLink('/login', '_self')
})
ssCustomHeader.addEventListener('logout', () => {
  window.localStorage.setItem('ssToken', '')
  // 清除 cookies，视项目情况而定
  // Cookies.remove('sspai_jwt_token')
  // Cookies.remove('sspai_cross_token')
  window.location.reload()
})
// 图片处理依赖这两个参数，必须
window.isSupportWebp = (function () {
  const elem = document.createElement('canvas')
  if (elem.getContext && elem.getContext('2d')) {
    return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0
  }
  return false
})()
window.__CDN_HOST_ = 'https://test-images.sspai.com/'

参考：会员介绍独立页

开发

入口在 packages/webComponents/index.js 直接将需要的组件引入，需要注意的是不能使用任何全局的内容包括组件、指令、方法等，需要另外设置