vue2.0实现纯文字公告横向滚动和纵向滚动

在 Vue.js 2.0 中，你可以使用自定义指令（Custom Directive）结合 CSS 实现文本公告的滚动效果。以下是基本步骤：

1. **创建自定义指令**:
首先，你需要在 Vue 组件中创建一个自定义指令，比如 `scrollable-text`，用于处理滚动功能。例如：

   Vue.directive('scrollable-text', {
     bind(el, binding) {
       el.style.whiteSpace = 'nowrap'; // 保持单词不换行
       el.addEventListener('scroll', () => {
         const { top } = el.scrollTop; // 获取滚动位置
         if (top === 0) {
           binding.value(false); // 当滚动到顶部时停止滚动
         } else if (top + el.clientHeight >= el.scrollHeight) {
           binding.value(true); // 当滚动到底部时开始滚动
         }
       });
     },
     update(value) {
       el.classList.toggle('scrolling', value);
       // 如果需要动画效果，可以添加过渡样式
     },
     unbind() {
       el.removeEventListener('scroll');
     }
   });

2. **应用指令**:
在模板中，将 `v-scrollable-text` 指令应用于需要滚动的元素，如 `<p>` 或 `<div>`。

   <div v-scrollable-text>
     这是一个很长很长很长的文字公告...
   </div>

3. **CSS样式**:
添加一些 CSS 样式来控制滚动的行为以及显示滚动条（这取决于你的需求）。如果想要水平滚动，只需调整 `width` 足够大，并设置 overflow-x 为 scroll；垂直滚动则设置 `height` 和 `overflow-y`。

   .scrolling {
     overflow: auto;
     -webkit-overflow-scrolling: touch; // 提供流畅的触摸滚动体验（仅适用于现代浏览器）
   }

4. **动态切换滚动方向**:
如果你需要让公告既能横向又能纵向滚动，可以在绑定值上做文章，通过计算属性来判断滚动方向。

   computed: {
     scrollingDirection() {
        // 判断滚动轴方向
        return this.$el.scrollHeight > this.$el.scrollWidth ? 'vertical' : 'horizontal';
      }
   },
   ...
   <div v-scrollable-text v-bind:direction="scrollingDirection">
     ...
   </div>