semantic ui vue实现

Semantic UI Vue 实现指南

Semantic UI Vue 是一个基于 Vue.js 的 Semantic UI 实现，提供了丰富的 UI 组件和主题支持。以下是如何在项目中集成和使用 Semantic UI Vue 的方法。

安装 Semantic UI Vue

通过 npm 或 yarn 安装 Semantic UI Vue 包：

npm install semantic-ui-vue semantic-ui-css

或者使用 yarn：

yarn add semantic-ui-vue semantic-ui-css

引入 Semantic UI Vue

在 Vue 项目的入口文件（通常是 main.js 或 main.ts）中引入 Semantic UI Vue 和其 CSS 文件：

import Vue from 'vue';
import SuiVue from 'semantic-ui-vue';
import 'semantic-ui-css/semantic.min.css';

Vue.use(SuiVue);

使用组件

Semantic UI Vue 提供了丰富的组件，可以直接在模板中使用。例如，使用一个按钮组件：

<template>
  <sui-button primary>Primary Button</sui-button>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

自定义主题

如果需要自定义主题，可以通过覆盖 Semantic UI 的 CSS 变量或使用主题生成器。创建一个自定义的 CSS 文件并覆盖默认变量：

/* custom-semantic.css */
@import url('~semantic-ui-css/semantic.min.css');

:root {
  --primary-color: #ff0000;
}

然后在项目中引入自定义的 CSS 文件：

import './custom-semantic.css';

按需引入组件

为了优化打包体积，可以按需引入组件而不是全部引入。例如，只引入按钮和输入框：

import { Button, Input } from 'semantic-ui-vue';

Vue.component('sui-button', Button);
Vue.component('sui-input', Input);

表单示例

以下是一个使用 Semantic UI Vue 表单组件的示例：

<template>
  <sui-form>
    <sui-form-field>
      <label>Username</label>
      <sui-input placeholder="Username" v-model="username" />
    </sui-form-field>
    <sui-form-field>
      <label>Password</label>
      <sui-input type="password" placeholder="Password" v-model="password" />
    </sui-form-field>
    <sui-button type="submit" primary>Submit</sui-button>
  </sui-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
};
</script>

模态框示例

使用 Semantic UI Vue 的模态框组件：

<template>
  <div>
    <sui-button @click="openModal">Open Modal</sui-button>
    <sui-modal v-model="isOpen">
      <sui-modal-header>Modal Title</sui-modal-header>
      <sui-modal-content>
        <p>Modal content goes here.</p>
      </sui-modal-content>
      <sui-modal-actions>
        <sui-button negative @click="closeModal">Cancel</sui-button>
        <sui-button positive @click="closeModal">OK</sui-button>
      </sui-modal-actions>
    </sui-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    openModal() {
      this.isOpen = true;
    },
    closeModal() {
      this.isOpen = false;
    },
  },
};
</script>

注意事项

• Semantic UI Vue 依赖于 Semantic UI CSS，确保正确引入 CSS 文件。
• 组件名称前缀为 sui-，例如 sui-button、sui-modal。
• 如果需要更复杂的定制，可以参考官方文档或社区资源。

通过以上步骤，可以快速在 Vue 项目中集成和使用 Semantic UI Vue，构建美观且功能丰富的用户界面。