shuffle string Vue component.
here.
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-shuffle-string"></script>
<body>
<div id="demo1">
<div>
<v-shuffle-string string="Loading..." />
</div>
</div>
</body>
<script>
new Vue({ el: '#demo1' })
</script>
# npm
npm install --save vue-shuffle-string
# yarn
yarn add vue-shuffle-string
<template>
<div>
<v-shuffle-string string="Loading..." />
</div>
</template>
<script>
import VShuffleString from 'vue-shuffle-string';
export default {
name: 'app',
components: {
VShuffleString
}
}
</script>
<style>
</style>
| string | immediately | time1 | time2 | count | |
|---|---|---|---|---|---|
| required | yes | no | no | no | no |
| default | true | '20' | '40' | '2' |
<v-shuffle-string string="Loading..." />
<div>
<button @click="$refs.shuffleString.generateShuffleString()">start</button>
<v-shuffle-string ref="shuffleString" :immediately="false" class="shuffle" string="Loading..." />
</div>
<template>
<div>
<v-shuffle-string ref="shuffleString" @done="done" class="shuffle" string="Loading..." />
</div>
</template>
<script>
import VShuffleString from 'vue-shuffle-string'
export default {
name: 'app',
components: {
VShuffleString
},
methods: {
done () {
console.log('done')
}
}
}
</script>
<style>
.shuffle {
font-family: monospace;
}
</style>
<div>
<v-shuffle-string time1="16" time2="32" count="16" string="Loading..." />
</div>