hyhc-pc

华云PC端组件,基于vue2.x版本

基于webpack使用, api请求，调用基于 async/await,

import HyhcPc from 'hyhc-pc';
Vue.use(HyhcPc);

华云PC端组件,更新中...

1.alert弹窗, vm.$alert(text: string)

c端通用alert弹窗

vm.$alert(text) ;

Example

..
 export default {
        data () {
            return {
                title : "选择联系人",
            }
        },
 
        methods : {
            alerts () {
                this.$alert('保存成功')
            }
        }
    }
..

2.progress进度条

c端,移动端 通用进度条，标签式调用

<progress-slider :value.sync="num2" :step="1"></progress-slider> ;

Example

..
 <div class="demo-block" style="padding: 15px">
     <progress-slider :value.sync="num" ></progress-slider>
     初始位置:50 , 当前位置：{{ num }} , 步长：5(默认)
 </div>
 
 <div class="demo-block" style="padding: 15px">
     <progress-slider :value.sync="num2" :step="1"></progress-slider>
     初始位置:30 , 当前位置：{{num2}}  , 步长：1(自定义)
 </div>
 
 <div class="demo-block" style="padding: 15px">
     <progress-slider :value.sync="num3" :disabled="true" ></progress-slider>
     自定义初始位置:15 , 当前位置：{{ num3 }}  ,  禁用拖动：true ,
 </div>
..

Options

progress-slider 组件配置:

参数	默认值	描述
value	0	初始进度值
min	0	最小值
max	100	最大值
step	5	步长
disabled	false	禁止拖动

3.组织架构选择弹窗 vm.$transferCompany(options: Object)

组织架构组件弹窗, 返回结果是一个promise,使用then回调，或者 async/await ,点击确定resolve,取消reject

vm.$transferCompany({
    max : 50,                       //最大选择人数
    allowSelectDepartment : true,   //是否允许选择整个部门
    modal : true                    //是否开启遮罩层
})

Example

export default {
   mounted () {
        this.$transferCompany({
            max :5,
        }).then(function (res) {
            //res 返回的结果
            alert.log('点击确定');
        },()=>{
        alert.log('点击取消');
        })
   }
}
 
//res结果模型：
{
    //选择的部门
    departments: [],
    //选择的人员
    users : [
 
    ]
}
 

Options

transferCompany 组件配置:

参数	默认值	描述
title	选择联系人	弹窗标题
baseUrl	空	base url 如：http://192.168.1.2
companyUrl	/plugin-task/rest/redirect	请求组织架构的API URL前缀，
fromJid	200299	客户端用户的ID
token	空	token
depid	空	初始化组件的公司ID
keyword	空	搜索关键字
isSearch	false	是否进入搜索视图
modal	true	是否显示遮罩层
visible	false	组件的显示与隐藏
allowSelectDepartment	true	是否允许选择部门
max	5	最大选择人数

4.Loding 加载 vm.$loading(options: Object) 或者 v-loding="loading" 指令

加载中

//以服务的方式调用：
 
//默认加载到全屏中
vm.$loading({
    fullscreen : true,
    text : '加载中...'
})
 
//以指令的方式调用
 
//加载到该节点
<div v-loading="loading" >
    2016年10月31日
</div>
 
//加载到body中
<div v-loading.body="loading" >
    2016年10月31日
</div>
 
//加载到全屏
<div v-loading.fullscreen="loading" >
    2016年10月31日
</div>

Options

参数	描述
target	服务方式调用时，需要传入
body	同 v-loading 指令中的 body 修饰符
fullscreen	同 v-loading 指令中的 fullscreen 修饰符
lock	同 v-loading 指令中的 lock 修饰符
text	显示在加载图标下方的加载文案
customClass	Loading 的自定义类名

6. 指令：ClickOutSide 点击其它区域隐藏或者回调

     v-clickoutside="handleOther"
     //handleOther必须是一个回调函数。不能是一个 a=3这样的表达式

7. Form 表单元素

checkbox

    <hy-checkbox v-model="变量" :disabled="布尔"></hy-checkbox>

属性	描述
disabled	是否禁止勾选
v-model	实时更新值

8. DatePicker 日期时间选择

picker

    <hy-date-picker v-model="value1"
                    type="date"
                    popper-class="hy-data-picker-blue"
                    placeholder="选择日期">
    </hy-date-picker>
 
    <hy-date-picker v-model="value2"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions1">
    </hy-date-picker>
 
    <script>
        export default {
            data(){
                return {
                    pickerOptions1: {
                        disabledDate(time) {
                        return time.getTime() > Date.now();
                        },
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                    value1: '',
                    value2: '',
                }
            }
        }
    </script>

参数：(参见Element-ui date-picker)