Web Components 之排版系列

醒目块mark-block

看到这个组件名字时候我都忍不住吐槽，虽然这个名字是我取得……起名的时候我犯难了😣😣😣。看到下面的运行效果大家就应该知道这是什么东东了，该叫什么呢！看了网上好多类似效果的都是使用的 blockquote,但是我觉得在这个基础上加个前缀、后缀什么的并不合适，最后想了半天，这其实是一个块元素并且很明显、醒目，所以就有了这个名字……

运行效果

醒目块之提示，这里可以放置一些提示性的内容。这个是默认情况

    
醒目块之提示，这里可以放置一些提示性的内容。这个是默认情况

        

醒目块之信息，这里可以放置一些信息性的内容。

    
醒目块之信息，这里可以放置一些信息性的内容。

        

醒目块之注意，这里可以放置一些注意性的内容。

    
醒目块之注意，这里可以放置一些注意性的内容。

        

醒目块之错误，这里可以放置一些错误性的内容。

    
醒目块之错误，这里可以放置一些错误性的内容。

        

属性

参数	说明	默认值
type	醒目块的类型	支持的类型： default | info | warning | error，默认为：default
explain	醒目块的标题	你想要设置的都可以，无默认值
side-color	醒目块的左侧颜色	你想要设置的都可以，系统边框默认值
bg-color	醒目块的背景颜色	你想要设置的都可以，默认为：#f9f9f9
说明：设置了支持的type之后，explain和 side-color会有对应的值；如果同时设置，以具体的属性值为准。 2021-10-10 更新：已经支持通过代码方式设置属性的值。例如：dom.setAttribute("explain", "xxx");

返回顶部back-to-top

这个组件就不用过多的介绍了，功能比较常见，在N多网站中都有这个功能。这里自己实现了一下，支持在整个页面或者某一个滚动容器中使用。

运行效果

属性

参数	说明	默认值
scroll-selector	选择器	document.querySelector支持的选择器
说明：该属性可以不设置，此时监听window滚动事件；设置时（如果找不到会报错）监听对应元素的滚动事件。

单滑块进度条single-slider

这是我写的第一个Web Component，当时是为了音乐播放器的进度条，当然也用在了我的音乐播放器项目中（🎵 Music Online Angularjs）。

运行效果

var singleSliderDemo1Dom = document.getElementById("singleSliderDemo1");
singleSliderDemo1Dom.addEventListener("input", (inputEvent) => {
    document.getElementById("singleSliderDemo1_preSingleSliderValueByInput").innerHTML = JSON
        .stringify(inputEvent
            .target
            .value, null, 1);
});
singleSliderDemo1Dom.addEventListener("change", (customEvent) => {
    document.getElementById("singleSliderDemo1_preSingleSliderValueByChange").innerHTML = JSON
        .stringify(customEvent
            .detail.value, null, 1);
});

function singleSliderDemo1_inputOnChangeEvent(input) {
    if (input.name) {
        singleSliderDemo1Dom.setAttribute(input.name, input.value);
    }
}

function singleSliderDemo1_inputRangeOnChangeEvent(range) {
    var sliderValue = singleSliderDemo1Dom.value;
    sliderValue[range.name] = range.value;
    singleSliderDemo1Dom.value = sliderValue;
}
        

使用说明

滑道设置

背景颜色：     划过颜色：     加载颜色：

轨道高度：

滑块设置

颜色：

大小：

圆角：

设置滑块的某些值

进度值：     加载值：

你也可以监听值的变化

input监听：

change监听：

属性

参数	说明	默认值
slider-color	滑道颜色	这个比较好理解
slid-color	滑过颜色	进度颜色（例如：播放进度）
load-color	加载颜色	加载颜色（例如：加载进度），按需使用
slider-height	滑道高度	这个也比较好理解
dot-color	滑块颜色	设置滑块颜色
dot-size	滑块大小	设置滑块大小
dot-radius	滑块圆角	设置滑块圆角
你可以监听值的改变，支持input和change,你还可以设置滑过和加载的值……

