component_ryl 1.0.46 → 1.0.49

package/README.md

@@ -7,9 +7,19 @@
 # install dependencies
 # npm install
 
+#组件总览：
+1.弹窗询问框 -- handConfirm
+2.弹出层     -- handDialog
+3.分页       -- handPaging
+4.数字or金额输入框  --  input (用的少，基本用指令)
+5.指令       
+6.富文本     -- handTinymce
+7.动态面包屑 -- handBreadCrumb
+8.自定义tab切换 -- handTab
+
 # 所有子方法
 
-    # 1.头部框架（特定情况）
+    # 0.头部框架（特定情况）
         #     <handHeader
         #     class="initContent"
         #     :menuList="menuList"
@@ -92,94 +102,86 @@
         #         };
         #     },
         # },
-    # 2.弹窗询问框 -- handConfirm
-    # 3.弹出层     -- handDialog
-    # 4.分页       -- handPaging
-    # 5.数字or金额输入框  --  input (用的少，基本用指令)
-    # 6.指令
-    # 7.富文本     -- handTinymce
-    # 8.动态面包屑 -- handBreadCrumb
-    # 9.自定义tab切换 -- handTab
 
 # 使用方法：
-    # 1.统一头部（特定情况）不做说明
-
-    # 2.弹窗询问框 -- handConfirm
-
-        #   this.$handConfirm(
-        #     "您可以选择进入员工登录或复制该域名！", -- 必须传
-        #     true, 显示几个按钮，true为2个按钮，false为一个按钮 -- 默认true
-        #     "warning", 展示图标 -- 默认warning
-        #     "进入系统", 确认按钮的名称 -- 默认确定
-        #     "复制域名"  取消按钮的名称 -- 默认取消
-        #   )
-        #   .then(() => {
-        #       // window.open("https://www.baidu.com");   确定事件的事件
-        #   })
-        #   .catch(() => {
-        #       // window.open("https://www.taobao.com");  只有一个按钮时，catch这个函数不用谢
-        #   });
-
-    # 3.弹出层     -- handDialog
-
-        # <hand-dialog
-        #   :visible="isShow" 弹窗名称
-        #   title="测试看看1"
-        #   :width="500"
-        #   :btnCount="1" btnCount值： 2（两个按钮 -- 默认） 1 (1个按钮) 0 (无按钮) 
-        #   :confirmText="'自定义确定按钮的名称'"
-        #   :cancelText="'自定义取消按钮的名称'"
-        #   @cancel="取消按钮的事件"
-        #   @confirm="确定按钮的事件"
-        # >
-        #   <div slot="content">
-        #     插槽中的内容
-        #   </div>
-        # </hand-dialog>
-
-    # 4.分页       -- handPaging
-
-        # <handPaging
-        #   :total="210" -- 总条数
-        #   :page.sync="searchForm.page"  -- 当前页
-        #   :limit="20" -- 每页展示条数
-        #   @reload="getList"  -- 触发翻页时的函数，返回有个对象，用里面的page字段就行，代表当前页码
-        # />
+    # 0.统一头部（特定情况）不做说明
 
-        # 参数：{
-        #     // 总条数
-        #     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
-        #     },
-        # }
+    # 1.弹窗询问框 -- handConfirm
+
+        this.$handConfirm(
+        "您可以选择进入员工登录或复制该域名！", -- 必须传
+        true, 显示几个按钮，true为2个按钮，false为一个按钮 -- 默认true
+        "warning", 展示图标 -- 默认warning
+        "进入系统", 确认按钮的名称 -- 默认确定
+        "复制域名"  取消按钮的名称 -- 默认取消
+        )
+        .then(() => {
+            // window.open("https://www.baidu.com");   确定事件的事件
+        })
+        .catch(() => {
+            // window.open("https://www.taobao.com");  只有一个按钮时，catch这个函数不用谢
+        });
+
+    # 2.弹出层     -- handDialog
+
+        <hand-dialog
+            :visible="isShow" 弹窗名称
+            title="测试看看1"
+            :width="500"
+            :btnCount="1" btnCount值： 2（两个按钮 -- 默认） 1 (1个按钮) 0 (无按钮) 
+            :confirmText="'自定义确定按钮的名称'"
+            :cancelText="'自定义取消按钮的名称'"
+            @cancel="取消按钮的事件"
+            @confirm="确定按钮的事件"
+        >
+            <div slot="content">
+            插槽中的内容
+            </div>
+        </hand-dialog>
+
+    # 3.分页       -- handPaging
+
+        <handPaging
+          :total="210" -- 总条数
+          :page.sync="searchForm.page"  -- 当前页
+          :limit="20" -- 每页展示条数
+          @reload="getList"  -- 触发翻页时的函数，返回有个对象，用里面的page字段就行，代表当前页码
+        />
 
