vcgl v0.1.4

toc

介绍

  vcgl为基于Vue.js开发的组件库，主要针对移动端。相对于常用一些组件库，vcgl自设计之初就贯彻着用户高度定制的原则，几乎所有的组件都能够根据用户的需求，通过改变不同参数值来实现不同样式设计，当然如果你觉得麻烦也可以使用默认的参数、应用默认的样式（默认样式也是很好看的哟）！

  github地址：https://github.com/goodloving/vcgl （如果用的还可以，欢迎给☆）

快速开始

npm install vcgl -S

vue项目中引入和使用（按需引入）：

import Vue from "vue"
import { VcglActionSheet } from "vcgl";
Vue.use(VcglActionSheet);

唤起ActionSheet的事件中调用：

this.$vgActionSheet.show({
  menus: this.menus,
  onSelected: index => this.onSelected(index),
  onCancel: () => this.onCancel()
});

选择项和取消项对应的函数：

onCancel() {
  this.$vactionsheet.hide();  //隐藏
},
onSelected(index) {
  alert(index);  //具体操作
}

使用说明

一、Button

局部引入（单个组件中）：

<script>
import { VcglButton } from "vcgl";
export default {
  components: {
    VcglButton
  }
}
</script>

使用：

<template>
  <div>
    <vcgl-button type="success">这是一个按钮</vcgl-button>
  </div>
</template>

或者：

<template>
  <div>
    <vcgl-butto
      type="success"
      btn_font_size="20px"
      btn_font_color="#000000"
      btn_width="100%"
      btn_height="100%"
      btn_background="linear-gradient(to right, #000000 0%,#ffffff 100%)"
      btn_border="1px solid red"
      btn_border_radius="5px"
      @click="onClickBtn"
      >
        <img class="img" src="../assets/images/delete.png" />
      	这是一个按钮
    </vcgl-butto>
  </div>
</template>

属性：

二、ActionSheet

全局引入（main.js）：

import { VcglActionSheet } from "vcgl";
Vue.use(VcglActionSheet);

使用：

<template>
  <div>
    演示 actionsheet demo
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: {
        1: "微信",
        2: "支付宝",
        3: "银联"
      },
      // 图标与menus对应，如果长度比menus大1，最后一个为"取消"图标
      icons: [
        require("../assets/images/delete.png"),
        require("../assets/images/delete.png"),
        require("../assets/images/delete.png"),
        require("../assets/images/delete.png")
      ]
    };
  },
  mounted() {
    this.onClickActionSheet();
  },
  methods: {
    onClickActionSheet() {
      this.$vgActionSheet.show({
        menus: this.menus,
        icons: this.icons,
        as_item_height: "45px",
        as_font_size: "18px",
        as_item_color: "rgba(99,34,200,1)",
        as_cancel_color: "#999999",
        onSelected: index => this.onSelected(index),
        onCanncel: () => this.onCancel()
      });
    },
    onSelected(index) {
      alert(index);
    },
    onCancel() {
      this.$vgActionSheet.hide();
    }
  }
};
</script>

<style></style>

属性：

三、Loading

全局引入（main.js）：

import { VcglLoading } from "vcgl";
Vue.use(VcglLoading);

使用：

<template>
  <div>
    <div @click="showLoading">show loading</div>
  </div>
</template>

<script>
export default {
  methods: {
    showLoading(){
      this.$vgLoading.show({
        text: "加载中...",
        fontsize:"20px",
        fontcolor:"#666666",
        background:"red"
      });
      setTimeout(() => {
        this.closeLoading()
      }, 3000);
    },
    closeLoading() {
      this.$vgLoading.close();
    }
  }

}
</script>

<style></style>

属性：