hhan-ui适用于vue2的组件库

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>

后续更多组件随缘更新（阿巴阿巴阿巴阿巴）