chaos-text v0.0.10

package is still in development, never use it in production

项目仍在开发中，请勿在生产环境中使用

TODO

• 合并为新的 UI 库

混沌之字

为 Vue3 而生的文字处理组件,只需一个标签，一行文本，即可收获立竿见影的文字效果。

以下为效果之一

简单实践

下载

进入到项目文件夹下，打开一个新的终端，输入以下命令：

npm install chaos-text
# 或
yarn add chaos-text

由于组件仍处于开发状态，新版本与旧版本之间可能存在 API 改动、参数改动、返回值改动等问题。「本文档始终以最新版本为准」

导入

全局引入

打开项目的 main.js / main.ts, 引入 chaos-text 并使用它

import { createApp } from "vue";
import App from "./App.vue";

import { createChaos } from "chaos-text";
import "chaos-text/index.css";

const app = createApp(App);

app.use(createChaos());
app.mount("#app");

引入文件的 CSS 不是必要的。但在开发过程中免不了要使用到一些 CSS 的特性，在版本更迭中将尽可能做到不使用 CSS，使文件更加纯粹

局部引入

chaos 同时也支持组件的局部引入，你只需要在需要引入的组件中这样引入它

<script setup>
import Chaos from "chaos-text";

const words = "暂伴月将影， 行乐须及春";
</script>

<template>
  <chaos textStyle="CN">{{ words }}</chaos>
</template>

使用

全局引入完成后，你可以在项目在任意 vue 组件中来调用它

<script setup lang="ts">
const words = "横眉冷对千夫指，俯首甘为孺子牛";
</script>

<template>
  <chaos textStyle="CN">{{ words }}</chaos>
</template>

至此，你已经完成了所有的 chaos 配置，你可以在任意位置使用它了！

现在启动你的服务，你将可以在网页上看到它的效果

chaos 的能力不仅于此，它还拥有更多的文字特效以及可配置的属性，你将在API 文档中找到更多的信息