evokeenhance
v1.0.1
Published
jS组件
Downloads
3
Readme
引入
使用演示
<template>
<div class="page">
<div class="top-banner"></div> // 页面中组件的定位元素
........
</div>
</template>
<script>
import {TopBanner} from '../evoke/src/index';
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://evoke-ui.min.css">
<!-- 引入js文件 -->
<script src="https://evoke/index.js"></script>
<!-- 初始化组件 -->
<script>
// 使用演示
new EvokeUi.TopBanner(
{
element: document.querySelector(".top-banner"),
mode: "dark",
location: "top",
isFixed: false,
callback: () => {
console.log("########顶部logo按钮的事件回调");
}
}
);
</script>
组件效果
组件API
TopBanner
吸顶吸底的logo banner
| 属性 | 说明 | 类型 | 默认值 | 是否必传 |
| -------- | :-------------------------------------- | ------------ | ---------------- | -------- |
| element | 组件标签容器 | 单个dom元素 | null | 是 |
| isFixed | 是否吸顶吸底,false表示普通的div | boolean | true | 否 |
| channel | 用作页面中的channel | string | EvokeUI | 否 |
| channelId | 页面所需的id | string | 空 | 是 |
| location | 吸附类型,可选值 top
bottom
none
| string | top | 否 |
| mode | 主题模式 可选值 dark
light
| string | dark | 否 |
| callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
<div class="top-banner"></div>
// js
new EvokeUi.TopBanner(
{
element: document.querySelector(".top-banner"),
mode: "dark",
location: "top",
isFixed: false,
callback: () => {
console.log("########顶部logo按钮的事件回调");
}
}
);
VideoMoreButton
查看更多视频按钮
| 属性 | 说明 | 类型 | 默认值 | 是否必传 | | -------- | :------------------------------- | ------------ | -------------------------------- | -------- | | element | 组件标签容器 | 单个dom元素 | null | 是 | | channel | 用作页面中的channel | string | EvokeUI | 否 | | channelId | 页面所需的渠道id(用作数据统计) | string | 空 | 是 | | callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
<div class="video-button"></div>
// js
new EvokeUi.VideoMoreButton(
{
element: document.querySelector(".video-button"),
text: "打开“App”,查看更多精彩视频",
callback: () => {
console.log(
"打开“App”,查看更多精彩视频按钮的事件回调"
);
},
}
);
MoreButton
查看更多文章、更多评论的按钮
| 属性 | 说明 | 类型 | 默认值 | 是否必传 |
| -------- | :------------------------------- | ------------ | ------------------------ | -------- |
| element | 组件标签容器 | 单个node元素 | null | 是 |
| type | 按钮类型,可选值 comment
| string | comment | 否 |
| channel | 用作页面中的channel | string | EvokeUI | 否 |
| 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 EvokeUi.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 | EvokeUI | 否 |
| channelId | 页面所需的渠道id(用作数据统计) | string | 空 | 是 |
| callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
<div class="more-commet-button"></div>
// js
new EvokeUi.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 | EvokeUI | 否 |
| channelId | 页面所需的渠道id(用作数据统计) | string | 空 | 是 |
| location | 吸附类型,可选值 top
bottom
| string | top | 否 |
| mode | 主题模式 可选值 dark
light
| string | dark | 否 |
| callback | 组件点击事件的回调函数 | function | 无 | 否 |
代码示例:
// html
<div class="swiper-box"></div>
// js
new EvokeUi.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);
},
}
);