vue后台_实战篇

一、一些常用组件效果的实现

1）面包屑导航

主要是使用$route.mathed:一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

类似的有一个router.getMatchedComponents(location?):返回目标位置或是当前路由匹配的组件数组（是数组的定义/构造类，不是实例）。通常在服务端渲染的数据预加载时时候。

(还记的vue-router中router,route,routes的区别么？)

1）router：是指一个vue-router的实例

2）route：路由信息对象，表示当前激活的路由的状态信息，可以出现

在组件内，即 this.$route
在 $route 观察者回调内
router.match(location) 的返回值

导航守卫的参数：

router.beforeEach((to, from, next) => {

  // `to` 和 `from` 都是路由对象

})

scrollBehavior 方法的参数:

const router = new VueRouter({

  scrollBehavior (to, from, savedPosition) {

    // `to` 和 `from` 都是路由对象

  }

})

3)routes：router的构造配置项

　　routes

类型: Array<RouteConfig>

RouteConfig 的类型定义：

declare type RouteConfig = {

  path: string;

  component?: Component;

  name?: string; // 命名路由

  components?: { [name: string]: Component }; // 命名视图组件

  redirect?: string | Location | Function;

  props?: boolean | string | Function;

  alias?: string | Array<string>;

  children?: Array<RouteConfig>; // 嵌套路由

  beforeEnter?: (to: Route, from: Route, next: Function) => void;

  meta?: any;

  // 2.6.0+

  caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)

  pathToRegexpOptions?: Object; // 编译正则的选项

}

<template>

<el-breadcrumb class="app-levelbar" separator="/">

  <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">

    <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>

    <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>

  </el-breadcrumb-item>

</el-breadcrumb>

</template>

<script>

export default {

  created() {

    this.getBreadcrumb()

  },

  data() {

    return {

      levelList: null

    }

  },

  methods: {

    getBreadcrumb() {

      // console.log('this.$route.matched', this.$route.matched);

      let matched = this.$route.matched.filter(item => item.name);

      const first = matched[];

      if (first && (first.name !== '首页' || first.path !== '')) {

        matched = [{

          name: '首页',

          path: '/'

        }].concat(matched)

      }

      this.levelList = matched;

    }

  },

  watch: {

    $route() {

      this.getBreadcrumb();

    }

  }

}

breadbar

2）历史访问记录TabView

使用vuex记录app全局的一些状态参数，诸如导航栏是否收起，浏览路径等等

import Cookies from 'js-cookie';

const app = {

  state: {

    sidebar: {

      opened: !+Cookies.get('sidebarStatus')

    },

    theme: 'default',

    livenewsChannels: Cookies.get('livenewsChannels') || '[]',

    visitedViews: []

  },

  mutations: {

    TOGGLE_SIDEBAR: state => {

      if (state.sidebar.opened) {

        Cookies.set('sidebarStatus', );

      } else {

        Cookies.set('sidebarStatus', );

      }

      state.sidebar.opened = !state.sidebar.opened;

    },

    ADD_VISITED_VIEWS: (state, view) => {

      if (state.visitedViews.some(v => v.path === view.path)) return

      state.visitedViews.push({ name: view.name, path: view.path })

    },

    DEL_VISITED_VIEWS: (state, view) => {

      let index

      for (const [i, v] of state.visitedViews.entries()) {

        if (v.path === view.path) {

          index = i

          break

        }

      }

      state.visitedViews.splice(index, )

    }

  },

  actions: {

    ToggleSideBar: ({ commit }) => {

      commit('TOGGLE_SIDEBAR')

    },

    addVisitedViews: ({ commit }, view) => {

      commit('ADD_VISITED_VIEWS', view)

    },

    delVisitedViews: ({ commit }, view) => {

      commit('DEL_VISITED_VIEWS', view)

    }

  }

};

export default app;

store/modules/app.js

