goodgame-ui

goodgame-ui/ui组件库

vue3 + ts

下载/download

npm install -s goodgame-ui

使用/import and use

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

项目安装依赖/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>