仿照element写的一些简易组件 简单易懂 新手上路

已于 2022-08-08 19:21:50 修改
阅读量284 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-08-05 20:20:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dsjcool/article/details/126184803
版权

1.首先要将组件挂载到全局

（1）comps.ts

(2) index.ts

(3) main.ts

 2.button 内置了几个默认样式 通过添加iconImg属性设置头部icon 原生的disabled属性 自定义disabled时的鼠标样式

1.DDutton.vue

<template>
  <button
    :disabled="disabled"
    :class="[disabled?'disabled':'']"
    class="d-button"

    :style="[style[type]]"
    @mouseleave="mouseOut($event)"
    @mouseenter="mouseIn($event)">
    <span v-if="iconImg" class="pre">
      <img :src="iconImg" alt="">
    </span>
    <span>  <slot /></span>
  </button>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { mouseEnter, mouseLeave, style } from './index'
const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  iconImg: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const mouseIn = (e:any) => {
  mouseEnter(e, props.type)
}
const mouseOut = (e:any) => {
  mouseLeave(e, props.type)
}
</script>

<style scoped lang="scss">
.d-button {
  border: 1px solid rgb(193, 193, 193);
  border-radius: 10px;
  margin: 0 5px ;
  padding: 5px 10px;
  color: #000;
  cursor: pointer;
  letter-spacing: 2px;
  display:  inline-flex;
  align-items: center;

  .pre {
    width: 20px;
    height: 20px;
    overflow: hidden;
     margin-right: 5px;
    img {
      height: 100%;
      border-radius: 50%;
      width: 100%;

    }
  }

}
.disabled {
  // 此处建议用icon且大小小于等于32*32
  cursor: url('../../../public/favicon.ico'),default !important;
  background-color: rgba(0,0,0,.1) !important;
  color: rgb(181, 181, 181) !important;
}
</style>

2.index.ts

const style:any = {
  default: {
    hoverBgc: 'blue',
    hoverColor: '#fff',
    backgroundColor: 'rgb(239, 238, 238)',
    color: '#000'
  },
  success: {
    hoverBgc: '#ccc',
    hoverColor: '#fff',
    backgroundColor: 'blue',
    color: '#ffff'
  },
  danger: {
    hoverBgc: 'blue',
    hoverColor: '#fff',
    backgroundColor: 'red',
    color: '#ffff'
  },
  warn: {
    hoverBgc: 'blue',
    hoverColor: '#fff',
    backgroundColor: 'orange',
    color: '#ffff'
  }
}

const mouseEnter = (e:any, type:string) => {
  e.target.style.background = style[type].hoverBgc
  e.target.style.color = style[type].hoverColor
}
const mouseLeave = (e:any, type:string) => {
  e.target.style.background = style[type].backgroundColor
  e.target.style.color = style[type].color
}
export {
  style,
  mouseEnter,
  mouseLeave
}

2.message 属性：message、icon、type、closable、animation

1.message.vue

<template>
  <div class="d-message" :class="animations[animation]" :style="style[type]">
    <div class="content">
      <img v-if="type!=='default'&&!icon" :src="style[type].icon">
      <img v-else-if="icon" :src="icon">
      <a>{{ message }}</a>
      <i v-show="closable" @click="close">x</i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { close } from './index'
import { animations } from '@/utils/animations'
defineProps({
  type: {
    type: String,
    default: 'default'
  },
  message: {
    type: String,
    default: 'default'
  },
  icon: {
    type: String,
    default: ''
  },
  closable: {
    type: Boolean,
    default: false
  },
  animation: {
    type: String,
    default: ''
  }
})
const style:any = {
  default: {
    icon: require('@/assets/icons/default.png')
  },
  succuss: {
    icon: require('@/assets/icons/success.png'),
    backgroundColor: 'yellow',
    color: '#ccc'
  },
  warn: {
    icon: require('@/assets/icons/warn.png'),
    backgroundColor: 'orange',
    color: '#fff'
  },
  danger: {
    icon: require('@/assets/icons/danger.png'),
    backgroundColor: 'red',
    color: '#fff'
  }
}
</script>

<style scoped lang="scss">
@import url('@/assets/css/animation.css');
.d-message {
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 50px;
  width: 200px;
  margin-left: -100px;
  padding: 7px 25px;
  display: flex;
  justify-content: center;
  border-radius: 15px;
  color: rgb(111, 111, 111);
  border: 1px solid #ccc;
  box-shadow: 2px 2px 3px rgba(0,0,0,.3);
  background-color: rgb(207, 205, 205);

  .content {
    display: flex;
    align-items: center;
    img {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      margin-right: 5px;
    }
    i {
      position: absolute;
      right: 10px;

      cursor: pointer;
    }
    i:hover {
      color: #000;
    }
  }

}
</style>

