vue-uiComponents

介绍

基于Vue的UI组件库

软件架构

Vue+Vue-i18n+Less+animate.css

使用说明

拷贝/uiComponents目录到您的项目中，在main.js引用，如下：

1.全局引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router/router";
import UIComponents from "./uiComponents/index";

Vue.use(UIComponents, {
    i18n: "zh", //语言
    key: "ui",  //标签自定义前缀，如果是‘sk’,引入组件时就是‘<sk-video></sk-video>’
});

const i18n = UIComponents.i18n; //语言
new Vue({
    i18n,
    router,
    render: (h) => h(App),
}).$mount("#app");

2.按需引入

    ...
    <uiForm :item="{...}"></uiForm>
  </div>
</template>
<script>
import UIComponents from "../uiComponents/index";
export default {
  components: {
    uiForm: UIComponents.components.uiForm,
  },
  data() {
    ...
  },
  ...

3.全局样式

扩展组件时，每个组件的公共样式如下：
\uiComponents\style\common.less

引用：
@import "../../style/common.less";
color:@red;

注：DEMO在/src/views/home.vue中

扩展

只需要在components目录创建相应组件的目录，并在其目录下创建的index.js和组件名.vue文件，同时在components根目录的index.js中引入就可以扩展了，如下：组件目录下的index.js及相应的.vue文件

import component from "./component.vue";
export default component;

components根目录中的index.js，如下：

...
import uiComponent from "./组件同名目录/index";
...
export const components = {
    ...
    uiComponent,
    ...
}

命名要十分注意

如uiComponent，标签是<ui-component></ui-component>，uiComponentItem，就是<ui-component-item></ui-component-item>

引用时如下面的写法就可以使用了,建议按例子插入参数。

<ui-component :item="{name:value}">
    <template #content="{item}">
        {{item.name}}
        ...
    </template>
 </ui-component>

注：slot的名称统一命名“content”，父子级传值统一命名“item”，并且类型是Object

组件列表

ui-link
ui-banner
ui-button
ui-card
ui-gotop
ui-icon
ui-image
ui-loading
ui-navbar
ui-panel
ui-timeline
ui-timeline-item
ui-remote-script
ui-input
ui-form
ui-form-item
ui-toast
ui-toggle-button
ui-list
ui-list-item
ui-divider
ui-animate
ui-image-text-item
ui-text-item
ui-scroll-view
ui-collapse
ui-collapse-group
ui-swiper
ui-dialog
ui-dialog-item
ui-image-list
ui-image-list-item
ui-picker
ui-picker-column
ui-stepper
ui-action-sheet
ui-steps
ui-icons-list
ui-tabbar
ui-navbar-list
ui-multip-navbar
ui-price-notice
ui-tools-bar
ui-dropdown-item
ui-overlay
ui-tab
ui-badge
ui-countdown
ui-cell
ui-tag
ui-treeselect
ui-sidebar
ui-avatar
ui-textarea
ui-more
ui-video-item
ui-video
ui-topic-group
ui-crumbs
ui-comment
ui-row
ui-col
ui-image-view
ui-startapp
ui-anchor
ui-anchor-link
ui-avatar-group
ui-number-animate
ui-radio
ui-radio-group
ui-checkbox
ui-checkbox-group
ui-swipe-card
ui-switch
ui-tabs-card
ui-pull-refresh
ui-empty
ui-lazyload
ui-icon-shuttle
ui-result
ui-progress
ui-vote
ui-button-group

this.$confirm('message', function(){console.log('enter!')}, function(){console.log('cancel!')});
this.$message('message', function(){console.log('enter!')});
this.$toast('message');

功能

this.$addModel 添加路由

使用
let that = this;
this.$addModel(Promise.resolve({
        data: {
          router: [
            {...
             component: {
                path: "http://xxx.com/xxx/xxx.js",
                name: "模块名",
             }
            }
          ]
        }
    })
).then(v=>{
    that.$router.push("/")
}).catch(v=>{})

路由对应组件

window.define("模块名",[依赖],function(Vue){组件体});
模块名和组件名应该一样。

组件体
{
    name:组件名,
    component:Vue.component(组件名, 组件参数),
    store:{
        data(){
            return {
                state:{}, 
                actions:{
                    getData(store, json){
                        return ...
                    }
                }, 
                mutations:{},
                ...
            }
        },
        mixin(){
            return {
                调用actions的方法
                getData(json){
                    return this.store.dispatch("getData", json);
                },
                ...
            }
        }
    }
}

使用
this.$组件名.getData({}).then(v=>{}).catch(v=>{})

2.this.$uic 提供了很多可能的方法，如下：

setMourn()，isPromise(obj)，isFunction(obj)，isArray(obj)，isEmpty(obj)，isTelphoneCode(obj)，isEmptyObject(obj)，
isPlainObject(obj)，dateFormate(date, "formate")，i18n()，extend({}, {})，fontSize(num)
...

参与贡献

Fork 本仓库
新建 Feat_xxx 分支
提交代码
新建 Pull Request

特技

使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
Gitee 官方博客 blog.gitee.com
你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
Gitee 官方提供的使用手册 https://gitee.com/help
Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

ereddate/vue-uiComponents

vue-uiComponents

介绍

软件架构

使用说明

扩展

组件列表

功能

参与贡献

特技