hyhc-pc v1.5.9

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 组件配置:

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 组件配置:

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

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

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

7. Form 表单元素

checkbox

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

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)