zc-ui-component
npm install zc-ui-componentbash
npm install zc-ui-component
`
使用
`js
import { createApp } from 'vue'
import App from './App.vue'
import zcUIComponent from 'zc-ui-component'
import 'zc-ui-component/dist/zc-ui-component.css'
const app = createApp(App)
app.use(zcUIComponent)
app.mount('#app')
`
按需引入
`js
import { createApp } from 'vue'
import App from './App.vue'
import { zcButton, zcInput } from 'zc-ui-component'
import 'zc-ui-component/dist/zc-ui-component.css'
const app = createApp(App)
app.component('zc-button', zcButton)
app.component('zc-input', zcInput)
app.mount('#app')
`
注册全局组件
`js
import zcUIComponent, {
zcMessage,
zcToast
} from 'zc-ui-component'
import 'zc-ui-component/dist/zc-ui-component.css'
const app = createApp(App).use(zcUIComponent)
app.config.globalProperties.$toast = zcToast
app.config.globalProperties.$message = zcMessage
app.mount('#app')
// 在组件中使用
// const { proxy } = getCurrentInstance()
// proxy.$toast('这是一个提示')
// proxy.$message('这是一个消息')
`
注册指令
`js
import zcUIComponent, {
loadingDirective,
} from 'zc-ui-component'
import 'zc-ui-component/dist/zc-ui-component.css'
const app = createApp(App).use(zcUIComponent)
app.directive('loading', loadingDirective)
app.mount('#app')
// 在组件中使用
// 加载中的内容
`
主题
`scss
:root {
--main-color: #29996c;
--main-font-color: #555987;
--main-danger-color: #f52828;
--main-warning-color: #ff8a00;
--main-warning-icon-color: #f39159;
--main-success-color: #23c987;
}
`
更新日志
- 1.6.5
- 增加select高度属性
- 修复存在tip时input的高度bug
- 修复pagination在total为0时的页码bug
- 1.6.4
- 整合组组件
- 添加radio、switch、datepicker、tree、select、treeSelect组件
- 重构scroll、tooltip、table组件
- checkbox添加半选状态，兼容tree组件
- 1.6.3
- 添加formitem组件label文字对齐属性
- 为messagebox添加可选的输入框，参数继承input，通过beforeclose: instance 返回值
- 优化部分报错
- 1.6.1
- 对table-body高度调整进行优化
- 1.6.0
- 覆写zc-input单词模式的粘贴功能
- 1.5.16
- 全局loading可正确被卸载
- 1.5.15
- 单词计数逻辑修改
- 1.5.14
- 添加 Skeleton 骨架屏组件和 SkeletonItem 骨架元素组件
- 1.5.13
- 字体继承
- 1.5.8
- 修改loading加载方式
- 调整button配置，添加type
- 修复宽度充足时table列宽分配错误的问题
- 添加image组件
- 1.5.7
- 处理Unable to preventDefault`错误