1. 简介
@primitybio/vue 是一个 Vue.js 的组件库，它提供了一系列实用的 UI 组件和工具箱，方便开发者快速构建移动端应用。
该组件库使用 TypeScript 编写，支持在 Vue CLI 3.x 中通过插件自动生成项目结构和配置文件。它还支持按需加载和自定义主题。
2. 安装
使用 npm 安装 @primitybio/vue：
$ npm install @primitybio/vue
安装完成后，在 Vue 应用的 main.js 文件中引入：
import Vue from 'vue'; import PrimityBio from '@primitybio/vue'; Vue.use(PrimityBio);
3. 使用指南
3.1 组件
@primitybio/vue 提供了丰富的 UI 组件，包括按钮、表单、模态框、列表等等。下面我们介绍其中几个常用的组件。
3.1.1 Button 按钮
Button 组件提供了多种类型的按钮，包括默认按钮、主要按钮、次要按钮等等。你还可以通过 disabled 属性禁用按钮。
<template>
<div>
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="secondary">次要按钮</Button>
<Button disabled>禁用按钮</Button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>3.1.2 Input 输入框
Input 组件可以根据不同的类型实现常用的输入框，例如文本框、密码框、数字框等等。你还可以通过 placeholder 属性设置输入框的提示信息。
<template>
<div>
<Input placeholder="请输入用户名" />
<Input type="password" placeholder="请输入密码" />
<Input type="number" placeholder="请输入数字" />
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>3.1.3 Modal 模态框
Modal 组件提供了轻量级、易用的模态框。你可以通过 v-model 控制模态框的显示或隐藏，或者通过 title 和 content 属性设置模态框的标题和内容。
<template>
<div>
<Button @click="showModal">打开模态框</Button>
<Modal v-model="isModalVisible" title="标题">
<div>这是一段内容</div>
</Modal>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
isModalVisible: false,
};
},
methods: {
showModal() {
this.isModalVisible = true;
},
},
};
</script>3.1.4 List 列表
List 组件提供了多种列表类型，包括单行列表、双行列表、卡片列表等等。你还可以通过 avatar、title、subtitle 和 extra 属性设置列表项的各种内容。
<template>
<div>
<List type="single">
<List.Item avatar="https://www.example.com/avatar.png" title="标题" subtitle="副标题" extra="额外内容" />
</List>
<List type="double">
<List.Item avatar="https://www.example.com/avatar.png" title="标题" subtitle="副标题" extra="额外内容" />
<List.Item avatar="https://www.example.com/avatar.png" title="标题" subtitle="副标题" extra="额外内容" />
</List>
<List type="card">
<List.Item title="标题" subtitle="副标题" extra="额外内容">
<img src="https://www.example.com/image.png" alt="图片" />
</List.Item>
</List>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>3.2 工具箱
@primitybio/vue 还提供了一些实用的工具箱，让开发者能够更加高效地编写代码。
3.2.1 Icon 图标
Icon 工具箱提供了多种常用的图标，包括字体图标和 SVG 图标。你可以在代码中通过 <Icon type="xxx" /> 引用图标。
<template>
<div>
<Icon type="star-filled" />
<Icon type="settings-filled" />
<Icon type="message-filled" />
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>3.2.2 Toast 消息提示
Toast 工具箱提供了轻量级、易用的消息提示框。你可以在代码中通过 this.$toast('xxx') 显示消息，也可以通过 duration 和 position 属性自定义消息框的持续时间和位置。
<template>
<div>
<Button @click="showToast">显示消息</Button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
methods: {
showToast() {
this.$toast('这是一条消息');
},
},
};
</script>4. 自定义主题
@primitybio/vue 支持自定义主题，你可以通过修改 $theme SASS 变量来改变组件库的整体样式。
// Your custom theme $theme: ( primary-color: #ff5500, ); // Import PrimityBio Vue @import '@primitybio/vue/styles/index.scss';
5. 完整示例
下面是一个完整的示例，包括 @primitybio/vue 的使用和自定义主题：
<template>
<div>
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="secondary">次要按钮</Button>
<Input placeholder="请输入用户名" />
<Input type="password" placeholder="请输入密码" />
<Input type="number" placeholder="请输入数字" />
<Button @click="showModal">打开模态框</Button>
<Modal v-model="isModalVisible" title="标题">
<div>这是一段内容</div>
</Modal>
<List type="single">
<List.Item avatar="https://www.example.com/avatar.png" title="标题" subtitle="副标题" extra="额外内容" />
</List>
<List type="double">
<List.Item avatar="https://www.example.com/avatar.png" title="标题" subtitle="副标题" extra="额外内容" />
<List.Item avatar="https://www.example.com/avatar.png" title="标题" subtitle="副标题" extra="额外内容" />
</List>
<List type="card">
<List.Item title="标题" subtitle="副标题" extra="额外内容">
<img src="https://www.example.com/image.png" alt="图片" />
</List.Item>
</List>
<Icon type="star-filled" />
<Icon type="settings-filled" />
<Icon type="message-filled" />
<Button @click="showToast">显示消息</Button>
</div>
</template>
<script>
import { Button, Input, Modal, List, Icon, Toast } from '@primitybio/vue';
export default {
name: 'MyComponent',
components: {
Button,
Input,
Modal,
List,
Icon,
},
data() {
return {
isModalVisible: false,
};
},
methods: {
showModal() {
this.isModalVisible = true;
},
showToast() {
this.$toast('这是一条消息');
},
},
};
</script>
<style lang="scss">
$theme: (
primary-color: #ff5500,
);
@import '@primitybio/vue/styles/index.scss';
</style>6. 结束语
通过本文，我们介绍了 @primitybio/vue 的使用方法和自定义主题，希望可以帮助开发者更加高效地构建移动端应用。如果你想了解更多内容，可以查看官方文档 https://primitybio.github.io/vue。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673ddfb81d47349e53b3c