component_ryl
v1.1.40
Published
自定义通用组件
Readme
component_ryl
自定义通用的组件
Build Setup
# 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.头部框架（特定情况）
# 框架分2种
# handHeader 左右分结构（exitSystem和toggleHide，这两个方法可用）
# handHeader2 上下分结构（没得上面的两个方法了，头部里面的东西，全都自定义了）
# <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=""> 只有 handHeader插件 里面有这个
# 操作插槽区域
# </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,
# },
# // 返回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.统一头部（特定情况）不做说明
# isAddNormal() 处理某个页面背景色为透明 (活码系统用过了)
# 1.在需要的页面添加类名：id="setNormal"
# 2.在 navbarIndex 里面监听路由，调用这个方法：isAddNormal()
# setMenuActive() 设置菜单选中效果
# 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");
# });
# 这是新版
this.$handConfirmNew({
type:1, //默认为1 1(自定义/常用样式),2(默认样式)
text:'提示内容',
title: '提示标题', // type为2时才传
showCancelButton: true, // 是否显示取消按钮
icon: 'warning', // 图标
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: '' // 自定义样式
}).then(()=>{
console.log(1)
}).catch(()=>{
console.log(2)
})
# 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"
:showClose="true" #是否显示关闭按钮(右上角)（当左边的按钮有逻辑功能时，这个值就要设置为false）
: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 头部可以添加图片了
#1.1.28: 新增了方法：isAddNormal() 处理某个页面背景色为透明，具体方法在上面 使用方法
#1.1.29: 新增类名:common_show_scroll 为了特殊情况下需要默认显示出滚动条
#1.1.31: 弹窗类询问框修改模式
#1.1.34: 页面框架 新增了 handHeader2（上下分）原来的handHeader（左右分）
#1.1.39: handHeader 样式微调
#1.1.40: dialog 弹窗 2个功能性按钮关闭时，会触发close的问题处理
For detailed explanation on how things work, consult the docs for vue-loader.