如上所示，通过visitedViews这个state记录浏览历史记录，需要的时候遍历这个数组即可，watch　$route 每一次路由更改时，向数组中压入一条记录

<template>

  <div class='tabs-view-container'>

    <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">

      <el-tag :closable="true" :type="isActive(tag.path)?'primary':''" @close='closeViewTabs(tag,$event)'>

        {{tag.name}}

      </el-tag>

    </router-link>

  </div>

</template>

<script>

  export default {

    computed: {

      visitedViews() {

        return this.$store.state.app.visitedViews.slice(-)

      }

    },

    methods: {

      closeViewTabs(view, $event) {

        this.$store.dispatch('delVisitedViews', view)

        $event.preventDefault()

      },

      generateRoute() {

        if (this.$route.matched[this.$route.matched.length - ].name) {

          return this.$route.matched[this.$route.matched.length - ]

        }

        this.$route.matched[].path = '/'

        return this.$route.matched[]

      },

      addViewTabs() {

        this.$store.dispatch('addVisitedViews', this.generateRoute())

      },

      isActive(path) {

        return path === this.$route.path

      }

    },

    watch: {

      $route() {

        this.addViewTabs()

      }

    }

  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .tabs-view-container {

    display: inline-block;

    vertical-align: top;

    margin-left: 10px;

    .tabs-view {

      margin-left: 10px;

    }

  }

</style>

历史浏览路径组件tabViews实现

3）全屏显示

　　hmtl5有相关的screenfull的API，只不过兼容性并不好。可以借助第三方库，如https://github.com/sindresorhus/screenfull.js,使用起来其实很简单

<template>

  <svg @click='click' class="icon screenfull" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

    t="" viewBox="0 0 1024 1024" version="1.1" p-id="" :fill='fill' :width="width" :height="height">

    <path d="M604.157933 512l204.484208 204.484208 82.942037-82.942037c10.364045-10.952446 26.498514-13.83817 40.309054-8.067746 13.249769 5.742794 22.465664 18.99154 22.465664 33.977859l0 258.042008c0 20.168342-16.695241 36.863582-36.863582 36.863582L659.452283 954.357873c-14.986319 0-28.236088-9.215896-33.977859-23.025413-5.770424-13.249769-2.885723-29.384237 8.067746-39.748283l82.942037-82.942037L512 604.157933 307.515792 808.642141l82.942037 82.942037c10.952446 10.364045 13.83817 26.498514 8.067746 39.748283-5.742794 13.809517-18.99154 23.025413-33.977859 23.025413L106.504686 954.357873c-20.168342 0-36.863582-16.695241-36.863582-36.863582L69.641103 659.452283c0-14.986319 9.215896-28.236088 23.025413-33.977859 13.249769-5.770424 29.384237-2.8847 39.748283 8.067746l82.942037 82.942037 204.484208-204.484208L215.357859 307.515792l-82.942037 82.942037c-6.890944 6.918573-16.10684 10.952446-25.911136 10.952446-4.593622 0-9.804297-1.14815-13.83817-2.8847-13.809517-5.742794-23.025413-18.99154-23.025413-33.977859L69.641103 106.504686c0-20.168342 16.695241-36.863582 36.863582-36.863582L364.546693 69.641103c14.986319 0 28.236088 9.215896 33.977859 23.025413 5.770424 13.249769 2.8847 29.384237-8.067746 39.748283l-82.942037 82.942037 204.484208 204.484208L716.484208 215.357859l-82.942037-82.942037c-10.952446-10.364045-13.83817-26.498514-8.067746-39.748283 5.742794-13.809517 18.99154-23.025413 33.977859-23.025413l258.042008 0c20.168342 0 36.863582 16.695241 36.863582 36.863582l0 258.042008c0 14.986319-9.215896 28.236088-22.465664 33.977859-4.593622 1.736551-9.804297 2.8847-14.397918 2.8847-9.804297 0-19.020192-4.033873-25.911136-10.952446l-82.942037-82.942037L604.157933 512z"

      p-id="" />

  </svg>

</template>

<script>

  import screenfull from 'screenfull';

  export default {

    name: 'hamburger',

    props: {

      width: {

        type: Number,

        default:

      },

      height: {

        type: Number,

        default:

      },

      fill: {

        type: String,

        default: '#48576a'

      }

    },

    data() {

      return {

        isFullscreen: false

      }

    },

    methods: {

      click() {

        if (!screenfull.enabled) {

          this.$message({

            message: 'you browser can not work',

            type: 'warning'

          });

          return false;

        }

        screenfull.toggle();

      }

    }

  }

</script>

<style scoped>

.screenfull {

  display: inline-block;

  cursor: pointer;

  vertical-align: -.15em;

}

</style>

screenFull组件实现

二、一些常用的第三方库

1)富文本编辑器：tinyMCE

