哑巴湖大水怪的山水游记截取字符组件
1. 自动省略文本
注意点
通过自定义
data和 伪元素的attr显示展示的文本attr() : 可以将自定义属性值作用于伪元素
html<p data-foo="hello">world</p> &:before { content: attr(data-foo)}
1. 单行展示默认省略 单行展示默认省略
2. 单行带后缀省略单行带后缀省略单行带后缀省略.jpeg
3. 多行展示默认省略展示默认省略.jpeg
4. 多行展示带后缀省略多行展示带后缀省略.jpg多行展示带后缀省略多行展示带后缀省略.jpg
使用
- text: [string] 显示的文本
- showLine:[number] 展示几行
- isShowSuffix: [boolean] 是否展示后缀
- textStyle: [object] 展示文本的样式（改变字体大小就在这里修改）
js
<div style="width:80px" >
<AutoEllipsis text="1. 单行展示默认省略"/>
</div>
<AutoEllipsis style="width:100px" isShowSuffix text="2. 单行带后缀省略.jpeg"/>
<AutoEllipsis style="width:80px" :showLine="2" text="3. 多行展示默认省略展示默认省略.jpeg"/>
<AutoEllipsis style="width:90px" isShowSuffix :showLine="2" text="4. 多行展示带后缀省略多行展示带后缀省略.jpg"/>
代码地址：pages/vue3Treasures/components/autoEllipsis.vue
2. loading 效果
2.1 加载文字 loading
暂无更多数据...
正在加载中...
请稍后...
使用
- loadingText: [string] 加载文字
js
<TextLoading/> // 默认值: 暂无更多数据...
<TextLoading :loadingText="'正在加载中...'"/>
<TextLoading :loadingText="'请稍后...'"/>
2.2 转圈 loading
使用
size: 内置 4 个尺寸（ mini，small,medium,large,默认为 mini，
<Loading />自定义尺寸的话输入数字
<Loading :size="30"/>
js
<Loading />
<Loading :size="30"/>
代码地址：pages/vue3Treasures/components/loading.vue
2.3 小球碰撞 loading
代码地址：pages/vue3Treasures/components/crashBallLoading.vue
3. 图片水印
MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。
disconnect(): 关闭监听， 阻止 MutationObserver 实例继续接收的通知，直到再次调用其 observe() 方法，该观察者对象包含的回调函数都不会再被调用。
observe(): 开启监听，配置 MutationObserver 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知。
takeRecords():从 MutationObserver 的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord 对象的新 Array 中。
代码地址：pages/vue3Treasures/components/imgWatermark.vue
4. 多行文本擦除效果出现
4.1 使用css实现
- 使用两个相同的文本，第二个文本用定位的方式覆盖到上面（第二个文本嵌套一层
span元素，因为span元素是一个行内元素，它的宽度和高度是由其内容决定的。当给span元素设置背景色时，背景色会应用于span元素的内容区域，而不会自动扩展到整个行) - 使用自定义属性
@property加动画渐变实现文本擦除效果
注意点
- 判断某个css属性是否可用（无法判断
@property，因为是自定义属性，但可以判断其设置的syntax或者inherits属性）
js
// 判断某个css属性是否可用
function isCssPropertySupported(property) {
let div = document.createElement("div");
let style = getComputedStyle(div);
return property in style;
}
- 使用
css判断@property是否可用
css
@supports ( @property : --my-color ) {
/* 如果支持 @property 规则，则执行这里的样式 */
}
- 使用
js判断@property是否可用
window.CSS.registerProperty是一个用于注册自定义 CSS 属性的方法。- 通过检测
window.CSS.registerProperty是否存在，可以判断浏览器是否支持@property规则。
js
if (typeof window.CSS.registerProperty !== "undefined") {
console.log("浏览器支持 @property 规则");
} else {
console.log("浏览器不支持 @property 规则");
}