vue-scramble-text
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

vue-scramble-text

  • Vue.jsでString配列を渡すといい感じにシャカシャカしてくれるコンポーネントライブラリ
  • Component library for Vue.js. Pass string array for text shuffled effect.

What is this

Image from Gyazo

How to use

1. install package

yarn add vue-scramble-text

2. import in .vue file and use as HTML tag (Typescript example)

<template>
  <div id="app">
    <vue-scramble-text :text="'I love Vue.js & typescript ♡♡♡♡'" />
  </div>
</template>
 
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import VueScrambleText from "./components/VueScrambleText.vue";
@Component({
  components: {
    VueScrambleText
  }
})
export default class App extends Vue {}
</script>

3. Change text

  • component can operate automatically If text has changed.

4. Other settings(API)

  @Prop()
  public text!string;
  // この値を変更すると表示テキストがシャッフルされながら変わります。
  // Text for display. You can change this dynamically
 
  @Prop()
  public disableInitialScramble!boolean;
  // これをtrueに設定すると初期シャカシャカが無効になります。
  // disable nitial suffle.
 
  @Prop({ default: 20 })
  public scrambleDuration!number;
  // 1シャカシャカにかかる時間です。
  // Duration time for 1 change action
 
  @Prop({ default: "!<>-_\\/[]{}—=+*^?#________" })
  public scrambleCharacterSet!string;
  // シャカシャカ時に表示されるテキストです(こっからランダム)
  // A-Zにしてもそれっぽい
  // text for display while suffling

Readme

Keywords

Package Sidebar

Install

npm i vue-scramble-text

Weekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

935 kB

Total Files

21

Last publish

Collaborators

  • unotovive