uni实现一个好看的版权和备案信息显示组件

以下是一个简单的版权和备案信息显示组件的实现，可以根据实际需求进行修改和美化：

1. 在components目录下新建一个名为copyright的组件。

2. 在copyright.vue文件中，添加如下代码：

<template>
  <canvas canvas-id="myCanvas" :style="canvasStyle"></canvas>
</template>

<script>
export default {
  props: {
    companyName: {
      type: String,
      default: 'My Company',
    },
    icpNumber: {
      type: String,
      default: '粤ICP备00000000号',
    },
    backgroundColor: {
      type: String,
      default: '#f8f8f8',
    },
    textColor: {
      type: String,
      default: '#666',
    },
    fontSize: {
      type: Number,
      default: 12,
    },
    height: {
      type: Number,
      default: 50,
    },
    borderRadius: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    canvasStyle() {
      return `width: 100%; height: ${this.height}px; background-color: ${this.backgroundColor}; border-radius: ${this.borderRadius}px;`
    },
  },
  mounted() {
    let ctx = uniCanvasContext('myCanvas', this);
    // 绘制版权信息和备案信息
    this.drawInfo(ctx);
  },
  methods: {
    drawInfo(ctx) {
      const companyName = this.companyName;
      const icpNumber = this.icpNumber;
      ctx.setFontSize(this.fontSize);
      ctx.setFillStyle(this.textColor);
      ctx.setTextAlign('center');
      // 绘制版权信息
      ctx.fillText(`©${new Date().getFullYear()} ${companyName} All Rights Reserved.`, ctx.canvas.width / 2, 20);
      // 绘制备案信息
      ctx.fillText(`备案号：${icpNumber}`, ctx.canvas.width / 2, 40);
      // 绘制完成
      ctx.draw();
    },
  },
};
</script>

在以上代码中，我们添加了props来传递组件需要的数据。通过计算属性canvasStyle来设置canvas的样式，包括宽度、高度、背景色和圆角半径。在mounted钩子函数中获取canvas标签对象及其上下文对象，然后在drawInfo函数中使用上下文对象绘制版权信息和备案信息。

3. 在使用该组件的页面中，可以这样引入：

<template>
  <div>
    <copyright
      :companyName="'My Company'"
      :icpNumber="'粤ICP备00000000号'"
      :backgroundColor="'#f8f8f8'"
      :textColor="'#666'"
      :fontSize="12"
      :height="50"
      :borderRadius="0"
    />
  </div>
</template>

<script>
import Copyright from '@/components/copyright';

export default {
  components: {
    Copyright,
  },
};
</script>

在以上代码中，我们引入了刚刚创建的copyright组件，并通过props传递了组件需要的数据。

需要注意的是，我们可以通过修改props中的数据来控制组件的样式和内容，比如修改companyName和icpNumber来显示不同的公司名称和备案号，修改backgroundColor和textColor来调整背景色和文字颜色，修改fontSize和height来调整文字大小和组件高度，修改borderRadius来设置圆角半径。