卡通样式的数字展示

[starryiu]

写了一个简单的数字展示器，使用方法非常简单，直接调用函数便可返回相应的图片地址。

介绍

原项目
下载文件

参数

• @param {Object} config
• @param {number} config.number - 数字：不超过 10 位
• @param {string} config.theme - 主题：默认 asoul，可选 ['asoul','gelbooru','gelbooru-h','moebooru','moebooru-h','rule34']
• @param {number} config.length - 长度：1 ~ 10
• @param {string} config.rootUrl - 根 url：通常不需要改，除非比 jsdelivr 更快

食用方法

引入
import {createImageSrc} from '@/untils'

调用
createImageSrc({
   number:123456789,
   length:10,
   theme:'gelbooru'
})

返回
    [ 
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/0.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/1.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/2.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/3.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/4.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/5.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/6.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/7.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/8.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/9.gif" 
    ]

预览图

Vue 使用

<template>
  <div class="show">
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc1" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc2" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc3" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc4" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc5" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc6" :key="index" :src="src" alt="">
    </div>
  </div>
</template>

<script>
import { createImageSrc } from '@/untils'
export default {
  name:'ShowView',
  data:()=>({
    imageSrc1:[],
    imageSrc2:[],
    imageSrc3:[],
    imageSrc4:[],
    imageSrc5:[],
    imageSrc6:[],
  }),
  mounted(){
    this.imageSrc1 = createImageSrc({
      number:123456789,
      length:10,
    })
    this.imageSrc2 = createImageSrc({
      number:123456789,
      length:10,
      theme:'gelbooru',
    })
    this.imageSrc3 = createImageSrc({
      number:123456789,
      length:10,
      theme:'gelbooru-h',
    })
    this.imageSrc4 = createImageSrc({
      number:123456789,
      length:10,
      theme:'moebooru',
    })
    this.imageSrc5 = createImageSrc({
      number:123456789,
      length:10,
      theme:'moebooru-h',
    })
    this.imageSrc6 = createImageSrc({
      number:123456789,
      length:10,
      theme:'rule34',
    })
  }
}
</script>