gd-ui-vue v0.2.6

gd-ui

简介

一个基于 Vue 2.x 的 UI 组件

使用

1. 安装

npm i gd-ui-vue

2. 全局注册

import GdUI from 'gd-ui-vue/dist/gd-ui-vue.umd.min.js'
Vue.use(GdUI)

3. 导入样式

import 'gd-ui-vue/dist/gd-ui-vue.css'

组件

按钮(gd-button)

对话框(gd-dialog)

输入框(gd-input)

切换(gd-switch)

需要先v-model绑定一个Boolean值

单选框(gd-radio)

单选框组(gd-radio-group)

用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

复选框(gd-checkbox)

复选框组(gd-checkbox-group)

用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model

表单项(gd-form-item)

表单(gd-form)

评分(gd-rate)

轮播图(gd-carousel)

轮播图示例

<template>
  <div id='app'>
    <gd-carousel
      :autoplay='true'
      :interval='3000'
      :initial='1'
      :hasDot='true'
      :hasDirector='true'
      trigger='hover'
      direction='horizontal'
    >
      <gd-carousel-item v-for='(item, index) in 4' :key="index">
        <h1>{{item}}</h1>
      </gd-carousel-item>
    </gd-carousel>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss" scoped>
h1 {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
img {
  width: 100%;
  height: 100%;
}
</style>

放大镜(gd-magnifier)

放大镜示例

<template>
  <div id='app'>
    <div class='wrapper'>
      <gd-magnifier
        :link='link'
        :blank='blank'
        :imgUrl='imgUrl'
        :imgAlt='imgAlt'
        :imgWidth='imgWidth'
        :imgHeight='imgHeight'
        :magWidth='magWidth'
        :magHeight='magHeight'
      ></gd-magnifier>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-d502580a8d7df723419a6f9fcbe6f82c_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630418906&t=9451e54741b7fe131ae2bafb5ad60753',
      blank: true,
      link: 'https://www.baidu.com',
      imgWidth: 375,
      imgHeight: 540,
      magWidth: 150,
      magHeight: 150,
      imgAlt: 'jojo'
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 375px; // 540
  margin: 100px auto;
}
</style>

dialog 示例

<template>
  <div id='app'>
    <gd-button @click="visible=true">显示dialog</gd-button>
    <gd-dialog title="温馨提示" width='40%' top='25vh' :visible.sync='visible'>
      <gd-form :model='dialogModel'>
        <gd-form-item label='用户名'>
          <gd-input v-model='dialogModel.username' clearable></gd-input>
        </gd-form-item>
        <gd-form-item label='密码'>
          <gd-input v-model='dialogModel.password' type='password' showPassword></gd-input>
        </gd-form-item>
        <gd-form-item label='开关'>
          <gd-switch v-model='dialogModel.switch'></gd-switch>
        </gd-form-item>
        <gd-form-item label='爱好'>
          <gd-checkbox-group v-model="dialogModel.hobby">
            <gd-checkbox label='吃饭'></gd-checkbox>
            <gd-checkbox label='睡觉'></gd-checkbox>
            <gd-checkbox label='打豆豆'></gd-checkbox>
          </gd-checkbox-group>
        </gd-form-item>
        <gd-form-item label='性别'>
          <gd-radio-group v-model="dialogModel.gender">
            <gd-radio label='1'>男</gd-radio>
            <gd-radio label='0'>女</gd-radio>
          </gd-radio-group>
        </gd-form-item>
        <gd-form-item label='评分'>
          <gd-rate v-model='dialogModel.score' :size='25'></gd-rate>
        </gd-form-item>
      </gd-form>
      <template v-slot:footer>
        <gd-button type='primary' @click="visible=false">确定</gd-button>
        <gd-button @click="visible=false">取消</gd-button>
      </template>
    </gd-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogModel: {
        username: '',
        password: '',
        switch: false,
        hobby: [],
        gender: '1',
        score: 0
      },
      visible: false
    }
  }
}
</script>

<style>
#app .gd-input {
  width: 300px
}
</style>