yxp_selector v1.1.0

yxp_selector

Example

必要条件： 1.全局安装过element-ui， 2.基于vue， 3.基于less

/* main.js 全局安装element-ui 已安装忽略*/
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

/* 组件使用 */
<template>
  <div>
    <yxpSelector :rowItem="rowItem1" @rowItemDateChange="rowItemSelectChange1" />
    <yxpSelector :rowItem="rowItem2" @rowItemSelectChange="rowItemSelectChange2" />
    <yxpSelector :rowItem="rowItem3" @rowItemSelectChange="rowItemSelectChange3" />
  </div>
</template>
<script>
import yxpSelector from "yxp_selector";
export default {
    components: {
        yxpSelector
    },
    data(){
        return {
            rowItem1: {
                tit: "日期",
                class: "date",//类型,为date时为日期选择组件，可以作为类名
                list: [
                    { id: "7", name: "最近7天" },
                    { id: "30", name: "最近30天" },
                    { id: "365", name: "最近一年" }
                ]
            },
            rowItem2: {
                tit: "学期",
                class: "trem",
                list: [
                    { id: "00000", name: "全一册" },
                    { id: "11111", name: "上学期" },
                    { id: "22222", name: "下学期" }
                ]
            },
            rowItem3: {
                tit: "年级",
                class: "grade",
                list: [{ id: "12345", name: "一年级" },
                { id: "12344", name: "二年级" },
                { id: "12343", name: "三年级" },
                { id: "12342", name: "四年级" },
                { id: "12341", name: "五年级" },
                { id: "12340", name: "六年级" },
                { id: "123401", name: "七年级" },
                { id: "123402", name: "八年级" },
                { id: "113403", name: "九年级" },
                { id: "124401", name: "高一" },
                { id: "127402", name: "高二" },
                { id: "128403", name: "高三" }]
            },
        }
    },
    methods:{
        /* 选择改变的回调 日期类型（class）返回开始与结束数组 其他组件类型返回包含选择项的对象 */
        rowItemSelectChange1(val) {
            console.log(val);
            //[2019-05-06,2019-06-15]
        },
        rowItemSelectChange2(val) {
            console.log(val);
            //{id:'00000',name:'全一册'}
        },
        rowItemSelectChange3(val) {
            console.log(val);
            //{ id: "12345", name: "一年级" }
        }
    }
}
</script>