0.0.2 • Published 2 years ago
cushui
安装组件库
1. 使用npm安装
npm install cushui
2. 使用yarn安装
yarn add cushui
3. 使用pnpm安装
pnpm install cushui
引用组件
1. 引用
import cushui from 'cushui'
import 'cushui/lib/cushui.css'
import Vue form 'vue'
Vue.use(cushui);
文档
1. 对话框
示例
<sh-dialog
:show="true"
title="温馨提示"
content="这是中间显示的内容，最多3行"
tips="内容下面提示文案"
:onlyOneBtn="false"
align="left"
cancelTitle="取消"
successTitle="确定"
activeBtnColor="#E60027"
@close="handleClose()"
@confirm="handleConfirm()"
>
<template #title>
标题title插槽内容
</template>
<template #content>
中间内容插槽内容
</template>
<template #button>
底部按钮插槽内容
</template>
</sh-dialog>
API
属性 Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| show | 是否显示弹窗 | Boolean | false |
| title | 标题，可为空（无标题弹窗） | String | - |
| content | 内容，可识别html标签，最多三行，超过省略号显示 | String | - |
| tips | 辅助提示 | String | - |
| onlyOneBtn | 是否只有一个按钮，默认两个，取消和确定 | Boolean | false |
| align | 内容对齐方式 | String | center |
| successTitle | 确定按钮名称 | String | 确定 |
| cancelTitle | 取消按钮名称 | String | 取消 |
| activeBtnColor | 确定按钮颜色 | String | #E60027 |
| cancelBtnColor | 取消按钮颜色 | String | #999999 |
事件 Event
@close
关闭弹窗时触发
@confirm
点击确定按钮时触发
@cancel
点击取消按钮时触发
插槽 Slot
1. title
标题
2. content
内容
3. button
底部按钮
2. 顶部导航栏
示例
<sh-header
:fixed="true"
title="首页"
right="设置"
color="#333333"
background="#ffffff"
rightColor="#333333"
@rightClick="handleRightClick"
whiteBack
backApp
>
<template #left>
返回
</template>
<template #title>
导航栏标题
</template>
<template #right>
导航右侧内容
</template>
</sh-header>
API
属性 Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| fixed | 是否吸顶 | Boolean | false |
| title | 标题，可为空 | String | - |
| right | 导航栏右侧文案 | String | - |
| color | 导航栏字体颜色 | String | #333333 |
| background | 导航栏背景颜色 | String | #ffffff |
| rightColor | 右侧文案颜色 | String | #333333 |
| whiteBack | 是否使用白色返回图标 | Boolean | false |
| backApp | 是否返回至APP | Boolean | false |
事件 Event
@rightClick
右侧文案点击事件
插槽 Slot
1. left
导航栏左侧内容
2. title
标题
3. right
导航栏右侧内容
3. 按钮
示例
<sh-button
@click="showDialog = true"
fontSize="0.4rem"
width="8.6rem"
height="1rem"
radius="0.2rem"
color="red"
border="2px solid #E60027"
background="#ffffff"
:disabled="false"
>按钮名称</sh-button>
API
属性 Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| fontSize | 字体大小 | String | 32px |
| width | 按钮宽度 | String | 666px |
| height | 按钮高度 | String | 80px |
| radius | 按钮圆角弧度大小 | String | 40px |
| color | 按钮名称颜色 | String | #FFFFFF |
| border | 边框（如：2px solid #E60027) | String | - |
| background | 背景色（支持渐变色） | String | linear-gradient(90deg, #FF7963 0%, #E60027 100%) |
| disabled | 是否禁用 | Boolean | false |
事件 Event
@click
点击按钮触发事件
插槽 Slot
1. default
按钮名称