wayzerscience v2.0.5
wayzer科技组件库
1.登录npm包管理 npm login
账号:_wayzer 密码:Wayzer123. 邮箱:sunaolove@163.com
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago