0.1.2 • Published 3 years ago

vue-stroke-text v0.1.2

Weekly downloads
17
License
-
Repository
github
Last release
3 years ago

stroke-text

一个方便设置多重文字描边的组件。

用法

<template>
  <div id="app">
    <stroke-text class="my-stroke-text" text="测试文字" :strokes="strokes" />
  </div>
</template>
<script>
import StrokeText from './StrokeText'

export default {
  name: 'App',
  components: {
    StrokeText,
  },
  data () {
    return {
      strokes: [
        '0.2em red',
        '0.4em green',
        '0.6em black',
      ]
    }
  },
}
</script>
<style>
#app {
  text-align: center;
  margin-top: 60px;
}

.my-stroke-text {
  font-size: 4em;
  color: white;
}
</style>

参数说明

参数名参数类型参数说明
textstring文本内容
strokesarray多重描边的样式列表,由字符串组成的数组,每个字符串将作为-webkit-text-stroke属性的值。

效果

image

原理

利用-webkit-text-stroke 属性生成描边样式,但是该属性只支持单个描边,所以组件里会自动生成多个 DOM 以实现多重描边效果

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago