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>

<script>
  import { DroiTabBar } from "droi-hass-ui";
  export default {
    components: { DroiTabBar },
    methods: {
      headleClick(txt){
        //txt对应响应文字
      }
    }
  }
</script>

插槽slot

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

<droi-tab-bar 
left="左边栏" 
 right="右侧文字" 
@left="headleClick"  
@center="headleClick" >
<div slot="center" @click="***">、、、</div>
</droi-tab-bar>

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>