unique-interface/examples/test/index.js

无UI组件库

const UI = require('dist/unique-interface.js');
// ui theme
require('theme/index.less');
// page style
require('index.less');

UI.setDefaults({
    plugins: {
        msgbox: {
            cancelButtonClass: 'ui-button-default ui-button-size-sm is-round',
            confirmButtonClass: 'ui-button-primary ui-button-size-sm is-round',
        }
    }
});
Vue.use(UI);

window.x = new Vue({
    el: "#root",
    template: require("./index.html"),
    data: {
        text: {
            ellipsisSlot: '…更多',
        },
        input: {
            model: '',
            suggestions: ['Ruby', 'Weiss', 'Blake', 'Yang'],
        },
        form: {
            model: {
                radio1: undefined,
                radio2: undefined,
            },
            errors: {},
        },
        radio: {
            model: 3,
        },
        checkbox: {
            model: [3],
        },
        select: {
            model1: undefined,
            model2: [],
            model3: [3, 4],
            option3: Array.from({length: 12}).map((v, i) => i + 1),
            option3computed: Array.from({length: 12}).map((v, i) => i + 1),
            loading3: false,
            map3: {
                3: 'option 3',
                4: 'option 4',
            },
        },
        modal: {
            open1: false,
            select1: [],
        },
        popper: {
            model1: 'popper 内容',
        },
        tabs: {
            active: 'eg-tab-yang',
        },
    },
    computed: {
        inputC: function(){
            return {
                suggestions: this.input.suggestions.filter(suggestion => ~suggestion.indexOf(this.input.model)),
            };
        },
    },
    methods: {
        setFormError: function(){
            this.form.errors = {
                a: 'fake error for you... ' + Math.random().toFixed(4),
                b: 'fake error for you... ' + Math.random().toFixed(4),
            };
        },
        selectFilter: function(query){
            this.select.option3computed = this.select.option3.filter(v => ~v.toString().indexOf(query));
        },
        msgboxAlert: function(){
            this.$alert('this is an alert!').then( () => console.log('alert confirmed') );
        },
        msgboxConfirm: function(){
            this.$confirm('this is a confirm!').then(
                () => console.log('confirm confirmed'),
                () => console.error('confirm canceled')
            );
        },
        pageChange: function(page){
            this.$popper('翻到第' + page + '页');
        },
    },
});