2.index.ts 通过vue的render和createVnode进行渲染

import { createVNode, render } from 'vue'
import Message from './message.vue'
interface DMessageConfig {
  message?:string
  type?:string
  icon?:string
  closable?:Boolean
  animation?:string
}

const div = document.createElement('div')
document.body.appendChild(div)
let timer:any = null
export default ({ message, type, icon, closable, animation }:DMessageConfig) => {
  // 调用创建虚拟节点方法
  // 第一个参数为要创建的虚拟节点即编写好的vue组件
  // 第二个参数为props的参数
  const vnode = createVNode(Message, { message, type, icon, closable, animation })
  render(vnode, div)

  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 2000)
}
export function close() {
  timer && clearTimeout(timer)
  render(null, div)
}

3.使用

 message({ type: 'warn', message: '警告 警告！！！', closable: true, animation: 'translate' })

3.dialog 属性：v-model控制显示隐藏 width设置dialog宽度支持px和百分比 animation

DDialog.vue

<template>
  <div v-show="modelValue" :class="animations[animation]" class="d-dialog">
    <div class="content" :style="{'width': width}">
      <div class="dialog-title">
        <h2>
          {{ title }}
        </h2>
        <i @click="close">x</i>
      </div>
      <div class="dialog-content">
        <slot />
      </div>
      <div class="dialog-footer">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { animations } from '@/utils/animations'
defineProps({
  title: {
    type: String,
    default: ''
  },
  // modelValue接收父组件v-model的值 modelValue是默认的
  // 若父组件是v-model:title这种新式 props中的title就被双向绑定
  modelValue: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: ''
  },
  animation: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:modelValue'])
const close = () => {
  // 通过update:modelValue进行更新 也是默认
  // 若v-model:title 使用update:title
  emits('update:modelValue', false)
}
</script>

<style scoped lang="scss">
@import url('@/assets/css/animation.css');
.d-dialog {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    .content {
      width: 40%;
      padding: 10px;
      background-color: #fff;
      transform: translateX(-50%);
      position: absolute;
      left: 50%;
      top: 20%;
      .dialog-title{
        display: flex;
        justify-content:space-between;
        align-items: center;
        i {
          font-size: 25px;
          cursor: pointer;
        }
        i:hover {
          color: #ccc;
        }
      }
      .dialog-content {
       margin-bottom: 10px;
      }
      .dialog-footer {
        margin: 10px 0;
      }

  }
}

</style>

4.全局动画

animation.css 可自定义添加

.Scale {
  animation: dScaleShow 0.28s ease-in;
 }
@keyframes dScaleShow {
  0% {
   transform: scale(0);
   opacity: 0 !important;
  }

  50% {
   transform: scale(0.5);
   opacity: 0.5 !important;
  }

  100% {
   transform: scale(1);
   opacity: 1 !important;
  }
}
.Translate {
  animation: dTranslateShow 0.28s ease-in;
  -webkit-animation: dTranslateShow 0.28s ease-in;
}
@keyframes dTranslateShow {
  0% {
   transform: translateY(-100px);
   opacity: 0 !important;
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   -o-transform: translateY(-100px);
}

  50% {
   transform: translateY(-50px);
   opacity: 0.5 !important;
   -webkit-transform: translateY(-50px);
   -moz-transform: translateY(-50px);
   -ms-transform: translateY(-50px);
   -o-transform: translateY(-50px);
}

  100% {
   transform: translateY(0);
   opacity: 1 !important;
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
}
}
.Rotate {
  animation: dRotateShow 0.28s ease-in;
  -webkit-animation: dRotateShow 0.58s ease-in;
}
@keyframes dRotateShow {
  0% {
   transform: Rotate(120deg);
   opacity: 0 !important;
   -webkit-transform: Rotate(120deg);
   -moz-transform: Rotate(120deg);
   -ms-transform: Rotate(120deg);
   -o-transform: Rotate(120deg);
}

  50% {
   transform: Rotate(240deg);
   opacity: 0.5 !important;
   -webkit-transform: Rotate(240deg);
   -moz-transform: Rotate(240deg);
   -ms-transform: Rotate(240deg);
   -o-transform: Rotate(240deg);
}

  100% {
   transform: Rotate(360deg);
   opacity: 1 !important;
   -webkit-transform: Rotate(360deg);
   -moz-transform: Rotate(360deg);
   -ms-transform: Rotate(360deg);
   -o-transform: Rotate(360deg);
}
}

animations.ts

interface IAnimation {
  scale:string
  // 这样声明使用 transform[key] 形式时不会报错
  [translate: string]: string
  rotate:string
}
export const animations:IAnimation = {
  scale: 'Scale',
  translate: 'Translate',
  rotate: 'Rotate'
}

使用 直接进行绑定 传递的animation需要是在animations中定义的类型 否者无动画效果

5.input

DInput.vue 推荐使用ref代替docment.getxxxxxxx

<template>
  <div class="d-input">
    <div class="label">
      {{ label }}
    </div>
    <div class="content">
      <span v-if="icon" :class="{}">
        <img src="@/assets/icons/default.png" alt="">
      </span>
      <input ref="inputDom" :style="[style.size[size],{'minWidth': modelValue.length*7.5+'px'},{'paddingLeft': icon===''? '10px':'30px'}]" :type="type" :placeholder="placeholder" @blur="inputBlur" @focus="inputFocus" @keyup="inputChange">
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, onMounted, ref } from 'vue'
import { style } from './index'
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  size: {
    type: String,
    default: 'large'
  },
  type: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:modelValue'])
