component_ryl 1.0.47 → 1.0.50

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,59 +102,51 @@
         #         };
         #     },
         # },
-    # 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.统一头部（特定情况）不做说明
+
+    # 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");
+        });
+
+    # 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字段就行，代表当前页码
+        />
 
         # 参数：{
         #     // 总条数
@@ -179,7 +181,7 @@
         #     },
         # }
 
-    # 5.数字or金额输入框  --  handInput
+    # 4.数字or金额输入框  --  handInput (基本用不上)
 
         # <handInput
         #   v-model="initInputName"
@@ -191,61 +193,85 @@
         #   :precision="2"  //保留小数点位数  不传，则只能输入整数
         # />
 
-    # 6.自定义指令 -- directives
-
-        # v-lay -- 图片懒加载
-        #     方法：
-        #     <img v-lazy="{url: '图片地址',default:'默认地址'}" />
-        # v-password -- 密码输入框 眼睛图标
-        #     方法：
-        #     <el-input v-model="pwd" v-password />
-        # 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
+
+        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>
+
+    # 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);
-            # });
+        #     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() 获取值
 
-    # 8.动态面包屑 handBreadCrumb
-        # <handBreadCrumb 
-        #     :home="{path: "/home", meta: { title: "首页" }}"  // 默认首页信息
-        # />
+    # 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: [
@@ -294,6 +320,7 @@
 #1.0.42: table调整
 #.
 #1.0.47: 自定义tab选择（用于特定筛选查询）
+#1.0.50: 指令优化 新增
 ```
 
 For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).