1 Star 0 Fork 0

ereddate / vue-uiComponents

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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

组件列表

  1. ui-link
  2. ui-banner
  3. ui-button
  4. ui-card
  5. ui-gotop
  6. ui-icon
  7. ui-image
  8. ui-loading
  9. ui-navbar
  10. ui-panel
  11. ui-timeline
  12. ui-timeline-item
  13. ui-remote-script
  14. ui-input
  15. ui-form
  16. ui-form-item
  17. ui-toast
  18. ui-toggle-button
  19. ui-list
  20. ui-list-item
  21. ui-divider
  22. ui-animate
  23. ui-image-text-item
  24. ui-text-item
  25. ui-scroll-view
  26. ui-collapse
  27. ui-collapse-group
  28. ui-swiper
  29. ui-dialog
  30. ui-dialog-item
  31. ui-image-list
  32. ui-image-list-item
  33. ui-picker
  34. ui-picker-column
  35. ui-stepper
  36. ui-action-sheet
  37. ui-steps
  38. ui-icons-list
  39. ui-tabbar
  40. ui-navbar-list
  41. ui-multip-navbar
  42. ui-price-notice
  43. ui-tools-bar
  44. ui-dropdown-item
  45. ui-overlay
  46. ui-tab
  47. ui-badge
  48. ui-countdown
  49. ui-cell
  50. ui-tag
  51. ui-treeselect
  52. ui-sidebar
  53. ui-avatar
  54. ui-textarea
  55. ui-more
  56. ui-video-item
  57. ui-video
  58. ui-topic-group
  59. ui-crumbs
  60. ui-comment
  61. ui-row
  62. ui-col
  63. ui-image-view
  64. ui-startapp
  65. ui-anchor
  66. ui-anchor-link
  67. ui-avatar-group
  68. ui-number-animate
  69. ui-radio
  70. ui-radio-group
  71. ui-checkbox
  72. ui-checkbox-group
  73. ui-swipe-card
  74. ui-switch
  75. ui-tabs-card
  76. ui-pull-refresh
  77. ui-empty
  78. ui-lazyload
  79. ui-icon-shuttle
  80. ui-result
  81. ui-progress
  82. ui-vote
  83. ui-button-group
this.$confirm('message', function(){console.log('enter!')}, function(){console.log('cancel!')});
this.$message('message', function(){console.log('enter!')});
this.$toast('message');

功能

  1. 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)
...

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

特技

  1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
  2. Gitee 官方博客 blog.gitee.com
  3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
  4. GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
  5. Gitee 官方提供的使用手册 https://gitee.com/help
  6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/
MIT License Copyright (c) 2021 ereddate Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于Vue的UI组件库,目前提供了近90个组件方便使用。 展开 收起
JavaScript 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/ereddate2017/vue-ui-components.git
git@gitee.com:ereddate2017/vue-ui-components.git
ereddate2017
vue-ui-components
vue-uiComponents
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891