hh-ui-demo v0.0.12

Vue 3 + TypeScript + Vite

demo版目前已经对button、textarea、modal、ecahrts、swiper实现封装

npm i hh-ui-demo

github: https://github.com/xiaogua-bushigua/Hh-UI

组件页面引用 import { hhButton, hhTextarea, hhSwiper, hhEcharts, hhModal } from 'hh-ui-demo'
import 'hh-ui-demo/dist/style.css'

Button

• default、primary、success、info、danger、warning 六种基本样式类型

  <hh-button>Default</hh-button>
  <hh-button type="primary">Primary</hh-button>
  <hh-button type="success">Success</hh-button>
  <hh-button type="info">Info</hh-button>
  <hh-button type="warning">Warning</hh-button>
  <hh-button type="danger">Danger</hh-button>

• 圆角、plain、可设置禁用

  <hh-button type="primary" plain>Primary</hh-button>
  <hh-button type="primary" round>Primary</hh-button>
  <hh-button type="primary" disabled>Primary</hh-button>

• 三种基本大小

  <hh-button type="primary" size="small">Small</hh-button>
  <hh-button type="primary">Middle</hh-button>
  <hh-button type="primary" size="large">Large</hh-button>

• 设置 icon

  使用 iconfont 阿里巴巴矢量图标，https://www.iconfont.cn/

  1. 在 iconfont 添加图标至自定义的项目，选择 Font Class 一栏，并下载至本地

  2. 将解压出来的文件放到 src\assets\iconfont

  3. 在 vue 项目的 index.html 中引入，

     <link rel="stylesheet" href="./src/assets/iconfont/iconfont.css">

  <hh-button type="primary" prefixIcon="shoucang">收藏</hh-button>
  <hh-button type="primary" suffixIcon="dianzan">点赞</hh-button>
  <hh-button type="primary" prefixIcon="shoucang" suffixIcon="dianzan">双侧</hh-button>

• 点击显示动态 icon

  <hh-button @btnClick="handleClick" type="primary" prefixIcon="shuyi_jiazai" suffixIcon="xiazai" :loading="loading">下载</hh-button>

Textarea

const temp = ref("请输入内容")
const test = ref('A1高闪来一个，秋梨膏')
const handleInput = (tar: HTMLInputElement) => {
  test.value = tar.value
}
const handleFocus = (tar: HTMLInputElement) => {
  console.log('您已聚焦', tar.value)
}
const handleBlur = (tar: HTMLInputElement) => {
  console.log('您已移出', tar.value)
}

• 基本使用

  <hhTextarea :text="test" @handleInputEmit="handleInput"></hhTextarea>

• 设置禁用

  <hhTextarea :text="test" @handleInputEmit="handleInput" disabled></hhTextarea>

• 设置只读

  <hhTextarea :text="test" @handleInputEmit="handleInput" readonly></hhTextarea>

• 设置placeholder

  <p>父组件绑定子组件内容：{{ test }}</p>
  <hhTextarea :text="test" @handleInputEmit="handleInput" :placeholder="temp"></hhTextarea>

• 设置聚焦/移出回调函数

  <hhTextarea :text="test" @handleInputEmit="handleInput" @handleFocusEmit="handleFocus" @handleBlurEmit="handleBlur"></hhTextarea>

• 设置最大输入长度

  <hhTextarea :text="test" @handleInputEmit="handleInput" :rows=6 :cols="25" :maxLen=20></hhTextarea>

• 开启resize

  <hhTextarea :text="test" @handleInputEmit="handleInput" resize></hhTextarea>

Modal

let display = ref('none')
const handleOpen = () => {
  display.value = 'block'
}

const handleClickYes = () => {
  display.value = 'none'
  console.log('你点击了确认');
}
const handleClickNo = () => {
  display.value = 'none'
  console.log('你点击了取消');
}
const handleClickBack = () => {
  display.value = 'none'
  console.log('你点击了遮罩');
}

• 普通模态框

  <hhButton type="primary" @click="handleOpen">删除</hhButton>
  <hhModal title="提示框" :display="display" @handleYesEmit="handleClickYes" @handleNoEmit="handleClickNo" @handleBackEmit="handleClickBack">您确认要删除吗？</hhModal>

• 表单模态框

  <hhButton type="primary" @click="handleOpen1">添加人员</hhButton>
  <hhModal title="提示框" :display="display" @handleYesEmit="handleClickYes" @handleNoEmit="handleClickNo" @handleBackEmit="handleClickBack">
    <div>姓名：<input type="text"/></div>
    <div>年龄：<input type="text"/></div>
    <div>身高：<input type="text"/></div>
  </hhModal>

Echarts

import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;
const option1: EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: '#a90000'
          }
        },
        150,
        80,
        70,
        110,
        130
      ],
      type: 'bar'
    }
  ]
};
const option2: EChartsOption = {
  xAxis: {
    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
  },
  yAxis: {},
  series: [
    {
      type: 'candlestick',
      data: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42]
      ]
    }
  ]
};

let option = ref(option1)

• 更改尺寸

  let height = ref("300")
  let width = ref("500")
  const handleChangeSize = () => {
    height.value = (300 + Math.floor(Math.random() * 100 - 100)) + ''
    width.value = (500 + Math.floor(Math.random() * 100 - 100)) + ''
  }

  <hhButton type="primary" @click="handleChangeHeight">自适应尺寸</hhButton>
  <hhEcharts :height="height" :width="width" :option="option"></hhEcharts>

• 更换配置

  let flag = true
  const handleChangeChart = () => {
    if (flag) { option.value = option2; flag = false }
    else { option.value = option1; flag = true }
  }

  <hhButton type="primary" @click="handleChangeChart">更改options</hhButton>
  <hhEcharts :height="height" :width="width" :option="option"></hhEcharts>

Swiper轮播

const imgsURL = ['/src/assets/swipers/1.jpeg', '/src/assets/swipers/2.jpeg', '/src/assets/swipers/3.jpeg']
const imgsURL1 = ['https://img2.baidu.com/it/u=2632730749,1389792745&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721', 'https://img2.baidu.com/it/u=452199401,3287833971&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1037', 'https://img1.baidu.com/it/u=3170338415,819326975&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=896']

• 定时切换

  <hhSwiper :imgsURL="imgsURL" setTime></hhSwiper>

• 更改尺寸

  <hhSwiper :imgsURL="imgsURL1" setTime :height=240 :width=160></hhSwiper>

• 侧边点击切换+定时

  <hhSwiper :imgsURL="imgsURL" sideClicked setTime></hhSwiper>

• 下方点击切换+侧方点击切换+定时

  <hhSwiper :imgsURL="imgsURL" botClicked setTime sideClicked></hhSwiper>