You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.1 KiB
76 lines
2.1 KiB
3 years ago
|
<template>
|
||
|
|
<view :id="$sUid" :style="wrap_style">
|
||
|
|
<view class="s-index-anchor" :class="c_class" :style="c_style">
|
||
|
|
<slot>{{ index }}</slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import componentMixin from '../../mixins/componentMixin';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* s-index-anchor 索引标题组件
|
||
|
|
* @description 索引列表组件的子级组件
|
||
|
|
* @property {String|Number} sort 当使用方数据变动时，anchor组件的数量会变动，传入sort可使其正确排列父级anchorList顺序
|
||
|
|
* @property {String|Number} index 索引字符
|
||
|
|
* @property {String|Object} activeStyle 高亮时的样式
|
||
|
|
* @example <s-index-anchor :index=""></s-index-anchor>
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
name: 'SIndexAnchor',
|
||
|
|
mixins: [componentMixin],
|
||
|
|
props: {
|
||
|
|
sort: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
index: [String, Number],
|
||
|
|
activeStyle: [String, Object],
|
||
|
|
},
|
||
|
|
data: () => ({
|
||
|
|
active: false,
|
||
|
|
prevActive: false,
|
||
|
|
wrapStyle: null,
|
||
|
|
anchorStyle: null,
|
||
|
|
}),
|
||
|
|
computed: {
|
||
|
|
wrap_style() {
|
||
|
|
return this.$mergeStyle(this.wrapStyle);
|
||
|
|
},
|
||
|
|
c_class() {
|
||
|
|
return this.$mergeClass({
|
||
|
|
's-index-anchor--active': this.active,
|
||
|
|
's-hairline--bottom': this.prevActive,
|
||
|
|
}, this.custom_class);
|
||
|
|
},
|
||
|
|
c_style() {
|
||
|
|
return this.$mergeStyle(
|
||
|
|
this.custom_style,
|
||
|
|
this.anchorStyle,
|
||
|
|
this.active ? this.activeStyle : '',
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.$sIndexList = this.$getParentUntil('SIndexList');
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$sIndexList.anchorList.push(this);
|
||
|
|
this.$sIndexList.anchorList.sort((a, b) => a.sort == b.sort ? 0 : a.sort > b.sort ? 1 : -1);
|
||
|
|
this.$sIndexList.anchorIndexList = this.$sIndexList.anchorList.map(({ index }) => index);
|
||
|
|
this.$sIndexList.refresh();
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
const index = this.$sIndexList.anchorList.findIndex(context => context === this);
|
||
|
|
if (index > -1) {
|
||
|
|
this.$sIndexList.anchorList.splice(index, 1);
|
||
|
|
this.$sIndexList.anchorIndexList = this.$sIndexList.anchorList.map(({ index }) => index);
|
||
|
|
this.$sIndexList.refresh();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" src="./index.scss"></style>
|