0.0.1 • Published 2 years ago

vue-hooks-common v0.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

vue-hooks-common

项目公共组件开发。演示如何在项目中使用vue-hooks-common。

安装

$ npm install vue-hooks-common -S
$ yarn add vue-hooks-common

使用

main.js 文件中引入插件并注册

import HooksCommon from 'vue-hooks-common'

let options = {
  base: 'http://localhost:9900'
}
Vue.use(HooksCommon, options)

options 全局配置

配置项类型默认值说明备注
baseStringundefined服务器地址如: http://localhost:9900

在项目中使用

<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ background: '#f0f2f5' }">
      <a-tabs default-active-key="4">
        <a-tab-pane key="1" tab="HooksCharts">
          <HooksStaffSelectPerson ref="selectPerson" />
          <div>
            <a-button type="primary" @click="onTest">测试按钮</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="HooksChartsCreate">
          <!-- <HooksChartsCreate/> -->
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import HooksStaffSelectPerson from "../../packages/hooks-staff-select-person/src/hooks-staff-select-person.vue";

export default {
  name: "HelloWorld",
  props: {},
  components: {
    HooksStaffSelectPerson,
  },
  data() {
    return {};
  },
  mounted() {
    // 自定义图表-详情页
  },
  methods: {
    onTest() {
      this.$refs.selectPerson.open();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"></style>