vue2.0 click 点击事件修饰符
stop 阻止单击事件冒泡 prevent 阻止默认事件
- eg:
- <div v-on:click.stop.prevent="doThat"></div>
- // 修饰符可以串联
2. 如果在组件中使用了 v-html, 要为 myHtml 中的标签添加 CSS 样式, 我们需要在写样式的时候添加 >>>:
- <div class="foo">
- <div v-html="myHtml"></div>
- </div>
- .foo>>> img { max-width: 100%; }
3.axios 封装 1
- // 配置 API 接口地址
- var root = 'http:/';
- // 引用 axios
- var axios = require('axios');
- // 自定义判断元素类型 JS
- function toType (obj) {
- return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
- }
- // http request 拦截器
- // axios.interceptors.request.use(
- // config => {
- //// config.headers.Authorization = 'JWT' + localStorage.token;
- // return config;
- // },
- // error => {
- // return Promise.reject(error);
- // }
- // );
- // 参数过滤函数
- function filterNull (o) {
- for (var key in o) {
- if (o[key] === null) {
- delete o[key];
- }
- if (toType(o[key]) === 'string') {
- o[key] = o[key].trim();
- } else if (toType(o[key]) === 'object') {
- o[key] = filterNull(o[key]);
- } else if (toType(o[key]) === 'array') {
- o[key] = filterNull(o[key]);
- }
- }
- return o;
- }
- /*
- 接口处理函数
- 这个函数每个项目都是不一样的, 我现在调整的是适用于
- http://0 的接口, 如果是其他接口
- 需要根据接口的参数进行调整.
- 主要是, 不同的接口的成功标识和失败提示是不一致的.
- 另外, 不同的项目的处理方法也是不一致的, 这里出错就是简单的 alert
- */
- function apiAxios (method, url, vm, params, success, failure) {
- if (params) {
- params = filterNull(params);
- }
- axios({
- method: method,
- url: url,
- data: method === 'POST' || method === 'PUT' ? params : null,
- params: method === 'GET' || method === 'DELETE' ? params : null,
- baseURL: root,
- withCredentials: false
- })
- .then(function (res) {
- if (res.status === 200) {
- success(res.data);
- } else {
- if (failure) {
- failure(res.data);
- } else {
- window.alert('error:' + JSON.stringify(res.data));
- }
- }
- })
- .catch(function (err) {
- let res = err.response;
- if (err) {
- switch (res.status) {
- case 401:
- window.alert('授权失败');
- break;
- case 403:
- window.alert('您没有该操作权限');
- break;
- case 500:
- window.alertg('服务器错误');
- }
- }
- });
- }
- // 返回在 vue 模板中的调用接口
- export default {
- get: function (url, vm, params, success, failure) {
- return apiAxios('GET', url, vm, params, success, failure);
- },
- post: function (url, vm, params, success, failure) {
- return apiAxios('POST', url, vm, params, success, failure);
- },
- put: function (url, vm, params, success, failure) {
- return apiAxios('PUT', url, vm, params, success, failure);
- },
- delete: function (url, vm, params, success, failure) {
- return apiAxios('DELETE', url, vm, params, success, failure);
- }
- };
4 axios 封装 2
- api.js
- import axios from 'axios';
- import {createError} from './utils';
- const request = axios.create({
- baseURL: 'http:/',
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded',
- 'Authorization': 'JWT' + localStorage.token
- }
- });
- // 初始化默认 post header
- axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
- const handleRequest = (request) => {
- return new Promise((resolve, reject) => {
- request.then(response => {
- if (!response.data) {
- return reject(createError(400, 'no data'));
- }
- resolve(response);
- }).catch(error => {
- // alert(localStorage.token);
- const response = error.response;
- reject(response);
- });
- });
- };
- export default {
- // 获取组织结构信息
- getSiteInfo (params) {
- return handleRequest(request.get('api/user/obunion-trees/?' + params, params));
- },
- // 获取信息
- getBloggerInfo (params) {
- return handleRequest(request.get('api/qask/info/mes/'));
- },
- };
- utils.js
- export const createError = (code, message) => {
- const err = new Error(message);
- err.code = code;
- return err;
- };
5. 数组去重
- unite = (arr) => {
- var s = [];
- // 遍历数组
- for (var i = 0; i <arr.length; i++) {
- if (s.indexOf(arr[i]) === -1) { // 判断在 s 数组中是否存在, 不存在则 push 到 s 数组中
- s.push(arr[i]);
- }
- }
- return s;
- };
6. 递归函数
- var data =[
- {
- 'id': 1,
- 'title': 'title1',
- 'children': [
- {
- 'id': 2,
- 'title': 'title2'
- },
- {
- 'id': 3,
- 'title': 'title3',
- 'children': [
- {
- 'id': 4,
- 'title': 'title4'
- }
- ]
- }
- ]
- }
- ]
- restore_last_state = (Vue, data, id) => {
- var state;
- if (data instanceof Array) {
- for (let i in data) {
- if (data[i].id === id) {
- Vue.set(data[i], 'expand', true);
- Vue.set(data[i], 'selected', true);
- return true;
- } else {
- if ((data[i].children !== undefined) && (data[i].children instanceof Array)) {
- state = this.restore_last_state(Vue, data[i].children, id);
- if (state) {
- Vue.set(data[i], 'expand', true);
- return true;
- }
- }
- }
- }
- }
- return false;
- };
来源: http://www.qdfuns.com/article/49499/784f9029d37ffc92a73bc370e0e0a2c6.html