2)markdown编辑器：simplemde-markdown-editor，markdown的转换使用了shutdown

3)json编辑器（代码编辑器）： CodeMirror

4)列表拖拽：vue.draggalbe（基于sortable）

三、一些常用的文本过滤方法(包括时间格式化方法等）

function pluralize(time, label) {

  if (time === ) {

    return time + label

  }

  return time + label + 's'

}

export function timeAgo(time) {

  const between = Date.now() /  - Number(time);

  if (between < ) {

    return pluralize(~~(between / ), ' minute')

  } else if (between < ) {

    return pluralize(~~(between / ), ' hour')

  } else {

    return pluralize(~~(between / ), ' day')

  }

}

export function parseTime(time, cFormat) {

  if (arguments.length === ) {

    return null;

  }

  if ((time + '').length === ) {

    time = +time *

  }

  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';

  let date;

  if (typeof time == 'object') {

    date = time;

  } else {

    date = new Date(parseInt(time));

  }

  const formatObj = {

    y: date.getFullYear(),

    m: date.getMonth() + ,

    d: date.getDate(),

    h: date.getHours(),

    i: date.getMinutes(),

    s: date.getSeconds(),

    a: date.getDay()

  };

  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {

    let value = formatObj[key];

    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - ];

    if (result.length >  && value < ) {

      value = '' + value;

    }

    return value || ;

  });

  return time_str;

}

export function formatTime(time, option) {

  time = +time * ;

  const d = new Date(time);

  const now = Date.now();

  const diff = (now - d) / ;

  if (diff < ) {

    return '刚刚'

  } else if (diff < ) { // less 1 hour

    return Math.ceil(diff / ) + '分钟前'

  } else if (diff <  * ) {

    return Math.ceil(diff / ) + '小时前'

  } else if (diff <  *  * ) {

    return '1天前'

  }

  if (option) {

    return parseTime(time, option)

  } else {

    return d.getMonth() +  + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'

  }

}

/* 数字 格式化*/

export function nFormatter(num, digits) {

  const si = [

        { value: 1E18, symbol: 'E' },

        { value: 1E15, symbol: 'P' },

        { value: 1E12, symbol: 'T' },

        { value: 1E9, symbol: 'G' },

        { value: 1E6, symbol: 'M' },

        { value: 1E3, symbol: 'k' }

  ];

  for (let i = ; i < si.length; i++) {

    if (num >= si[i].value) {

      return (num / si[i].value + 0.1).toFixed(digits).replace(/\.+$|(\.[-]*[-])+$/, '$1') + si[i].symbol;

    }

  }

  return num.toString();

}

export function html2Text(val) {

  const div = document.createElement('div');

  div.innerHTML = val;

  return div.textContent || div.innerText;

}

export function toThousandslsFilter(num) {

  return (+num || ).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{})+$)/g, ','));

}

filters.js

在main.js中引入：

import * as filters from './filters'; // 全局vue filter

Object.keys(filters).forEach(key => {

  Vue.filter(key, filters[key])

});

巴特西

vue后台_实战篇

routes

最新文章

热门文章