代码拉取完成,页面将自动刷新
基于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
this.$confirm('message', function(){console.log('enter!')}, function(){console.log('cancel!')});
this.$message('message', function(){console.log('enter!')});
this.$toast('message');
使用
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)
...
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。