刻度表（腕表）scale-clock

这组件的起因是Material Design的FAB，点击辐射出一些二级菜单……之后便想到了圆形，钟表等（对应的实现github中有示例代码）。之前都是样式实现的，现在想着是想一个JS版本的，便做成了组件，方便做一些定制。

运行效果

let scaleClockDemo2Dom = document.getElementById("scaleClockDemo2");
scaleClockDemo2Dom.updateClockOption("centerPoint", "size", 30);
scaleClockDemo2Dom.updateClockOption("centerPoint", "style", {
    backgroundColor: "#6DE195"
});
scaleClockDemo2Dom.updateClockOption("hourHand", "style", {
    backgroundColor: "blue"
});
scaleClockDemo2Dom.updateClockOption("minuteHand", "style", {
    backgroundColor: "orange"
});
scaleClockDemo2Dom.updateClockOption("secondHand", "style", {
    backgroundColor: "red"
});
scaleClockDemo2Dom.updateClockOption("scale", "bigStyle", {
    backgroundColor: "rebeccapurple"
});
scaleClockDemo2Dom.updateClockOption("scale", "smallStyle", {
    backgroundColor: "yellow"
});
scaleClockDemo2Dom.updateClockOption("scale", "numStyle", {
    1: {
        backgroundColor: "blue"
    },
    29: {
        backgroundColor: "blue"
    },
    31: {
        backgroundColor: "blue"
    },
    59: {
        backgroundColor: "blue"
    }
});
scaleClockDemo2Dom.updateClockOption("num12", "style", {
    color: "black"
});
scaleClockDemo2Dom.updateClockOption("num12", "numStyle", {
    3: {
        color: "red"
    },
    6: {
        color: "red"
    },
    9: {
        color: "red"
    },
    12: {
        color: "red"
    }
});
scaleClockDemo2Dom.updateClockOption("num60", "style", {
    color: "gray"
});
scaleClockDemo2Dom.updateClockOption("num60", "numStyle", {
    10: {
        color: "red"
    },
    20: {
        color: "red"
    },
    40: {
        color: "red"
    },
    50: {
        color: "red"
    }
});
        

属性

参数	说明	默认值
radius	钟表半径	60
hour-hand-width	时针宽度	3
minute-hand-width	分针宽度	2
second-hand-hide	秒针是否隐藏	false
second-hand-width	秒针宽度	1
scale-length	刻度长度	6
scale-big-width	大刻度宽度——小时	2
scale-small-width	小刻度宽度——分钟	0.8
num12-size	刻度内圈小时数字(1-12)的大小	12
num60-show	刻度外圈数字(1-60)是否显示	false
num60-size	刻度外圈数字(1-60)的大小	无（默认不显示）
说明：你可以通过获取DOM元素调用updateClockOption 方法，设置钟表中心圆点的大小，颜色；时针、分针、秒针的颜色；刻度盘、1-12、1-60的颜色（可以整体设置，也可以单个控制），这些在上面的定制钟表中都有体现。

待处理

该钟表组件支持的还不是很完善，涉及到计算的部分（例如：半径）还不支持动态更新，只支持开始时设置

自动生成目录auto-generate-directory

为了方便的阅读文章，更加快速的查找到自己想要的章节，这便是这个组件的由来。

简单介绍一下实现方式：查找body或者指定容器下的h1~h6子元素，之后通过样式控制缩进；支持点击跳转；支持滚动时选中对应的章节

运行效果

请查看文章右侧（如果没有，则某些情况下还没有适配）

属性

参数	说明	默认值
generate-source-selector	容器选择器，如果没有找到对应的元素则使用body	.blog-page
样式不太美观；小屏下暂时不支持；如果出现滚动条并且最后一屏章节目录比较多，目录选中时有问题

其他组件正在进行中……