vue樓層跳躍元件

1.scrollnav.js

function _select(elem) {
	elem.addClass('yh-selected').text(elem.attr('yh-data-title'));
}

function _unselect(elem) {
	elem.removeClass('yh-selected').text("F" + elem.attr('yh-data-index'));
}

var mixin = {
	mounted() {
		var elem = $(this.$el);
		var root = $("<div>", { class: "yh-scroll-nav" }).appendTo(elem);
		var i = 1;
		var anchors = $('.yh-page-anchor', elem);
		var n = anchors.length;
		anchors.each(function (elem) {
			var div = $(this);
			var title = div.attr('yh-data-title');
			if (!title) {
				title = div.text();
			}
			if (title == undefined || title.length == 0) {
				title = "F" + i;
			}
			var a = $("<a>", {
				href: "#" + div.attr('id'),
				'yh-data-index': i,
				'yh-data-title': title
			})
				.text("F" + i)
				.on('click', function () {
					var elem = $(this);
					if (!elem.hasClass('yh-selected')) {
						Waypoint.disableAll()
						_unselect($('.yh-selected', root));
						_select(elem, true);
						setTimeout(function () {
							Waypoint.enableAll()
						}, 500);
					}
				});
			var param = {
				handler: function () {
					var eid = this.element.id;
					var selected = $('.yh-selected', root);
					if (selected.attr('href') != '#' + eid) {
						_unselect(selected);
						_select($("a[href='#" + eid + "']", root));
					}
				}
			};
			if (i == n) {
				param.offset = 'bottom-in-view';
			} else if (i > 1) {
				param.offset = '30%';
			}
			div.waypoint(param);
			root.append(a);
			++i
		});
	}
}

export default mixin
           

2.ScrollNavDemo.vue

<template>
  <div class="yh-page">
    <div id="f1" class="yh-page-anchor floor" yh-data-title="子產品一">
      <h3>頁面導航示範</h3>
      <div class="desc">
        Demo源代碼：
        <code>/examples/components/modules/ScrollNavDemo.vue</code>
      </div>
    </div>
    <div id="f2" class="yh-page-anchor floor" yh-data-title="子產品二">
      <h4>引用方法</h4>
      <ol>
        <li style="margin-bottom:10px">
          添加mixin：
          <code>mixins:[yhfront.ui.mixins.scrollnav]</code>
        </li>
        <li>添加yh-page-anchor至需要導航的div，該div需要設定id屬性。</li>
        <li>通過設定div的yh-data-title屬性，指明導航區塊title，否則使用div.text()</li>
      </ol>
    </div>
    <div id="f3" class="yh-page-anchor floor" yh-data-title="使用者查詢">F3</div>
    <div id="f4" class="yh-page-anchor floor">F4</div>
    <div id="f5" class="yh-page-anchor floor">F5</div>
  </div>
</template>
<script>
import { mixin } from "../../assets/scrollnav";
export default {
  mixins: [mixin],
  name: "ScrollNavDemo",
  data() {
    return {};
  },
  props: [],
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
div.floor {
  min-height: 200px;
  background-color: #ececec;
  margin: 10px;
}
</style>