随笔分类 -  自制公共组件

模仿elmentUI组件，根据需求改造
vue+nuxtJs+monaco制作Monaco Editor编辑器
摘要：(目录) 前言 使用版本较低 一、版本 二、使用前配置 nuxt.config.js 实现下方五种语言的自动补全 三、使用 <template> <div class="warp"> <div ref="container" class="monaco"></div> </div> </templa 阅读全文
posted @ 2022-12-29 14:19 暗鸦08 阅读(771) 评论(1) 推荐(0)
自用vue+nuxtJs+vue-monaco制作Monaco Editor编辑器
摘要：(目录) 前言 有小bug；后续写个不用vue-monaco 一、版本 二、使用前配置 按插件作者说明下载 1.插件注册文件 2.nuxt.config.js 实现下方四种语言的自动补全 三、使用 <template> <div class="warp"> <monaco-editor ref="m 阅读全文
posted @ 2022-12-28 17:17 暗鸦08 阅读(604) 评论(0) 推荐(0)
自制消息提示组件
摘要：(目录) 一. VUE文件 主要是通过v-if来增加主键的功能 <template> <div class="zoehis_zoeMessage" ref="dialog" :class="['customClass',closed ? 'zoehis_zoeMessage_close_animat 阅读全文
posted @ 2022-01-25 17:03 暗鸦08 阅读(77) 评论(0) 推荐(0)
自制弹出框组件
摘要：(目录) 一. VUE 没有使用vue-popover插件，因为功能不需要太多，只需要上下左右弹出 ww 视口宽 elm.offsetLeft 这div的左侧偏移量，不算margin；(也没margin) elm.clientWidth 这div的宽，不包括border和margin；是用按钮撑开宽 阅读全文
posted @ 2022-01-25 17:01 暗鸦08 阅读(77) 评论(0) 推荐(0)
自制回到顶部组件
摘要：(目录) 注意全局回到顶部可能 target 为 window 一. VUE <template> <div> <div v-if="top" @click.stop="topClick" :style="{ 'right': styleRight, 'bottom': moveBottom, 'p 阅读全文
posted @ 2022-01-24 17:36 暗鸦08 阅读(65) 评论(0) 推荐(0)
自制空组件
摘要：(目录) 需求 为开发一个空状态通用组件，需要将所有内容水平垂直居中，还需要横向纵向排列，故选择flex布局。 组件内容分为三部分，图片、文字、其他（插槽） 默认状态，组件排列方式为纵向，图片307*145，所有内容水平垂直居中。 容器宽高任一小于330px，假设宽大于高组件排列方式变为横向，图片大 阅读全文
posted @ 2022-01-24 17:30 暗鸦08 阅读(88) 评论(0) 推荐(0)
自制标签组件
摘要：(目录) 一. VUE 因为组件内容少，所以直接使用渲染。 特例需求：theme 为 default 时，背景颜色为字体颜色的0.15透明度 工具类：hexadecimalToRGBA 判断颜色是否为十六进制,转为rgba模式 <script> // 判断颜色是否为十六进制,转为rgba模式 imp 阅读全文
posted @ 2022-01-24 17:26 暗鸦08 阅读(45) 评论(0) 推荐(0)