unique-interface/examples/faas-ui/index.js

无UI组件库

const UI = require('dist/unique-interface.js');
// 引用结构和faas保持一致，先引用组件库样式
require('./less/ui.less');
// faas的公共样式
require('./less/common.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);

new Vue({
    el: "#root",
    template: require("./index.html"),
    data: {
        activeMenu: 'introduct',
        menus: [
            { key: 'introduct', title: '简介', icon: 'introduct' },
            {
                key: 'base',
                title: '基础',
                icon: 'base',
                children: [
                    { key: 'page', title: 'Layout 布局' },
                    { key: 'section', title: 'Section 区块' },
                    { key: 'color', title: 'Color 颜色' },
                    { key: 'text-title', title: 'Text 文字&标题' },
                    { key: 'button', title: 'Button 按钮' },
                    { key: 'icon', title: 'Icon 图标' }
                ]
            }, {
                key: 'navigation',
                title: '导航',
                icon: 'navigation',
                children: [
                    { key: 'menu', title: 'Menu 菜单' },
                    { key: 'dropdown', title: 'Dropdown 下拉菜单' },
                    { key: 'tab', title: 'Tab 标签页' },
                    { key: 'step', title: 'Step 步骤' },
                    { key: 'pagination', title: 'Pagination 翻页器' },
                    { key: 'breadcrumb', title: 'Breadcrumb 面包屑' }
                ]
            }, {
                key: 'form',
                title: '表单',
                icon: 'form',
                children: [
                    { key: 'input', title: 'Input 输入框' },
                    { key: 'radio', title: 'Radio 单选框' },
                    { key: 'checkbox', title: 'Checkbox 多选框' },
                    { key: 'select', title: 'Select 选择器' },
                    { key: 'upload', title: 'Upload 上传' },
                    { key: 'form-item', title: 'form-item 表单项' },
                    { key: 'form-item-line', title: '表单项内容行' },
                    { key: 'form', title: 'Form 表单' }
                ]
            }, {
                key: 'table-tag',
                title: '表格&标签',
                icon: 'table',
                children: [
                    { key: 'table', title: 'Table 表格' },
                    { key: 'tag', title: 'Tag 标签' }
                ]
            }, {
                key: 'notice',
                title: '提示',
                icon: 'notice',
                children: [
                    { key: 'popover', title: 'Popover 气泡' },
                    { key: 'toast', title: 'Toast 提示' },
                    { key: 'msgbox', title: 'msgbox 信息盒' },
                    { key: 'modal', title: 'Modal 弹窗' },
                    { key: 'new', title: 'New 上新提醒' }
                ]
            }, {
                key: 'components',
                title: '组件',
                icon: 'components',
                children: [
                    { key: 'data-board', title: '数据看板' },
                    { key: 'remain-amount', title: '余额SVG' },
                    { key: 'swipe', title: '轮播图' }
                ]
            }, {
                key: 'others',
                title: '其他',
                icon: 'others',
                children: [
                    { key: 'timeline', title: 'Timeline 时间线' },
                    { key: 'tips', title: 'Tips 提示' },
                    { key: 'ul', title: 'Ul 无序列表' },
                    { key: 'ol', title: 'Ol 有序列表' },
                    { key: 'page-loading', title: 'Loading 加载' }
                ]
            }
        ],
        form: {
            textarea: '',
            fruit: [],
            food: [],
            sports: [],
            files: []
        },
        formInfo: {
            sports: [
                { id: 10, text: 'football' },
                { id: 11, text: 'basketball' }
            ]
        },
        formErrors: {
            name: '错误提示文字'
        },
        modalVisible: false,
        page: 1,
        exampleMenu: 'home',
        tab: 'tab1',
        // 业务组件数据
        dataBoard: {
            title: '看板标题',
            data: [
                [{ desc: '数据1', count: 10 }],
                [{ desc: '数据1', count: 0 }],
                [{ desc: '数据1', count: 10, url: '/wapi/home/index' }],
                [{ desc: '数据1', count: 10 }],
                [{ desc: '数据1', count: 10 }]
            ]
        },
        remainAmount: {
            threshold: {
                available: 99,
                desc: 'xxx剩余额度',
                threshold: 150
            },
            params: {
                r: 50,
                strokeWidth: 10,
                angle: 300
            }
        },
        swipeImgs: ['https://file.ethercap.com/ether-public/platform/15393351069b11fbc44e1e6511fd97e4d017366e4c90ce37e0.png', 'https://file.ethercap.com/ether-public/platform/1535625187144d94a353066ff71bc0c8a3c6378724cf29eda0.png'],
        showLoading: false
    },
    watch: {
        activeMenu: function() {
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    },
    computed: {
        textareaNum: function() {
            return this.form.textarea.length;
        }
    },
    mounted: function() {
        if (location.hash) this.activeMenu = location.hash.slice(1);
    },
    methods: {
        changeMenu: function(value) {
            location.hash = this.activeMenu = value;
        },
        selectFile: function(files) {
            this.form.files.push(files[0].name);
        },
        popper: function() {
            this.$popper('用户主动操作反馈提示');
        },
        alert: function() {
            this.$alert('我是内容', '消息提示', {
                confirmButtonText: '确定'
            }).then(function() {});
        },
        confirm: function() {
            this.$confirm('我是内容', '消息确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(function() {}, function() {});
        }
    },
    components: {
        'data-board': require('./_component/project_data_board/project_data_board.js'),
        'remain-amount': require('./_component/svg/remain_amount/remain_amount.js')
    }
});