element plus一些小问题总结

第一个是Notification 通知组件，这个组件一开始按照官网的案例进行引入和使用，但是没有预想的结果去显示,官网示例如下:

<script lang="ts" setup>
import { ElNotification } from 'element-plus'
const open1 = () => {
  ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
}
</script>

引入之后，页面的结构都没有发生变化，后来经过思否上一篇文章，让我发现了一个问题，应该是没有正确引入组件的关系，再次查看官网的安装步骤，发现了端倪，需要这样才能完整引入

npm i unplugin-element-plus -D

首先运行这个命令安装插件，如果你使用的是v3+ts，在vite.config.ts文件里插入这些

import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}

然后再按照官网案例引入就行了

第二个就是Carousel 走马灯组件

这个自带两个左右箭头进行切换，但是有时候我们想使用自定义的icon图标该怎么使用呢？

官网定义了两个方法，分别是prev和next，一个是切换上一张，一个是切换下一张，我们用这两个方法，我们给左箭头添加点击事件prev 右箭头next 然后开始我们的自定义切换

示例代码如下

import {ref} from "vue"
const banner=ref()

function prev(){
    banner.value.prev()
}

function next(){
    banner.value.next()
}

这样就可以自定义切换图标了

题外话：如何消除滚动条带来的影响？

我们可以设置

margin-right: calc(100% - 100vw);

100vw是浏览器的宽度，连带着滚动条的宽度，100%是可用宽度，不含滚动条宽度，当页面没有滚动条就是margin-right:0,有滚动条就是margin-right：-17px，内容向右延伸了17px(滚动条的宽度)

但是这样原本的样式就可能发生变化，可以使用：root，具体实现如下


:root {
  overflow-y: auto;
  overflow-x: hidden;
}
 
:root body {
  position: absolute;
}
 
body {
  width: 100vw;
  overflow: hidden;

element plus一些小问题总结

猜你喜欢