Skip to content

Commit

Permalink
fix: docs,demo,组件bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ymm0008
Ymm0008 committed Jan 11, 2023
1 parent e78517c commit a77ad49
Show file tree
Hide file tree
Showing 9 changed files with 72 additions and 43 deletions.
2 changes: 1 addition & 1 deletion src/packages/__VUE/barrage/demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="demo">
<h2>{{ translate('basic') }}</h2>
<nut-cell>
<!-- <nut-barrage ref="danmu" :danmu="list"></nut-barrage> -->
<nut-barrage ref="danmu" :danmu="list"></nut-barrage>
</nut-cell>
<div class="test">
<nut-button @click="addDanmu" class="add nut-button--primary">{{ translate('btn1') }}</nut-button>
Expand Down
62 changes: 45 additions & 17 deletions src/packages/__VUE/barrage/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</div>
</template>
<script lang="ts">
import { computed, onMounted, onUnmounted, onDeactivated, ref, watch, nextTick, useSlots, onActivated } from 'vue';
import { computed, onMounted, onUnmounted, ref, watch, nextTick, useSlots } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { componentName, create } = createComponent('barrage');
Expand Down Expand Up @@ -40,7 +40,7 @@ export default create({
default: true
}
},
setup(props, { slots }) {
setup(props) {
const classTime = new Date().getTime();
const slotDefault = !!useSlots().default;
Expand All @@ -64,6 +64,17 @@ export default create({
onMounted(() => {
init();
if (slotDefault) {
document.addEventListener('visibilitychange', function () {
if (document.visibilityState === 'hidden') {
clearTime();
index.value = 0;
eleSlot('hidden');
} else if (document.visibilityState === 'visible') {
init();
}
});
}
});
onUnmounted(() => {
Expand All @@ -74,23 +85,34 @@ export default create({
const init = () => {
danmuCWidth.value = dmBody.value.offsetWidth;
if (slotDefault) {
const list = document.getElementsByClassName('slotBody' + classTime);
let childrens = list?.[0]?.children || [];
const dmList: any[] = [];
if (childrens) {
Array.from(childrens).forEach((item: any) => {
item.style.opacity = '0';
dmList.push(item);
});
}
danmuList.value = dmList;
eleSlot('init');
}
setTimeout(() => {
dmBody.value?.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
run();
}, 300);
};
const eleSlot = (flag?: string) => {
const list = document.getElementsByClassName('slotBody' + classTime);
let childrens = list?.[0]?.children || [];
const dmList: any[] = [];
if (childrens) {
Array.from(childrens).forEach((item: any) => {
if (flag == 'init') {
item.style.opacity = '0';
dmList.push(item);
} else {
item.classList = '';
item.style = {};
}
});
}
if (flag == 'init') {
danmuList.value = dmList;
}
};
const clearTime = () => {
clearTimeout(timer);
timer = 0;
Expand Down Expand Up @@ -118,10 +140,8 @@ export default create({
clearTime();
timer = setTimeout(() => {
play();
run();
}, props.frequency);
};
// const distance = ref('0');
const play = () => {
if (!props.loop && index.value >= danmuList.value.length) {
return;
Expand Down Expand Up @@ -151,18 +171,26 @@ export default create({
const width = el.offsetWidth;
el.style.width = width + 20 + 'px';
}
// el.style.left = "-"+(_index % rows.value) + 'px';
// el.style.left = '-' + (_index % rows.value) + 'px';
// el.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
// distance.value = '-' + (speeds / 1000) * 150 + '%';
el.dataset.index = `${_index}`;
// el.dataset.index = `${_index}`;
el.addEventListener('animationend', () => {
if (slotDefault) {
el?.classList?.contains('move') && el.classList.remove('move');
el.classList.remove('move');
} else {
dmContainer.value.removeChild(el);
}
});
index.value++;
if (index.value >= danmuList.value.length) {
index.value = 0;
}
el.removeEventListener('animationend', () => {
// 回调
});
run();
});
};
return { classTime, classes, danmuList, dmBody, dmContainer, add };
Expand Down
16 changes: 8 additions & 8 deletions src/packages/__VUE/collapse/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ Control the expanded panel list through 'V-model', and 'activenames' is in array

```html
<template>
<nut-collapse v-model:active="activeNames">
<nut-collapse v-model="activeNames">
<nut-collapse-item :name="1">
<template v-slot:mTitle>
<template v-slot:title>
{{title1}}
</template>
Nutui is a lightweight Vue component library with JD style
Expand Down Expand Up @@ -56,7 +56,7 @@ export default {
};
}
}
</script>
```
:::
### accordion
Expand All @@ -66,7 +66,7 @@ You can set accordion mode through 'accordion', and expand up to one panel. At t
:::demo
```html
<template>
<nut-collapse v-model:active="activeName" :accordion="true">
<nut-collapse v-model="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1" :value="subTitle">
Build scenes based on JD design language system
</nut-collapse-item>
Expand Down Expand Up @@ -96,7 +96,7 @@ export default {
};
}
}
</script>
</>
```
:::
Expand All @@ -109,11 +109,11 @@ Set custom icons through icon and rotate to set the rotation angle of icons
```html
<template>
<nut-collapse
v-model:active="activeName"
v-model="activeName"
:accordion="true"
>
<nut-collapse-item :title="title1" :name="1" :icon="Notice">
<template v-slot:sTitle>
<template v-slot:value>
text test
</template>
NUTUI3. 0 rethink its internal consistency and composability
Expand Down Expand Up @@ -153,7 +153,7 @@ Set content through slot: extrarender

```html
<template>
<nut-collapse v-model:active="activeName" :accordion="true">
<nut-collapse v-model="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1">
<template v-slot:extraRender>fixed content</template>
Nutui is a lightweight Vue component library with JD style
Expand Down
14 changes: 7 additions & 7 deletions src/packages/__VUE/collapse/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ app.use(CollapseItem);

```html
<template>
<nut-collapse v-model:active="activeNames">
<nut-collapse v-model="activeNames">
<nut-collapse-item :name="1">
<template v-slot:mTitle>
<template v-slot:title>
{{title1}}
</template>
NutUI是一套拥有京东风格的轻量级的 Vue 组件库
Expand Down Expand Up @@ -53,7 +53,7 @@ export default {
};
}
}
</script>
```
:::

Expand All @@ -65,7 +65,7 @@ export default {

```html
<template>
<nut-collapse v-model:active="activeName" :accordion="true">
<nut-collapse v-model="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1" :value="subTitle">
基于京东设计语言体系，构建场景
</nut-collapse-item>
Expand Down Expand Up @@ -108,11 +108,11 @@ export default {
```html
<template>
<nut-collapse
v-model:active="activeName"
v-model="activeName"
:accordion="true"
>
<nut-collapse-item :title="title1" :name="1" :icon="Notice">
<template v-slot:sTitle>
<template v-slot:value>
文本测试
</template>
NUTUI3.0重新思考其内在的一致性和可组合性
Expand Down Expand Up @@ -151,7 +151,7 @@ export default {

```html
<template>
<nut-collapse v-model:active="activeName" :accordion="true">
<nut-collapse v-model="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1">
<template v-slot:extraRender>固定内容</template>
NutUI是一套拥有京东风格的轻量级的 Vue 组件库
Expand Down
14 changes: 7 additions & 7 deletions src/packages/__VUE/collapse/doc.taro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ app.use(CollapseItem);

```html
<template>
<nut-collapse v-model:active="activeNames">
<nut-collapse v-model="activeNames">
<nut-collapse-item :name="1">
<template v-slot:mTitle>
<template v-slot:title>
{{title1}}
</template>
NutUI是一套拥有京东风格的轻量级的 Vue 组件库
Expand Down Expand Up @@ -53,7 +53,7 @@ export default {
};
}
}
</script>
```
:::

Expand All @@ -65,7 +65,7 @@ export default {

```html
<template>
<nut-collapse v-model:active="activeName" :accordion="true">
<nut-collapse v-model="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1" :value="subTitle">
基于京东设计语言体系，构建场景
</nut-collapse-item>
Expand Down Expand Up @@ -108,11 +108,11 @@ export default {
```html
<template>
<nut-collapse
v-model:active="activeName"
v-model="activeName"
:accordion="true"
>
<nut-collapse-item :title="title1" :name="1" :icon="Notice">
<template v-slot:sTitle>
<template v-slot:value>
文本测试
</template>
NUTUI3.0重新思考其内在的一致性和可组合性
Expand Down Expand Up @@ -151,7 +151,7 @@ export default {

```html
<template>
<nut-collapse v-model:active="activeName" :accordion="true">
<nut-collapse v-model="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1">
<template v-slot:extraRender>固定内容</template>
NutUI是一套拥有京东风格的轻量级的 Vue 组件库
Expand Down
1 change: 1 addition & 0 deletions src/packages/__VUE/countup/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
display: block;
}
.nut-countup__machine {
display: block;
overflow: hidden;
.nut-countup__machine-item {
float: left;
Expand Down
2 changes: 1 addition & 1 deletion src/packages/__VUE/skeleton/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default {
|------------|-------------------------------------------------|---------|----------|
| loading | Whether to display skeleton screen | boolean | `true` |
| width | Width per row | string | `default` |
| height | Height of each row | string | `100px` |
| height | Height of each row | string | `15px` |
| animated | Whether to turn on skeleton screen animation | boolean | `false` |
| avatar | Show avatar | boolean | `false` |
| avatar-shape | Avatar shape: square / round | string | `round` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/__VUE/skeleton/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default {
|------------|-------------------------------------------------|---------|----------|
| loading | 是否显示骨架屏 | boolean | `true` |
| width | 每行宽度 | string | `default` |
| height | 每行高度 | string | `100px` |
| height | 每行高度 | string | `15px` |
| animated | 是否开启骨架屏动画 | boolean | `false` |
| avatar | 是否显示头像 | boolean | `false` |
| avatar-shape | 头像形状：正方形/圆形 | string | `round` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/__VUE/skeleton/doc.taro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export default {
|------------|-------------------------------------------------|---------|----------|
| loading | 是否显示骨架屏 | boolean | `true` |
| width | 每行宽度 | string | `default` |
| height | 每行高度 | string | `100px` |
| height | 每行高度 | string | `15px` |
| animated | 是否开启骨架屏动画 | boolean | `false` |
| avatar | 是否显示头像 | boolean | `false` |
| avatar-shape | 头像形状：正方形/圆形 | string | `round` |
Expand Down

0 comments on commit a77ad49

Please sign in to comment.