component_ryl v1.1.18

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.头部框架（特定情况）
        #     <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"
            :width="500"
            :btnCount="1" #btnCount值： 2（两个按钮 -- 默认） 1 (1个按钮) 0 (无按钮) 
            :confirmText="'自定义确定按钮的名称'"
            :cancelText="'自定义取消按钮的名称'"
            @cancel="取消按钮的事件"
            @confirm="确定按钮的事件"
            customClass="" # 自定义样式，默认为空
            cancelTextClass="oskdlsdf" # 取消 -- 文本的class样式
            cancelTextStyle="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]" />

    # 6.富文本 -- handTinymce

        # <handTinymce
        #   id="myEditor" //唯一容器id
        #   :height="400" // 默认400
        #   v-model="content"
        #   placeholder="请输入内容" // 默认文案：请输入内容
        #   :uploadType="'initUpload'" // 图片上传方式 默认:base64 自定义上传:initUpload 
        #   url="/static" // 插件和汉化包路径，默认 /static
        #   @handleImgUpload="handleImgUpload" // 如果是自定义上传，这个方法接收3个参数，如下:
        #   toolbar="bold italic underline strikethrough link alignleft aligncenter alignright forecolor backcolor image table styleselect fontselect fontsizeselect preview removeformat fullscreen"
        # />
        # 切记，如果要使用该富文本，则要先手动引入如下配置:
            # // import "tinymce/icons/default/icons";
            # // import "tinymce/themes/silver";
            # // // 引入富文本编辑器主题的js和css
            # // import "tinymce/themes/silver/theme.min";
            # // import "tinymce/skins/ui/oxide/skin.min.css";
            # // // 扩展插件
            # // import "tinymce/plugins/image";
            # // import "tinymce/plugins/link";
            # // import "tinymce/plugins/table";
            # // import "tinymce/plugins/fullscreen";
            # // import "tinymce/plugins/paste";
            # // import "tinymce/plugins/preview";
            # // import "tinymce/plugins/hr";
        

        # handleImgUpload(blobInfo, success, failure){
        #     let formdata = new FormData();
        #     formdata.append("image", blobInfo.blob());
        #     axios({
        #         method: "post",
        #         url: process.env.VUE_APP_BASE_URL + "/admin/common/upload",
        #         headers: {
        #         Authorization: "Bearer " + this.$cookieGet("TOKEN")
        #         },
        #         data: formdata,
        #     }).then((res) => {
        #         if (res.data.code != 200) {
        #         failure("操作提示: " + res.msg);
        #         return;
        #         }
        #         success(res.data.data.imageUrl);
        #     });
        # }

        # 对应的其他方法：

            # setContent() 设置值
            # getContent() 获取值

    # 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 弹窗优化

For detailed explanation on how things work, consult the docs for vue-loader.