goodluck-ui

goodluck-ui/ui 组件库

vue3 ui

下载/download

npm install -s goodluck-ui

使用/import and use

import { createApp } from 'vue'
import App from './App.vue'
import goodluck from 'goodluck-ui'
import 'goodluck-ui/lib/goodluck-ui.css'
const app = createApp(App);
app.use(goodluck)

项目安装依赖/npm insatll

npm install

项目运行查看组件示例/npm run serve to see demos

npm run serve

1.步骤条 steps

步骤条属性/Steps Attributes

参数	说明	类型	可选值	默认值
stepArr	steps内容，数组对象中title为中部标题内容，desc为底部描述内容	array	—	—
activeIndex	当前激活位置	number	—	—

demo

<template>
  <g-steps :stepArr="stepArr" :activeIndex="activeIndex"></g-steps>
</template>

<script>
import { defineComponent, reactive, ref } from "vue"
export default defineComponent({
  setup() {
    let stepArr = reactive([
      { title: "提交信息", desc: "2021/04/13  08:24:46" },
      { title: "提交信息", desc: "2021/04/13  08:24:46" },
      { title: "提交信息", desc: "2021/04/13  08:24:46" },
      { title: "提交信息", desc: "2021/04/13  08:24:46" },
      { title: "提交信息", desc: "2021/04/13  08:24:46" },
    ])
    let activeIndex = ref(0)
    return {
      stepArr,
      activeIndex,
    }
  },
})
</script>

2.按钮 button

按钮属性/Button Attributes

参数	说明	类型	可选值	默认值
type	按钮种类，注意,type权重没有backgroundColor和borderRadius属性高,即同时使用backgroundColor和borderRadius属性后type不生效	String	blue/yellow/green	blue
backgroundColor	按钮背景颜色	string	—	#f68d1
borderRadius	按钮外边框圆角度数	string	—	0
fontSize	按钮中字体大小	string	—	18
badge	按钮右上方的标记内容	string	—	—
max	按钮右上方的标记的最大数值，超过则显示最大数值+的形式	string	—	—
dot	右上方标记不需要内容，仅需要一个小圆点时使用。注意使用dot后badge和max不生效	Boolean	—	false
badgeColor	按钮右上方的标记背景颜色	string	—	#E6A23C

demo

<template>
  <g-button
    fontSize="20"
    backgroundColor="skyblue"
    borderRadius="0"
    badge="10"
    max="99"
    dot
    badgeColor="skyblue"
    >通过</g-button
  >
</template>

3.标题 title

按钮属性/Button Attributes

参数	说明	类型	可选值	默认值
clip	显示梯形标题	boolean	—	false
line	显示标题下划线	boolean	—	false
backgroundColor	标题与下划线背景颜色	string	—	white
width	标题宽度，可以与line属性有效搭配	string	—	auto

demo

<template>
  <g-title clip line backgroundColor="skyblue" width="100"
    >这是一个标题</g-title
  >
</template>