wayzer科技组件库

1.登录npm包管理 npm login

账号：_wayzer 密码：Wayzer123. 邮箱：[email protected]

2.打包 npm build

3.npm publish将包推送至包管理库 记得将package.json 里面版本号+1

4.使用：npm install wayzerscience

5.引入组件库 import wayzerscience from 'wayzerscience' Vue.use(wayzerscience)

6.在使用页面引入对应的组件，lib<index.js<看导出的组件名称

组件一律放在lib文件夹下，每增加一个新组件就新建一个对应的文件夹

文件夹 放一个.vue和一个对应的.js文件，具体可以参照testdemo

时间组件

引入组件

TimeType为需要显示的日历格式 - / 或者其他符号必须在最后一位

nowTime为传值给子组件时间，必须用字符串

realTime为是否显示实时时间 true显示实时时间 false显示传值时间

color 字体颜色

天气组件

propweather 天气情况 proptemperature 温度 propwidth 宽度 temperatureColor 温度颜色 type 天气样式类型 vertical（竖式） transverse（横式） popup(弹框)

下拉框组件

<Select :selectData="selectData" :selectedValue="selectedValue" name="name" value="value" placeholder="请选择园区"

:disabled="false" :width="160" :height="36" :num="6" @change="onChange" />

下拉框字典数据（selectData）

下拉初始默认值（selectedValue）

下拉字典项的文本（name），默认name

下拉字典项的值（value），默认value

下拉框默认文字（placeholder），默认请选择

是否禁用下拉（disabled），默认false

下拉框宽度（width），默认200px

下拉框高度（height），默认36px

下拉面板最多能展示的下拉项数，超过后滚动显示（num），默认6条

selectData: [

{ lable: "城市" },

{ lable: "农村" },

{ lable: "乡镇" },

{ lable: "省会" },

],

标题组件

title 标题

backgroundColor 背景颜色

borderColor 边框颜色

lineColor 提亮色（小短线）

borderPosition 提亮线位置（left right top bottom）

borderWidth 提亮线宽度

borderHight 提亮线宽度

1.使用标题组件作为标题

    <template #title>
      <div class="backimg">
        所属行业
      </div>
    </template>

2.使用标题左边插槽

  <template #left>
    <div class="tab-box flex">
      <div
        class="tab-item"
        :class="{ 'active-tab': activeTab === 0 }"
        @click="changeTab(0)"
      >
        企业发展评估
      </div>
      <div
        class="tab-item"
        :class="{ 'active-tab': activeTab === 1 }"
        @click="changeTab(1)"
      >
        企业对比
      </div>
      <div class="topChange" v-if="activeTab == 1">
        <el-select
          style="margin-right: 15px"
          v-model="value"
          placeholder="选择公司"
          :popper-append-to-body="false"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="width: 100px"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="value"
          placeholder="选择公司"
          :popper-append-to-body="false"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="width: 100px"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </template>

3.使用标题作为右边插槽

  <template #right>
    <div class="tab-box flex">
      <div
        class="tab-item"
        :class="{ 'active-tab': activeTab === 0 }"
        @click="changeTab(0)"
      >
        企业发展评估
      </div>
      <div
        class="tab-item"
        :class="{ 'active-tab': activeTab === 1 }"
        @click="changeTab(1)"
      >
        企业对比
      </div>
      <div class="topChange" v-if="activeTab == 1">
        <el-select
          style="margin-right: 15px"
          v-model="value"
          placeholder="选择公司"
          :popper-append-to-body="false"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="width: 100px"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="value"
          placeholder="选择公司"
          :popper-append-to-body="false"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="width: 100px"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </template>
</TitleName>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build