Calculation/app/public/js/component/input.js

'use strict';

/**
 * vue自定义组件
 *
 * @author CaiAoLin
 * @date 2017/11/27
 * @version
 */

// 文本输入框
Vue.component('input-text', {
    props: ['label', 'id', 'name', 'value', 'required', 'placeholder', 'maxlength', 'readonly', 'password', 'disabled', 'msg'],
    template: '' +
    '<div class="form-group" :class="{ required: required }">' +
        '<label>{{ label }}</label>' +
        '<input :type="[ password ? \'password\' : \'text\']" :id="id" :name="name" :value="value" :placeholder="placeholder" ' +
            ':maxlength="maxlength" :readonly="readonly" :disabled="disabled" class="form-control form-control-sm"/>' +
        '<small class="form-text text-danger" v-if="readonly && msg !== null && msg !== undefined ">{{ msg }}</small>' +
    '</div>'
});

// 长文本输入框
Vue.component('input-textarea', {
    props: ['label', 'id', 'name', 'value', 'required', 'placeholder', 'rows'],
    template: '' +
    '<div class="form-group row" :class="{ required: required }">' +
        '<label class="col-sm-2 text-right">{{ label }}</label>' +
        '<div class="col-lg-6">' +
            '<textarea class="form-control" :id="id" :name="name" :rows="rows" :placeholder="placeholder">{{ value }}</textarea>' +
        '</div>' +
        '<div class="col-lg-4"></div>' +
    '</div>'
});

// 单选框输入
Vue.component('input-radio', {
    props: ['label', 'id', 'name', 'value', 'required', 'items'],
    template: '' +
    '<div class="form-group row" :class="{ required: required }">' +
        '<label class="col-sm-2 text-right">{{ label }}</label>' +
        '<div class="col-lg-6">' +
            '<label class="radio-inline" v-for="(item, index) of items">' +
                '<input type="radio" :name="name" :value="item.value" :checked="item.value.toString() === value"> {{ item.text }} &nbsp;' +
            '</label>' +
        '</div>' +
        '<div class="col-lg-4"></div>' +
    '</div>'
});

// 下拉选择
Vue.component('dropdown', {
    props: ['id', 'value', 'name', 'options', 'placeholder', 'size'],
    template: '' +
    '<select class="form-control" :class="[ \'form-control-\' + size ]" :name="name" :id="id">' +
        '<option value="">{{ placeholder }}</option>' +
        '<option v-if="option !== null && option !== undefined && typeof option == \'string\'" v-for="(option, index) of options" :value="index" :selected="index.toString() === value">{{ option }}</option>' +
        '<option v-if="option !== null && option !== undefined && option instanceof Object" v-for="(option, index) of options" :value="index" :selected="option.id.toString() === value">{{ option.name }}</option>' +
    '</select>'
});

// 下拉框(Bootstrap组件)
Vue.component('input-dropdown', {
    props: ['label', 'id', 'name', 'value', 'required', 'options', 'placeholder', 'size'],
    template: '' +
    '<div class="form-group row" :class="{ required: required }">' +
        '<label class="col-sm-2 col-form-label text-right">{{ label }}</label>' +
        '<div class="col-lg-6">' +
            '<dropdown :id="id" class="form-control" :name="name" :options="options" :placeholder="placeholder" ' +
                ':value="value" :size="size"></dropdown>' +
        '</div>' +
        '<div class="col-lg-4"></div>' +
    '</div>'
});