vue2组件封装实战系列之aside组件

组件之 GfSide

侧边栏组件一般有固定宽度用于导航菜单,布局

效果预览

属性

参数 类型 说明 可选值 默认值
width String 侧边栏的宽度 30%

代码实现

这里我们使用了 function 组件来实现 space 组件,比较简洁灵活

js 复制代码
<template>
  <aside class="el-aside" :style="{width}" v-bind="$attrs">
    <slot></slot>
  </aside>
</template>

<script>
export default {
  name: "GfAside",
  componentName: "GfAside",
  props: {
    width: {
      type: String,
      default: "300px",
    },
  },
};
</script>

样式文件可以参考elementui的实现,后面会写一篇文章详细分析组件库的样式怎么去写的文章,敬请关注

使用

html 复制代码
<gf-aside :width="!isCollapse ? '210px' : '50px'">
  <SiderBar
    class="sidebar-container"
    :style="{ width: !isCollapse ? '210px' : '50px' }"
  />
</gf-aside>

可以根据自己的需要,对组件进行扩展,封装负责自己业务的组件也可以

这样,我们就实现了自己的 side 组件

相关推荐
lightgis7 分钟前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络18 分钟前
Vue3 原生移动应用开发来了
前端·javascript·css
GISer_Jing21 分钟前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
我爱学习_zwj42 分钟前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花43 分钟前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
摆烂工程师1 小时前
什么是 ChatGPT Business 会员?与 ChatGPT Plus 有什么不同?
前端·后端·程序员
闲不住的李先森1 小时前
使用Context7:告别AI“幻觉”,让编程助手永远生成最新、可用的代码
前端·ai编程·cursor
西瓜树枝1 小时前
解决 JS 大整数精度丢失?一文读懂 BigInt 的底层逻辑与实战规则
前端·javascript
刺客_Andy1 小时前
React 第四十六节 Router中useInRouterContext的使用详细介绍及注意事项
前端·javascript·react.js
刺客_Andy1 小时前
React 第四十四节Router中 usefetcher的使用详解及注意事项
前端·javascript·react.js