自定义通用的组件
# install dependencies
# npm install
#组件总览:
1.弹窗询问框 -- handConfirm
2.弹出层 -- handDialog
3.分页 -- handPaging
4.数字or金额输入框 -- input (用的少,基本用指令)
5.指令
6.富文本 -- handTinymce (移动到tinymce_ryl)
7.动态面包屑 -- handBreadCrumb
8.自定义tab切换 -- handTab
9.暂无数据 -- handNoData
10.查看大图 -- handSeeImgShow
# 所有子方法
# 0.头部框架(特定情况)
# <handHeader
# class="initContent"
# :menuList="menuList"
# :defaultActive="menuActive"
# :userInfo="setUserInfo"
# ref="menu"
# @exitSystem="outSystem" // 退出
# @toggleHide="toggleHide"// 侧边栏 展开 隐藏
# >
# <div slot="headElseTitle" class="">
# 这是系统名称区域
# </div>
# <div slot="headElseInfo" class="">
# 头部左边的插槽区域
# </div>
# <div slot="headElseInfoRight" class="">
# 头部右边的插槽区域
# </div>
# <div slot="headElseHand" class="">
# 操作插槽区域
# </div>
# <template slot="content">
# 系统内容区域
# </template>
# </handHeader>
# // 导航列表 -- name 表示 系统名称,list 表示 菜单列表
# 注:如果菜单需要添加红点提示,则需要添加tips对象,tips对象与path、meta等同级,如:
# {
# path: "/",
# meta: { title: "菜单1", icon: "el-icon-user" },
# tips: {name: 'hot'} // 表示 小红点 提示
# tips: {name: 'new'} // 表示 new字样 提示
# tips: {name: 'num',value:72} // 表示 数字 提示
# tips: {name: 'run',value:'hot'} // 表示 运动的样式
# }
# menuList: {
# type: Object,
# default: () => {
# return {};
# },
# },
#菜单栏的默认背景颜色,字体颜色和选中字体颜色
# menuColor: {
# type: Object,
# default: () => {
# return {
# color: "#000",
# activeColor: "",
# backgroundColor: "#fff",
# };
#},
#},
# // 默认选中的菜单
# defaultActive: {
# type: String,
# default: "/",
# },
# // 是否开始隐藏和展开功能呢
# collapse: {
# type: Boolean,
# default: () => {
# return false;
# },
# },
# // 侧边栏的宽度
# width: {
# type: Number,
# default: 200,
# },
# //内容区域的最小宽度
# minWidth: {
# type: Number,
# default: 1500,
# },
# // 返回saas的其他信息
# userInfo: {
# type: Object,
# default: () => {
# return {
# 如
# name: '1112', // 登录人的名称
# saas: 'https://www.apiyz.com/#/', // saas首页
# help: 'https://www.apiyz.com/#/help', // help链接
# copyRight: '版权信息',
# };
# },
# },
# // 是否默认菜单项全部打开
#showDefaltOpen: {
# type: Boolean,
# default: () => {
# return true;
# }
#}
# 使用方法:
# 0.统一头部(特定情况)不做说明
# 1.弹窗询问框 -- handConfirm
this.$handConfirm(
"您可以选择进入员工登录或复制该域名!", #必须传
true, #显示几个按钮,true为2个按钮,false为一个按钮 -- 默认true
"warning", #展示图标 -- 默认warning
"进入系统", #确认按钮的名称 -- 默认确定
"复制域名", #取消按钮的名称 -- 默认取消
'initClass' #自定义类名,可不传
)
.then(() => {
window.open("https://www.baidu.com");
})
.catch(() => {
window.open("https://www.taobao.com");
});
# 2.弹出层 -- handDialog
<hand-dialog
:visible="isShow"
title="测试看看1"
title_img_url="https://v2-saas-1259468876.cos.ap-shanghai.myqcloud.com/system/admin/311c1cbabbf8c7df978164b6f62a8990.png" # 弹窗标题中添加自定义图片的地址
title_img_style="width:32px;height:32px;border-radius:50%;margin-right:4px;" # 弹窗标题中添加自定义图片的行内样式
title_img_class="title_img_class" # 弹窗标题中添加自定义图片的class
:width="500"
:btnCount="1" #btnCount值: 2(两个按钮 -- 默认) 1 (1个按钮) 0 (无按钮)
:confirmText="'自定义确定按钮的名称'"
:cancelText="'自定义取消按钮的名称'"
@cancel="取消按钮的事件"
@confirm="确定按钮的事件"
:center="false" # 是否对头部和底部采用居中布局
customClass="" # 自定义样式,默认为空
cancelTextClass="oskdlsdf" # 取消 -- 文本的class样式
cancelTextStyle="font-size:20px" #取消 -- 文本的style样式
confirmTextClass="oskdlsdf" #确定 -- 文本的class样式
confirmTextStyle="font-size:20px" #确定 -- 文本的style样式
>
<div slot="content">
插槽中的内容
</div>
</hand-dialog>
# 3.分页 -- handPaging
<handPaging
:total="210" #总条数
:page.sync="searchForm.page" #当前页
:limit="20" #每页展示条数
@reload="getList" #触发翻页时的函数,返回有个对象,用里面的page字段就行,代表当前页码
/>
# 参数:{
# // 总条数
# total: {
# type: Number,
# default: 0
# },
# // 当前页
# page: {
# type: Number,
# default: 1
# },
# // 每页默认显示条数
# limit: {
# type: Number,
# default: 15
# },
# // 自定义分页功能
# layout: {
# type: String,
# default: "total,sizes,prev,pager,next,jumper"
# },
# // 是否有背景色
# background: {
# type: Boolean,
# default: true
# },
# // 是否是小型分页
# small: {
# type: Boolean,
# default: false
# },
# // 页码按钮的数量,当总页数超过该值时会折叠(大于等于 5 且小于等于 21 的奇数)
# pagerCount: {
# type: Number,
# default: 7
# },
# }
# 4.数字or金额输入框 -- handInput (基本用不上)
# <handInput
# v-model="initInputName"
# placeholder="请输入整数"
# size="medium" // 默认 small
# :inputMax="300" // 最大值
# :maxlength="8" // 最大输入长度
# :disabled="false" // 禁用
# :precision="2" //保留小数点位数 不传,则只能输入整数
# />
# 5.自定义指令 -- directives
v-lay -- 图片懒加载
# 无其他要求
<img v-lazy="{url: '图片地址',default:'默认地址'}" />
v-password -- 密码输入框 眼睛图标
# 无其他要求
<el-input v-model="pwd" v-password />
v-number -- 只能输入数字 -- 可传入传参max,表示最大值,min 表示最小值
# 无其他要求
<el-input v-model="pwd" v-number />
# 传入最大 or 最小值
<el-input v-model="pwd" v-number="{ max: 100,min:4 }" />
v-money -- 只能输入金额,默认2位小数
# 无其他要求
<el-input v-model="pwd" v-money />
# 传入最大 or 最小值
<el-input v-model="pwd" v-money="{ max: 100,min:4 }" />
v-copy -- 复制文本
# 无其他要求
<div v-copy="[这是复制的文本内容]">这是可复制的内容,点击复制</div>
# 可调用函数
<div v-copy="[这是复制的文本内容,search]">这是可复制的内容,点击复制</div>
v-debounce -- 按钮防抖
# 不带参数
<el-button size="small" v-debounce="[reset]">不带参数</el-button>
# 带参数
<el-button size="small" v-debounce="[reset,{age:1,sex:123}]">带参数</el-button>
v-debounce_input -- 输入框防抖
<el-input size="small" v-debounce_input="[reset]" />
# 7.动态面包屑 handBreadCrumb
<handBreadCrumb
:home="{path: "/home", meta: { title: "首页" }}" // 默认首页信息
:isNeedHome="true" // 是否需要显示首页,默认为true
/>
# 8.自定义tab切换(特定项目的ui效果)
<handTab :list="statusList" @getStatus="getStatus" ref="handTab"/>
# 参数:
# list: [
# {
# label: '全部',
# value: 0
# },
# ]
# 方法:
# getStatus 返回了当前选中对象和index
# setIndex(index) 设置当前选中
# 9.暂无数据 handNoDada
<handNoDada />
# 参数
# title: {
# type: String,
# default: '暂无数据'
# },
#10. 查看大图 handSeeImgShow
<handSeeImgShow />
#使用发放:
# this.$refs.handSeeImgShow.show = true;
# this.$refs.handSeeImgShow.src = e.target.currentSrc;
# serve with hot reload at localhost:8080
# npm run dev
# build for production with minification
# npm run build
#1.0.5: 调整了头部框架的结构
#1.0.6: 去掉所有自定义的颜色,如字体颜色,背景颜色等
#1.0.7: 简单的样式调整
#1.0.8: 简单的样式调整,替换默认头像
#1.0.9: 同上
#1.0.10: 同上,默认图片异常问题
#1.0.11: 修改默认主题色
#1.0.12: 修改细节样式
#1.0.13: 菜单栏,添加红点提示
#1.0.14: dialog 弹窗 右上角 添加关闭 xx
#1.0.15: dialog 弹窗 btnCount 2(两个按钮 -- 默认) 1 (1个按钮) 0 (无按钮)
#1.0.16: 底部版权信息 识别标签
#.
#.
#.
#1.0.27: 新增富文本 tinymce
#1.0.28: 菜单栏,添加红点提示,调试收起菜单栏时,提示异常bug
#.
#1.0.31: 菜单栏新增无穷级数,添加动态面包屑
#1.0.32: 菜单栏行高调整为42
#1.0.33: 处理弹窗关闭时,调用2次方法的异常
#.
#1.0.35: 菜单栏 icon微调
#1.0.36: 调整选择,多选,下拉的label字号为12px
#1.0.37: 菜单栏 new字样 效果调试
#1.0.38: 富文本编辑框,去掉即将删除的插件
#1.0.39: 分页组件优化,自定义设置
#.
#1.0.42: table调整
#.
#1.0.47: 自定义tab选择(用于特定筛选查询)
#1.0.52: 指令优化 新增
#1.0.61: 修改主题色
#1.0.62: 置顶 v-number 正则替换空 为 0
#1.0.63: 菜单栏,添加hot动画展示
#1.0.67: header组件结构更新
#1.0.69: header组件结构更新(新增了验证图片加载完成事件,主要是处理计算高度时,有图片未加载完成,从而影响内容区域的高度计算)
#1.0.71: header组件 导航小bug优化
#1.0.83: header组件优化
#1.0.91: 优化面包屑、新增暂无数据组件
#1.0.93: table 添加border属性后,多余边框线隐藏
#1.0.94: table 居中
#1.0.95: 界面缩放后 重新计算高度
#1.0.98: 自动计算每个模块的最小宽度
#1.1.0: 去掉打包中的element,项目中需要自己下载
#1.1.13: 去掉tinymce
#1.1.16: 查看大图
#1.1.17: 菜单栏 添加是否默认 展开全部菜单
#1.1.18: dialog 弹窗优化
#1.1.20: 主题内容高度调整,为了显示更多的内容,下滑才现实底部版权
#1.1.21: 兼容tinymce下面的样式
#1.1.22: dialog 是否对头部和底部采用居中布局
#1.1.24: dialog 头部可以添加图片了
For detailed explanation on how things work, consult the docs for vue-loader.