zoukankan      html  css  js  c++  java
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (三) Button示例组件设计

    (三) button组件开发

    目录结构:

    button组件相关代码文件的层次结构划分

    image.png
    image.png

    考虑按需导入的使用方法

    按需导入时,项目中需要安装babel-plugin-import插件

    // Button在项目中按需引入的方式
    import {GjfButton} from 'xingorg1-ui';
    app.use(GjfButton)

    基于此,来封装我们的代码

    Button组件开发

    入口index.js文件

    import GjfButton from './src/button.vue' // 导入组件
    import '../../styles/button.scss' // 按需导入单个组件的样式

    GjfButton.install = app => {// 组件install属性
      app.component(GjfButton.name, GjfButton) // 定义组件-vue3的写法
    }

    export default GjfButton // 默认导出

    Button.vue文件

    重点关键代码如下

    <template>
      <div class="gjf-button">
        <!-- 类名设置统一为“gjf-”的前缀 -->
        <button>按钮</button>
      </div>

    </template>

    <script>
    export default {
      name: 'GjfButton' /
    / 重点是name命名,用于注册组件时使用name属性,也用于使用组件时标签名带有“gjf-”的前缀,如<gjf-button>
    }
    </
    script>

    组件功能代码

    待定,这里先放一个button按钮占位

    Button.scss文件

    需要搭配后边的全局样式使用

  • 相关阅读:
    Spring +quartz获取ApplicationContext上下文
    开源 java CMS
    js实现页面跳转的几种方式
    hdu-4089-Activation-概率dp
    linux 内核定时器
    linux 短延时
    linux 基于 jiffy 的超时
    linux 让出处理器
    linux 延后执行
    linux获知当前时间
  • 原文地址:https://www.cnblogs.com/padding1015/p/13991977.html
Copyright © 2011-2022 走看看