component_ryl 1.0.49 → 1.0.52

package/README.md

@@ -109,79 +109,82 @@
     # 1.弹窗询问框 -- handConfirm
 
         this.$handConfirm(
-        "您可以选择进入员工登录或复制该域名！", -- 必须传
-        true, 显示几个按钮，true为2个按钮，false为一个按钮 -- 默认true
-        "warning", 展示图标 -- 默认warning
-        "进入系统", 确认按钮的名称 -- 默认确定
-        "复制域名"  取消按钮的名称 -- 默认取消
+        "您可以选择进入员工登录或复制该域名！", #必须传
+        true, #显示几个按钮，true为2个按钮，false为一个按钮 -- 默认true
+        "warning", #展示图标 -- 默认warning
+        "进入系统", #确认按钮的名称 -- 默认确定
+        "复制域名"  #取消按钮的名称 -- 默认取消
         )
         .then(() => {
-            // window.open("https://www.baidu.com");   确定事件的事件
+            window.open("https://www.baidu.com");
         })
         .catch(() => {
-            // window.open("https://www.taobao.com");  只有一个按钮时，catch这个函数不用谢
+            window.open("https://www.taobao.com");
         });
 
     # 2.弹出层     -- handDialog
 
         <hand-dialog
-            :visible="isShow" 弹窗名称
+            :visible="isShow"
             title="测试看看1"
             :width="500"
-            :btnCount="1" btnCount值： 2（两个按钮 -- 默认） 1 (1个按钮) 0 (无按钮) 
+            :btnCount="1" #btnCount值： 2（两个按钮 -- 默认） 1 (1个按钮) 0 (无按钮) 
             :confirmText="'自定义确定按钮的名称'"
             :cancelText="'自定义取消按钮的名称'"
             @cancel="取消按钮的事件"
             @confirm="确定按钮的事件"
         >
             <div slot="content">
-            插槽中的内容
+                插槽中的内容
             </div>
         </hand-dialog>
 
+        #  这个方法一般用不到，处理特殊情况（如 点击确定按钮后，接口报错，不关闭弹窗时，可以调用这个方法，关掉 loading效果）
+        handElse()
+
     # 3.分页       -- handPaging
 
         <handPaging
-          :total="210" -- 总条数
-          :page.sync="searchForm.page"  -- 当前页
-          :limit="20" -- 每页展示条数
-          @reload="getList"  -- 触发翻页时的函数，返回有个对象，用里面的page字段就行，代表当前页码
+          :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
-            },
-        }
-
-    # 4.数字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"
@@ -196,26 +199,36 @@
     # 5.自定义指令 -- directives
 
         v-lay -- 图片懒加载
-            方法：
+            # 无其他要求
             <img v-lazy="{url: '图片地址',default:'默认地址'}" />
 
         v-password -- 密码输入框 眼睛图标
-            方法：
+            # 无其他要求
             <el-input v-model="pwd" v-password />
 
-        v-number -- 只能输入数字  --  可传入传参max，表示最大值
-            方法：
+        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位小数  --  可传入传参max，表示最大值，min 表示最小值，如：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>
+        v-copy -- 复制文本 
+
+            # 无其他要求
+            <div v-copy="[这是复制的文本内容]">这是可复制的内容，点击复制</div>
+            # 可调用函数
+            <div v-copy="[这是复制的文本内容,search]">这是可复制的内容，点击复制</div>
 
         v-debounce -- 防抖
-            <el-button size="small" v-debounce="[search]">不带参数</el-button>
+            # 不带参数
+            <el-button size="small" v-debounce="[reset]">不带参数</el-button>
+            # 带参数
             <el-button size="small" v-debounce="[reset,{age:1,sex:123}]">带参数</el-button>
 
     # 6.富文本 -- handTinymce
@@ -229,29 +242,29 @@
           @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);
-            });
-        }
+        # 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() 获取值
+            # setContent() 设置值
+            # getContent() 获取值
 
     # 7.动态面包屑 handBreadCrumb
 
@@ -263,15 +276,15 @@
 
         <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
@@ -310,7 +323,7 @@
 #1.0.42: table调整
 #.
 #1.0.47: 自定义tab选择（用于特定筛选查询）
-#1.0.49: 指令优化 新增
+#1.0.52: 指令优化 新增
 ```
 
 For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).