const inputDom = ref()
onMounted(() => {
  inputDom.value.value = props.modelValue
})
const inputChange = () => {
  emits('update:modelValue', inputDom.value.value)
}
const inputFocus = () => {
  inputDom.value.style.border = '1.5px solid rgb(27, 113, 241)'
}
const inputBlur = () => {
  inputDom.value.style.border = '1.5px solid rgb(152, 152, 152)'
}
</script>

<style scoped lang="scss">
.d-input {
  display: flex;
  margin: 10px 0;
  align-items: center;

  .content {
    display: flex;
    align-items: center;
    position: relative;
    img {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
     input {
      border-radius: 10px;
       padding: 5px;
       margin-left: 5px;
      outline: none;
      border: 1.5px solid rgb(152, 152, 152);

  }
  }
}
</style>

index.ts

const style:any = {

  size: {

    small: {

      padding: '2px'

    },

    large: {

      padding: '10px'

    },

    normal: {

      padding: '5px'

    }

  }

}

export {

  style

}

dsjcool
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
仿写element表单组件
记录点滴
03-01 331
最终效果： <!--引入表单组件--> <template> <div> <lv-form> <lv-form-item label="输入框" prop="inp"> <lv-input v-model="row.inp"></lv-input> ...
在中PHP安装elementui,使用vue及element组件的安装教程（详细教程）
weixin_29046035的博客
03-11 617
下面我就为大家分享一篇vue的安装及element组件的安装，具有很好的参考价值，希望对大家有所帮助。一、新建vue项目1、首先需要下载nodejs，安装后打开命令窗口可以使用npm包管理工具npm集成在node中的，所以直接输入npm-v查看npm的版本信息2、npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。3、在命令...
仿写elementUI的按钮组件
weixin_43837268的博客
03-21 330
1.button.vue <style lang="scss" scoped> .defalut{ display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; ...
【封装UI组件库】手把手教你仿一下Element-ui的Button组件（发布至npm）
double_sweet1的博客
05-29 2338
所谓UI组件库，就是封装了平常项目开发中经常会使用的页面组件，发布至npm库中作为插件供项目组成员及其他开发者使用（不发布也行），目的就是为了避免多次重复劳动。 以插件的形式使用可以做到即插即用，非常方便。 市面上热门的UI组件库有Element-ui（与Vue框架配合使用）、Ant Design（与React框架配合使用）等等… 本文主要通过讲解Element-ui封装一个组件的思路，来带领大家自己上手实践一下如何封装自定义组件。最后也会讲述如何把成品发布至npm云端库来呈现我们的测试插件。 先上一张效果
教你制作自己vue的组件库（仿ElementUI）
一纸奇文的博客
06-06 1941
1.首先自己创建个新的vue项目，之后更改下目录形式，将src文件更改为examples，这里是专门放组件展示的md文件，packages文件里是放自己写的组件代码。Icon组件的字体图标可以从字体图标库自己选择下载，放到fonts文件中，之后在icon.scss中引用，这个就不细说了。2.然后是开始配置vue.config.js文件 ，其中md-loader是读取md文件的相关配置。3.配置好了之后，就可以开始写组件了，这里就举个简单的例子，Icon的组件。之后就可以使用组件了。
仿照Element-ui实现一个简易的$message方法
10-14
为了更好地理解和自定义这个功能，我们可以尝试仿照 Element-ui 实现一个简易的 `$message` 方法。以下是如何实现这个功能的详细步骤： 1. **思路梳理** - 观察 Element-ui 的 `$message` 效果，通常消息提示可以...
swift-PGGFast仿照快手高仿快手架构布局简单易懂
08-14
4. **简单易懂**：项目强调其易于理解和实现，意味着它可能有良好的注释和文档，以及清晰的代码结构，便于初学者和有经验的开发者上手。 5. **布局设计**：由于标签提到"Swift开发-布局"，可以推断PGG_Fast框架着重...
仿照钉钉打卡时间组件筛选
10-12
本项目旨在仿照钉钉应用中的打卡时间组件，实现年、周、日的选择功能，这对于日程管理、考勤系统等应用场景非常实用。下面将详细解析这个项目的知识点和实现细节。 首先，`week.vue`、`month.vue`和`day.vue`这三个...
前端仿 element UI 实现表格组件
06-13
总的来说，仿照 Element UI 实现前端表格组件，需要熟悉 Vue.js 的基本语法、响应式原理以及组件化思想。同时，良好的 CSS 技能也是必不可少的，因为样式决定了组件的视觉效果。通过这个过程，你不仅可以掌握一项...
字节跳动开源 Arco Design
Yvette Lau的专栏
10-28 1万+
ArcoDesign 简介ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统。在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，我们开源了...
Vue中引入路径（图片、iframe）的几种方式
yiyueqinghui的博客
12-17 3879
1、在template的img中直接引入相对路径 <img src="../../static/img/car.png" /> 这种引入会被webpack处理（有些处理为base64，有些给图片加hash修改图片名字），总之不需要担心打包后的图片路径问题 2、使用v-bind绑定src路径，不会被webpack处理，因此需要使用require手动引入 <img :src="require('../static/img/03.jpg')" alt=""> <img :src=
Element-ui最常用组件排行榜非官方统计
m0_37686209的博客
06-13 1678
element-ui中常用组件 组件使用说明官方文档链接 https://element.eleme.cn/#/zh-CN/component/button
Vue开发者必备！手把手教你实现类似Element Plus的全局提示组件！
最新发布
CRMEB小程序商城的博客
01-02 568
虽然这个组件的实现原理很简单，但是它在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果，使得弹框在显示和隐藏时都能给用户带来良好的视觉体验。点此下载。
前端常用组件库
qq_57436326的博客
04-07 253
一个一致性、模块化、高性能的 JavaScript 实用工具库。基于ECharts的图表模板，有别人上传的。解析、验证、操作和显示日期和时间。Vue 大屏数据展示组件库。免费下载3D模型，有些收费。各种原生css动画插件等。现成的跨浏览器动画库。
Vue render函数
嘿嘿
06-23 317
前几天想学学Vue中怎么编写可复用的组件，提到要对Vue的render函数有所了解。可仔细一想，对于Vue的render函数自己只是看了官方的一些介绍，并未深入一点去了解这方面的知识。为了更好的学习后续的知识，又折回来了解Vue中的render函数，这一切主要都是为了后续能更好的学习Vue的知识。 回忆Vue的一些基本概念 今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识，我们有必要重温一下Vue中的一些基本概念。那么先上一张图，这张图从宏观上
react native 图片加载常见问题（{require('image!icon')} ）
小学生的博客
08-28 4008
运行别人项目时，常出现图片加载问题。     前段时间运行项目时发现：   {require('image!ic_play')} style={styles.arrow}/>    这种写法已过时，需要使用：   {{uri:'ic_play'}} style={styles.arrow}/>
vue Render函数进阶
热门推荐
wngzhem的博客
01-10 3万+
vue Render函数进阶
仿elementui Cascader级联器组件编写
qq_38152997的博客
10-15 693
因公司开发需要自己类似element UI 级联器类似得组件 刚好没有封装过 只能自己动手啦
仿Element-ui从0到1实现组件库01-环境搭建
qq_38206576的博客
05-04 559
环境搭建
仿照element ui写
08-12
回答: 您提供的引用内容是关于仿照Element-ui实现一个简易的$message方法的文章和相关代码。根据引用，这篇文章介绍了如何实现一个类似Element-ui的$message方法。根据引用，提供了一个与Element-ui的$message方法类似的模板代码，其中使用了一些样式和动画效果。根据引用，这些样式定义了消息框的外观，包括高度、位置、背景颜色等。根据您的问题，您想知道如何仿照Element-ui写一个类似的方法，但是您没有提供足够的上下文信息。如果您能提供更具体的问题或需求，我将很乐意为您提供帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [element tree不刷新视图_仿照Element-ui实现一个简易的$message方法](https://blog.csdn.net/weixin_39636245/article/details/109905814)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值