-    # 5.数字or金额输入框  --  handInput
+        参数：{
+            // 总条数
+            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
+            },
+        }
+
+    # 4.数字or金额输入框  --  handInput
 
         # <handInput
         #   v-model="initInputName"
@@ -191,72 +193,85 @@
         #   :precision="2"  //保留小数点位数  不传，则只能输入整数
         # />
 
-    # 6.自定义指令 -- directives
-
-        # v-lay -- 图片懒加载
-        #     方法：
-        #     <img v-lazy="{url: '图片地址',default:'默认地址'}" />
-        # v-password -- 密码输入框 眼睛图标
-        #     方法：
-        #     <el-input v-model="pwd" v-password />
-        #     <el-input v-model="pwd" v-password="{ color: 'green' }" /> 这是老版，没效果了 
-        # v-number -- 只能输入数字  --  可传入传参max，表示最大值
-        #     方法：
-        #     <el-input v-model="pwd" v-number />
-        # v-money -- 只能输入金额，默认2位小数  --  可传入传参max，表示最大值，如：v-number="{ max: 100 }"
-        #     方法：
-        #     <el-input v-model="pwd" v-money />
-    # 7.富文本 -- handTinymce
-        # <handTinymce
-        #   id="myEditor" //唯一容器id
-        #   :height="400" // 默认400
-        #   v-model="content"
-        #   :uploadType="'initUpload'" // 图片上传方式 默认:base64 自定义上传:initUpload 
-        #   url="/static" // 插件和汉化包路径，默认 /static
-        #   @handleImgUpload="handleImgUpload" // 如果是自定义上传，这个方法接收3个参数，如下:
-        # />
+    # 5.自定义指令 -- directives
 
-        # 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);
-            # });
-        # }
+        v-lay -- 图片懒加载
+            方法：
+            <img v-lazy="{url: '图片地址',default:'默认地址'}" />
 
-        # 其他方法：
-        # setContent() 设置值
+        v-password -- 密码输入框 眼睛图标
+            方法：
+            <el-input v-model="pwd" v-password />
 
-        # getContent() 获取值
+        v-number -- 只能输入数字  --  可传入传参max，表示最大值
+            方法：
+            <el-input v-model="pwd" v-number />
 
-    # 8.动态面包屑 handBreadCrumb
-        # <handBreadCrumb 
-        #     :home="{path: "/home", meta: { title: "首页" }}"  // 默认首页信息
-        # />
+        v-money -- 只能输入金额，默认2位小数  --  可传入传参max，表示最大值，min 表示最小值，如：v-number="{ max: 100,min:4 }"
+            方法：
+            <el-input v-model="pwd" v-money />
+
+        v-copy -- 复制文本
+            <div v-copy="这是复制的文本内容">这是可复制的内容，点击复制</div>
+
+        v-debounce -- 防抖
+            <el-button size="small" v-debounce="[search]">不带参数</el-button>
+            <el-button size="small" v-debounce="[reset,{age:1,sex:123}]">带参数</el-button>
+
+    # 6.富文本 -- handTinymce
+
+        <handTinymce
+          id="myEditor" //唯一容器id
+          :height="400" // 默认400
+          v-model="content"
+          :uploadType="'initUpload'" // 图片上传方式 默认:base64 自定义上传:initUpload 
+          url="/static" // 插件和汉化包路径，默认 /static
+          @handleImgUpload="handleImgUpload" // 如果是自定义上传，这个方法接收3个参数，如下:
+        />
+
+        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: "首页" }}"  // 默认首页信息
+        />
+
+    # 8.自定义tab切换（特定项目的ui效果）
 
-    # 9.自定义tab切换
-        # <handTab :list="statusList" @getStatus="getStatus" ref="handTab"/>
+        <handTab :list="statusList" @getStatus="getStatus" ref="handTab"/>
 
-        # 参数:
-        #     list: [
-        #         {
-        #             label: '全部',
-        #             value: 0
-        #         },
-        #     ]
-        # 方法：
-        #     getStatus 返回了当前选中对象和index
+        参数:
+            list: [
+                {
+                    label: '全部',
+                    value: 0
+                },
+            ]
+        方法：
+            getStatus 返回了当前选中对象和index
 
 # serve with hot reload at localhost:8080
 # npm run dev
@@ -294,7 +309,8 @@
 #.
 #1.0.42: table调整
 #.
-#1.0.46: 自定义tab选择（用于特定筛选查询）
+#1.0.47: 自定义tab选择（用于特定筛选查询）
+#1.0.49: 指令优化 新增
 ```
 
 For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).