xsd-color-word

具有渐变色和闪光灯效果的文字组件

Usage no npm install needed!

<script type="module">
  import xsdColorWord from 'https://cdn.skypack.dev/xsd-color-word';
</script>

README

1. 组件介绍

  1. xsd-color-word 是一个渐变色文字组件，可以具有闪光灯效果
  2. 这个组件非常好看，简单好用，欢迎使用
  3. 反馈意见请发送至 962454954@qq.com ,我们将进行快速迭代。

2. 组件使用

2.1 安装

  1. npm i xsd-color-word

2.2 引入

  1. 全局引入

    import Vue from 'vue'
import xsdColorWord from 'xsd-color-word'
Vue.use(xsdColorWord)

  2. 全局按需引入

    import { xsdColorWord } from "xsd-color-word"
Vue.component('xsd-color-word',xsdColorWord)

  3. 组件内引入

    import { xsdColorWord } from "./xsd-color-word"
export default {
  name: 'App',
  components: {
    xsdColorWord
  }
}

2.3 使用

2.3.1 组件的属性

  1. word
    1. 展示的文字内容
    2. String
  2. fontSize
    1. 文字大小，要带单位
    2. String
  3. bold
    1. Boolean
    2. 是否加粗
  4. italic
    1. Boolean
    2. 是否倾斜
  5. bottomWordColor
    1. 文字底色
    2. String
  6. topWordColor
    1. 文字渲染色
    2. String
  7. spotLight
    1. Boolean
    2. 是否开启闪光灯效果

2.3.2 使用实例

<template>
<div id="app">
  <xsd-color-word :word="'大家辛苦了'" :fontSize="'30px'" :bold="false" :italic="true" :topWordColor="['red','orange','blue']" :bottomWordColor="'#333'" :spotLight="true"></xsd-color-word>
</div>
</template>

<script>
import {
  xsdColorWord
} from "xsd-color-word"
export default {
  name: 'App',
  components: {
    xsdColorWord
  }
}
</script>

3. 展示效果

image-20201110132626702