IView 升级指南：Button 篇

2023-12-01 13:07:41

旧版本的 Button 组件只单纯包裹了一个 button 标签。假如 to 有值，则组件会渲染为 a 标签。虽然可以复用按钮样式，但却丧失了 Button 的行为，比如 loading、icon 等。新版本支持链接模式后就没有这个问题了，同样的逻辑，可以写成： to 属性…

在新版本中，Button 组件支持了链接模式，这使得它既可以保持按钮的样式，又可以拥有按钮的行为。

在链接模式下，Button 组件的 to 属性可以指定一个 URL，当用户点击按钮时，就会跳转到该 URL。同时，Button 组件还支持 loading 和 icon 属性，这使得它可以在加载数据时显示加载状态，或者在按钮上显示图标。

使用方法

首先，你需要在你的项目中安装 IView 组件库。

npm install iview --save

然后，你需要在你的项目中导入 IView 组件库。

import { Button } from 'iview';

接下来，你就可以在你的项目中使用 Button 组件了。

<Button>按钮</Button>

你还可以使用 Button 组件的链接模式。

<Button to="/about">关于我们</Button>

你还可以使用 Button 组件的 loading 和 icon 属性。

<Button loading icon="loading">加载中...</Button>

属性

to：指定链接地址。
loading：指定是否显示加载状态。
icon：指定图标名称。

示例代码

import { Button } from 'iview';

export default {
  components: {
    Button
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    handleClick() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 3000);
    }
  },
  render() {
    return (
      <div>
        <Button @click="handleClick" loading={this.loading}>加载中...</Button>
        <Button to="/about">关于我们</Button>
      </div>
    );
  }
};