下载
npm i sharedesign-component
使用演示
<template>
<div class="page">
<div class="top-banner"></div> // 页面中组件的定位元素
........
</div>
</template>
<script>
import {TopBanner} from 'shareComp-ui/index.js';
export default {
data () {
return {}
},
mounted() {
new TopBanner(
{
element: document.querySelector(".top-banner"),
mode: "dark",
location: "top",
callback: () => {
console.log("########顶部logo按钮的事件回调");
}
}
)
}
}
</script>
2.cdn
<!-- 页面中需要引入填写一个空元素 -->
<div class="top-banner">
<!-- 引入css文件 -->
<link rel="stylesheet" href="https://xxx.oss.shareComp-ui.min.css" />
<!-- 引入js文件 -->
<script src="https://xxx.oss.shareComp-ui.js"></script>
<!-- 初始化组件 -->
<script>
// 使用演示
new ShareCompUi.TopBanner({
element: document.querySelector('.top-banner'),
mode: 'dark',
location: 'top',
isFixed: false,
callback: () => {
console.log('########顶部logo按钮的事件回调')
},
})
</script>
</div>
组件效果
组件 API
TopBanner
吸顶吸底的 logo banner
属性 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
element | 组件标签容器 | 单个 dom 元素 | null | 是 |
isFixed | 是否吸顶吸底,false 表示普通的 div | boolean | true | 否 |
channel | 用作页面中的 channel | string | ShareCompUi | 否 |
channelId | 页面所需的 id | string | 空 | 是 |
location | 吸附类型,可选值 top bottom none
|
string | top | 否 |
mode | 主题模式 可选值 dark light
|
string | dark | 否 |
callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
;<div class="top-banner"></div>
// js
new ShareCompUi.TopBanner({
element: document.querySelector('.top-banner'),
mode: 'dark',
location: 'top',
isFixed: false,
callback: () => {
console.log('########顶部logo按钮的事件回调')
},
})
VideoMoreButton
查看更多视频按钮
属性 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
element | 组件标签容器 | 单个 dom 元素 | null | 是 |
channel | 用作页面中的 channel | string | ShareCompUi | 否 |
channelId | 页面所需的渠道 id(用作数据统计) | string | 空 | 是 |
callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
;<div class="video-button"></div>
// js
new ShareCompUi.VideoMoreButton({
element: document.querySelector('.video-button'),
text: '打开“App”,查看更多精彩视频',
callback: () => {
console.log('打开“App”,查看更多精彩视频按钮的事件回调')
},
})
MoreButton
查看更多文章、更多评论的按钮
属性 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
element | 组件标签容器 | 单个 node 元素 | null | 是 |
type | 按钮类型,可选值 comment
|
string | comment | 否 |
channel | 用作页面中的 channel | string | ShareCompUi | 否 |
channelId | 页面所需的渠道 id(用作数据统计) | string | 空 | 是 |
location | 吸附类型,可选值 top bottom
|
string | top | 否 |
mode | 主题模式 可选值 dark light
|
string | dark | 否 |
callback | 组件点击事件的回调函数,回调函数中返回一个 string 类型的参数,'expand'表示用户展开了的箭头,'jump'表示用户点击了跳转的按钮 | function | 无 | 否 |
代码示例:
// html
;<div class="more-button"></div>
// js
new ShareCompUi.MoreButton({
element: document.querySelector('.more-button'),
type: 'article',
text: '打开“App”查看全文',
callback: (key) => {
if (key === 'expand') {
console.log('--------》展开按钮的事件回调')
} else if (key === 'jump') {
console.log('--------》查看全文按钮的事件回调')
}
},
})
EvokeButton
打开 App 的按钮
属性 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
element | 组件标签容器 | 单个 dom 元素 | null | 是 |
type | 按钮类型,可选值 comment commend ,comment 类型会显示箭头 |
string | comment | 否 |
channel | 用作页面中的 channel | string | ShareCompUi | 否 |
channelId | 页面所需的渠道 id(用作数据统计) | string | 空 | 是 |
callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
;<div class="more-commet-button"></div>
// js
new ShareCompUi.EvokeButton({
element: document.querySelector('.more-commet-button'),
showIcon: true,
type: 'comment',
callback: () => {
console.log('--------》评论唤起按钮的事件回调')
},
})
Swiper
轮播类组件,最多展示 5 帧
属性 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
element | 组件标签容器 | 单个 dom 元素 | null | 是 |
data | 轮播数据 | array | [] | 是 |
type | 按钮类型,可选值 comment article
|
string | comment | 否 |
threshold | 拖动的临界值(单位为 px),触摸距离小于该值不会切换 | number | 50 | 否 |
duration | 间隔时间 | number | 500 | 否 |
channel | 用作页面中的 channel | string | ShareCompUi | 否 |
channelId | 页面所需的渠道 id(用作数据统计) | string | 空 | 是 |
location | 吸附类型,可选值 top bottom
|
string | top | 否 |
mode | 主题模式 可选值 dark light
|
string | dark | 否 |
callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
;<div class="swiper-box"></div>
// js
new ShareCompUi.Swiper({
container: document.querySelector('.swiper-box'),
position: 'bottom',
type: 'comment',
data: [
{
img: 'https://img.36krcdn.com/20200828/v2_09cbece3aa684ad2a4f3a58daa4f6f10_img_000',
text: '111热门回复:父母最大的悲哀是年老后在子女面前变得小心翼翼',
url: 'www.baidu.com',
},
{
img: 'https://img.36krcdn.com/20200401/v2_eaf81d89a62d4cffbe62164ae29503b7_img_000',
text: '2222热门跟贴:前年去西藏自驾,看到近边境延绵十几公里的野战军临时营房、装备和车辆,和俄罗斯方块一样整齐',
url: 'www.baidu.com',
},
{
img: 'https://img.36krcdn.com/20200403/v2_443a3bcfe66446ba93a3b0b82a186a16_img_000',
text: '5555热门回复:父母最大的悲哀是年老后在子女面前变得小心翼翼',
url: 'www.baidu.com',
},
],
callback: (index) => {
console.log('--------》评论回复轮播按钮的事件回调' + index)
},
})