Github - hhhxmm/hhan-ui
Gitee - 隔年雪/hhan-ui
NPM - hhan1027/hhan-ui
安装
适用于vue2
npm i hhan-ui
导入
在main.js中
import Hhan from 'hhan-ui';
Vue.use(Hhan);
组件
hhan-rate 评分
属性 | 描述 | 类型 | 默认值 | 必传 |
---|
value | 评分值 使用v-model进行双向绑定 | Number | - | 是 |
max | 最大评分值 | Number | 5 | 否 |
iconClass | 字体图标类名 | String | icon-star-full | 否 |
inactiveColor | 未激活颜色 | String | #C6D1DE | 否 |
activeColor | 激活颜色 | String | #F7BA2A | 否 |
showText | 是否显示文字 | Boolean | false | 否 |
texts | 显示的文字 | Array | [“极差”, “失望”, “一般”, “满意”, “惊喜”] | 否 |
textColor | 显示的文字颜色 | String | #1F2D3D | 否 |
<template>
<div id="app">
<hhan-rate
v-model="num"
:max="6"
iconClass="icon-star-full"
inactiveColor="#ccc"
activeColor="#f00"
:showText="true"
:texts='["极差", "失望", "一般", "满意", "惊喜", "test"]'
textColor="#0f0"
/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
num: 0,
};
}
};
</script>
<style>
</style>
hhan-switch 开关
属性 | 描述 | 类型 | 默认值 | 必传 |
---|
value | 是否激活 使用v-model进行双向绑定 | [Boolean, String, Number] | false | 是 |
width | 宽度 | Number | 40 | 否 |
activeColor | 激活颜色 | String | #409EFF | 否 |
inactiveColor | 未激活颜色 | String | #C0CCDA | 否 |
<template>
<div id="app">
<hhan-switch
v-model="show"
:width="80"
activeColor="#f00"
inactiveColor="#00f"
/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
show: false,
};
}
};
</script>
<style>
</style>
hhan-slider 滑块
属性 | 描述 | 类型 | 默认值 | 必传 |
---|
value | 使用v-model进行双向绑定 | Number | - | 是 |
min | 最小值 | Number | 0 | 否 |
max | 最大值 | Number | 100 | 否 |
runwayBackroundColor | | String | #e4e7ed | 否 |
barBackgroundColor | 进度背景颜色 | String | #409eff | 否 |
buttonrBackgroundColor | 按钮背景颜色 | String | #fff | 否 |
buttonrBorderColor | 按钮边框颜色 | String | #409eff | 否 |
showText | 是否显示文字 | Boolean | false | 否 |
textColor | 文字颜色 | String | #fff | 否 |
textRadius | 文字背景圆角 | Number | 6 | 否 |
textBackgroundColor | 文字背景颜色 | String | rgba(0, 0, 0, 0.5) | 否 |
<template>
<div id="app">
<div>num={{ num }}</div>
<div class="slider">
<hhan-slider
v-model="num"
:min="10"
:max="200"
:showText="showText"
:textRadius="50"
textColor="#f00"
textBackgroundColor="rgba(255,0,0,0.6)"
runwayBackroundColor="#0f0"
barBackgroundColor="#000"
buttonrBackgroundColor="#00f"
buttonrBorderColor="#ff0"
/>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
num: 0,
showText: true,
};
}
};
</script>
<style>
.slider {
width: 800px;
}
</style>
hhan-button 按钮
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
size | 尺寸 | string | medium / small / mini | — |
type | 类型 | string | primary / success / warning / danger / info / text | — |
plain | 是否朴素按钮 | boolean | — | false |
round | 是否圆角按钮 | boolean | — | false |
circle | 是否圆形按钮 | boolean | — | false |
native-type | 原生 type 属性 | string | button / submit / reset | button |
<template>
<div id="app">
<div class="btns"
v-for="(btns, index) in btnsList"
:key="index"
style="margin-bottom:10px"
>
<hhan-button
v-for="(btn, i) in btns"
:key="btn.text + i"
:style="{ marginLeft: i > 0 ? '10px' : 0 }"
:type="btn.type"
:plain="btn.plain"
:round="btn.round"
:circle="btn.circle"
:size="btn.size"
:nativeType="btn.nativeType"
>
{{ btn.text }}
</hhan-button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
btnsList: [
[
{ text: '默认按钮', type: 'default' },
{ text: '主要按钮', type: 'primary' },
{ text: '成功按钮', type: 'success' },
{ text: '信息按钮', type: 'info' },
{ text: '警告按钮', type: 'warning' },
{ text: '危险按钮', type: 'danger' }
],
[
{ text: '朴素按钮', type: 'default', plain: true },
{ text: '主要按钮', type: 'primary', plain: true },
{ text: '成功按钮', type: 'success', plain: true },
{ text: '信息按钮', type: 'info', plain: true },
{ text: '警告按钮', type: 'warning', plain: true },
{ text: '危险按钮', type: 'danger', plain: true }
],
[
{ text: '圆角按钮', type: 'default', round: true },
{ text: '主要按钮', type: 'primary', round: true },
{ text: '成功按钮', type: 'success', round: true },
{ text: '信息按钮', type: 'info', round: true },
{ text: '警告按钮', type: 'warning', round: true },
{ text: '危险按钮', type: 'danger', round: true }
],
[
{ text: '', type: 'default', circle: true },
{ text: '', type: 'primary', circle: true },
{ text: '', type: 'success', circle: true },
{ text: '', type: 'info', circle: true },
{ text: '', type: 'warning', circle: true },
{ text: '', type: 'danger', circle: true }
],
[
{ text: '默认按钮', size: '' },
{ text: '中等按钮', size: 'medium' },
{ text: '小型按钮', size: 'small' },
{ text: '超小按钮', size: 'mini' }
],
[
{ text: '默认按钮', size: '', round: true, nativeType: 'button' },
{ text: '中等按钮', size: 'medium', round: true, nativeType: 'submit' },
{ text: '小型按钮', size: 'small', round: true, nativeType: 'reset' },
{ text: '超小按钮', size: 'mini', round: true, nativeType: 'test' }
]
]
};
},
};
</script>
<style>
</style>
后续更多组件随缘更新(阿巴阿巴阿巴阿巴)