更新记录

1.0.0（2024-02-20） 下载此版本

初始化

平台兼容性

当然，这里是一个中文版本的README.md，介绍如何使用您的Vue涟漪按钮组件。这个文档包括了组件的简介、安装指南、使用方法以及API说明。请根据您的实际情况进行相应的调整：

Vue 文本按钮组件

这是一个Vue组件，实现了一个点击时从按钮中心扩散出涟漪效果的按钮。无论点击按钮的哪个位置，涟漪效果都会从中心开始，增强了用户在移动设备和桌面设备上的交互反馈。

特性

• 涟漪效果始终从按钮的中心开始。
• 可定制的按钮样式，包括背景颜色、文字颜色、字体大小和边框圆角。
• 发出自定义的click事件，可以被父组件监听。

安装

要在您的Vue项目中使用涟漪按钮，请将组件文件复制到项目的组件目录下。

使用方法

首先，将HrTextButton组件导入到您的Vue组件或页面中：

import HrTextButton from '@/components/HrTextButton.vue';

然后，您可以在模板中使用它：

<template>
  <div>
    <HrTextButton
      :fontsize="16"
      icon="contact"
      icon-size="30"
      text-color="#FFF"
      background-color="#3F51B5"
      :border-radius="4"
      @click="handleClick"
            text="点击我"
    />
  </div>
</template>

<script>
export default {
  components: {
    HrTextButton,
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了！');
    },
  },
};
</script>

Props

事件

• click: 当按钮被点击时触发。

定制化

您可以通过传递适当的props来定制text-color、background-color、fontsize和border-radius，以实现按钮样式的定制。对于涟漪效果的颜色，您可以在组件的<style>部分中调整.ripple类的backgroundColor属性。