droi-hass-ui v0.0.4

Droi-Hass-UI

该组件库扩展了原有的haas-ui组件。具体差异化见下文。

1、安装

npm i droi-hass-ui -S

#2、 全局引用、局部使用 具体引用你可参照原文来进行配置。haas-ui

差异化

1、增加DroiTabBar

示例：

<template>
<droi-tab-bar left="左边栏" center="中间文字" right="右侧文字" @left="headleClick" @right="headleClick" @center="headleClick" />
</template>

**插槽slot**
>值得注意的是插槽不能与文字一同使用；
`slot="left"、slot="center"、slot="right"`

<droi-tab-bar left="左边栏" right="右侧文字" @left="headleClick"
@center="headleClick" >

2、DroiPopup

该组件与haas-ui的Popup不同的地方在于，增加margin属性值 当你定位不是center的时，弹出层不在贴边弹出而是与你设定的margin值有关；默认值为：0px

<template>
  <droi-popup v-model="show" margin="10vw" position="bottom" :transition="true>
      <div class="demo-popup-content">
        <text>popup content</text>
      </div>
    </droi-popup>
</template>

<script>
import { DroiPopup } from "droi-hass-ui";
export default {
  name: "Popup",
  components: { DroiPopup },
  data() {
    return {
      show: false
    };
  },
  methods: {
    showPop() {
      this.show = true
    }
  }
};
</script>
<style scoped>
.demo-popup-content {
  background-color: #ffffff;
  width: 50%;
  height: 30%;
  align-items: center;
  justify-content: center;
}
</style>