Nautical Poseidon Mythology

    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

    Install

    npm i vue-scramble-text

    DownloadsWeekly Downloads

    7

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    935 kB

    Total Files

    21

    Last publish

    Collaborators

    • unotovive