![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
SonderJie
我很懒,不想写简介
展开
-
ElementPlus Dropdown下拉菜单 右侧箭头动态切换
直接套用elementplus的效果是这样的想要实现的效果是在点击时同时右边的小箭头也会旋转 且不要太生硬1)通过控制点击事件旋转恢复这个组件本身封装的时候是点击空白处 下拉框也会收起来所以单纯的控制点击事件特别麻烦 首先排除了×2)后来发现可以通过官网给的visible-change 这样就可以当下拉框出现时 旋转 下拉框隐藏时 恢复这种方式的确可以实现 但是他有一个延迟时间 观感很不好 当下拉框完全出现时才会旋转很明显这不是我们想要的最好效果3)在点击下拉框的同时 发现类名都是一样的 唯一的区别是ar原创 2022-06-10 10:57:31 · 4700 阅读 · 1 评论 -
vue3 点击空白处关闭弹框
写一个控制弹框出现的方法 用popoverFlag变量控制 const popoverFlag= ref(false) const popoverShow = () => { chartState.getData(0) popoverFlag.value = true }html在弹框和按钮处加一个@click.stop就相当于点击除了弹框和按钮的地方其他的地方都会关闭弹框 <div :class="['btn', .原创 2022-05-20 15:46:16 · 3953 阅读 · 4 评论 -
css 文字超出两行用省略号显示
<div class="list-item-case"> <p :title="i.case">{{ i.case }}</p> </div>css: .list-item-case { font-size: 14px; background: #f9f9f9; line-height: 24px; color: #666; padding: 5px 2..原创 2022-05-13 14:44:34 · 1591 阅读 · 0 评论 -
vue3 页面回到顶部(滚动效果)
要求:1.回到顶部按钮 动态出现 当往下滚动时出现 回到顶部时自动消失 2.动画过渡 不要太生硬 3.点击回到顶部后 滚回顶部 不可以一下子转到顶部实现效果:代码实现: html:<li :class="backTopFlag ? 'active' : 'inactive'" @click="backTop"> <i class="icon5"></i> <...原创 2022-04-12 15:55:25 · 6662 阅读 · 4 评论 -
CSS 文字两端对齐
<span class="name">时效性</span>注意一定要在span里面加一个after伪类把他撑起来 亲测有效<style> .name{ width: 70px; text-align: justify; display: inline-block; word-break: break-all; height: 21px; line-heig..原创 2022-04-08 11:34:10 · 245 阅读 · 0 评论