rollup开发vue组件多层嵌套如何传递数据时,用到链式?报错

来源：蜘蛛抓取(WebSpider) 时间：2023-11-27 04:30 标签： vue组件多层嵌套如何传递数据
章节目录 Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别Rollup(2): Rollup-plugin-commonjs 和 Rollup-plugin-node-resolve 的应用Rollup(3): Rollup-plugin-vue 编写我们第一个组件并发布使用编写我们的 KButton 组件 编写我们的 Button 组件 src => package => common => var.scss 主要存放我们全局 scss 新建 src => package => common => var.scss $--color-primary: #409EFF !default; $--color-success: #67C23A !default; $--color-warning: #E6A23C !default; $--color-danger: #F56C6C !default; $--color-info: #909399 !default; $--color-disabled-primary: #a0cfff !default; $--color-disabled-success: #b3e19d !default; $--color-disabled-warning: #f3d19e !default; $--color-disabled-danger: #fab6b6 !default; $--color-disabled-info: #c8c9cc !default; 新建 src => package => components => button => src => KButton.vue 主要参数分别是: 是否警用 , 是否加载中 新建 src => package => components => button => index.js // index.js import KButton from './src/KButton.vue'; KButton.install = function (Vue) { Vue.component(KButton.name, KButton); }; export default KButton; 新建 src => package => theme-chalk => k-button.scss .k-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; text-align: center; box-sizing: border-box; outline: 0; margin: 0; transition: 0.1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; &.is-disabled { color: #c0c4cc; cursor: not-allowed; background-image: none; background-color: #fff; border-color: #ebeef5; } &.is-round { border-radius: 20px; } &.is-circle { border-radius: 50%; padding: 12px; } &.is-loading { position: relative; pointer-events: none; } } .k-button--primary { color: #fff; background-color: $--color-primary; border-color: $--color-primary; &:hover, &:focus, &.is-disabled { color: #fff; background-color: #a0cfff; border-color: #a0cfff; } } .k-button--danger { color: #fff; background-color: $--color-danger; border-color: $--color-danger; &:hover, &:focus, &.is-disabled { color: #fff; background-color: $--color-disabled-danger; border-color: $--color-disabled-danger; } } .k-button--success { color: #fff; background-color: $--color-success; border-color: $--color-success; &:hover, &:focus, &.is-disabled { color: #fff; background-color: $--color-disabled-success; border-color: $--color-disabled-success; } } .k-button--warning { color: #fff; background-color: $--color-warning; border-color: $--color-warning; &:hover, &:focus, &.is-disabled { color: #fff; background-color: $--color-disabled-warning; border-color: $--color-disabled-warning; } } .k-button--info { color: #fff; background-color: $--color-info; border-color: $--color-info; &:hover, &:focus, &.is-disabled { color: #fff; background-color: $--color-disabled-info; border-color: $--color-disabled-info; } } 修改 src => package => theme-chalk => k-icon.scss @font-face { font-family: "element-icons"; src: url("../fonts/element-icons.woff") format("woff"), url("../fonts/element-icons.ttf") format("truetype"); font-weight: normal; font-style: normal; } [class^="k-icon-"]{ font-family: 'element-icons' !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; } .k-icon-success:before { content: "\e79c"; } // 加入loading图标 .k-icon-loading:before{ content: "\e6cf"; } .k-icon-loading { animation: rotating 2s linear infinite; } @keyframes rotating { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } 修改 src => package => theme-chalk => index.scss @import '../common/var.scss'; @import './k-icon.scss'; @import './k-button.scss'; 最后修改 src => package => index.js import './package/theme-chalk/index.scss'; import KIcon from './package/components/icon/index'; import KButton from './package/components/button'; function install(Vue) { Vue.component(KIcon.name, KIcon); Vue.component(KButton.name, KButton); } export { KIcon, KButton }; export default { install, }; 测试 测试代码 运行 npm run build 修改 dist => index.html
我是按钮

普通

我是成功按钮 我是警告按钮 我是提示按钮 我是危险按钮

禁用

我是成功按钮 我是警告按钮 我是提示按钮 我是危险按钮

loading

加载中
发布到 npm 后，然后我们通过 vue 引用后也能得到相关的结果详情可以见上一章 Rollup(3): Rollup-plugin-vue 编写我们第一个组件并发布使用Github 地址rollup-vue

我要回帖

更多关于 vue组件多层嵌套如何传递数据 的文章

 

随机推荐