Skip to content

Commit 2d28a43

Browse files
committed
docs: update README
1 parent ed6c885 commit 2d28a43

File tree

1 file changed

+0
-47
lines changed

1 file changed

+0
-47
lines changed

README.md

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -186,53 +186,6 @@ import "1llest-waveform-vue/lib/style.css"
186186

187187

188188

189-
## Advanced usage
190-
191-
### Solo play
192-
193-
If you want to render a list of waveforms, then you definitely want to play only one track at a time. My component does not provide this feature, because it is just an independent component, which is uncontrollable for other waveform components. So you can easily achieve this requirement by borrowing some features of vue.
194-
195-
196-
1. You can expose some methods and properties in your `child` components that encapsulate the 1llestWaveform component,
197-
```js
198-
// Demo.vue
199-
const play = () => {
200-
emits('play', props.id)
201-
waveformRef.value!.play()
202-
}
203-
204-
const emits = defineEmits(['play'])
205-
206-
defineExpose({
207-
pause,
208-
playing,
209-
id: props.id,
210-
})
211-
```
212-
2. Your `parent` component can have the following configuration
213-
```vue
214-
// App.vue
215-
<Demo
216-
v-for="item in items"
217-
ref="childs"
218-
:id="item.id"
219-
:key="item.id"
220-
@play="playHandler"
221-
/>
222-
```
223-
```js
224-
const childs = reactive<(typeof Demo)[]>([])
225-
226-
const playHandler = (id: string) => {
227-
childs.forEach((child) => {
228-
if (child.id !== id && child.playing) child.pause()
229-
})
230-
}
231-
```
232-
You can define any unique identifier to replace the `id` attribute in `child.id !== id`, but please make sure that this attribute **exists** in the child component and **expose** it, the most important thing is that it **represents the component uniqueness**
233-
> The above code can be found in the [example](https://github.com/codeacme17/1llest-waveform-vue/tree/main/example) folder. If you have a better way to implement this feature, please suggest it in an [issue](https://github.com/codeacme17/1llest-waveform-vue/issues/new/choose), I will be very grateful
234-
235-
236189
## Contributing
237190

238191
Contributions to the project are welcome! If you find a bug or have an idea for a new feature, please submit an issue or pull request.

0 commit comments

Comments
 (0)