Vue全家桶开发笔记

state 中没有属性的情况下，新增属性不会触发mutations修改。

例:

commit('change', {
  c: 3,
  d: 4,
});

state: {
  test: {
    a: 1,
    b: 2,
  }
},
mutations: {
  change(state, payload) {
    state.test.c = payload.c; // 直接新增属性不会触发
    state.test = Object.assign(state.test, payload); // 浅拷贝不会触发
  }
}

 

解决方案

state.test = { state.test, ...payload };

　　

vue-cli打包后，css里的背景图片无法找到资源

解决方法：

https://github.com/vuejs/vue-cli/issues/179

@margox

 

在build目录下新建一个cssPathResolver.js，内容如下：

module.exports = function (source) {
  if (process.env.NODE_ENV === 'production') {
    return source.replace('__webpack_public_path__ + "static', '"..')
  } else {
    return source
  }
}

 

 

webpack.base.conf.js里的img部分改为

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loaders: [
    {
      loader: path.resolve(__dirname, 'cssPathResolver')
    },
    {
      loader: 'url-loader',
      query: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      },
    },
  ],
},

　　

build后图片加载是相对路径，无法找到图片

图片大小大于10K。

在build文件夹webpack.base.conf.js修改url-loader的limit。

{
  loader: 'url-loader',
  query: {
    limit: 150000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  },
}

 

或者可在src文件夹同级的目录建立static

<img src='static/xxxx.jpg'>

 

给v-for遍历产生的元素绑定事件，并动态添加style。
例：

<ul v-for='result of results'>
  <li>
    <div class='cut'>
      <img :src='result.src'>
    </div>
  </li>
</ul>

当图片加载时，记录当前图片原始宽高，处理后传值给style。

首先需求是，在加载图片时记录当前图片原始宽高，所以img标签需要加上@load绑定onload事件。

<ul v-for='result of results'>
  <li>
    <div class='cut'>
      <img @load='load' :src='result.src'>
    </div>
  </li>
</ul>

<script>
export default {
  data() {
    results: [ 
      { src: 'src', style: null }, 
      { src: 'src', style: null }, 
      { src: 'src', style: null }, 
    ],
  },
  methods: {
    load(e) {
      const img = e.target;
      const [naturalWidth, naturalHeight] = getNatural(img);

      function getNatural(img) {
        let nWidth;
        let nHeight;
        if (img.naturalWidth) {
          nWidth = img.naturalWidth;
          nHeight = img.naturalHeight;
        }
        //省略兼容html 4
        return [nWidth, nHeight];
      }
    },
  },
};
</script>

 

问题来了，这时候load方法虽然获取到了图片的原始宽高，但是传值给style则是个问题。如果要传当前元素的宽高，则需要在模板部分修改：

<img @load='load(result)' :src='result.src'>

 

这时传的值result会覆盖了event事件。导致load方法出错。

如果需要传event事件需要改成这样：

<img @load='load(result, $event)' :src='result.src'>

load方法就能同时接受当前遍历对象及触发事件。
ps：methods里面的方法有个默认声明的对象event，里面的属性和$event传过来的一样，但是官方文档没写，不建议使用。

此时在load方法里添加处理style的逻辑：

methods: {
  load(item, e) {
    const img = e.target;
    const [naturalWidth, naturalHeight] = getNatural(img);

    //省略函数
    if (naturalWidth >= narturalHeight) {
      margin = ((naturalWidth * 100) / narturalHeight) / 2;
      item.style = { marginLeft: `-${margin}px`, height: '100px' };
    } else {
      item.style = { marginLeft: 'margin-left: -60px', height: '100px' };
    }
  },
},

这里也要注意style是个对象。同时，属性的值不能有分号，否则不会渲染style。